Comparison of layout engines (Cascading Style Sheets)

The following tables compare CSS compatibility and support for a number of layout engines. Please see the individual products' articles for further information. This article is not all-inclusive or necessarily up-to-date. Unless otherwise specified in footnotes, comparisons are based on the stable versions without any add-ons, extensions or external programs.

__TOC__

CSS version support

See the article Cascading Style Sheets for more information on the different versions of CSS. This table doesn't reference CSS2.0, as CSS2.1 was intended to replace it by correcting or removing a few errors and features rejected by the CSS community. Most of the removed CSS2 features will be made obsolete by CSS3.

Trident

Tasman

Gecko

WebKit

KHTML

Presto

iCab

Prince XML

CSS1

CSS2.1

CSS3

Grammar and rules

Trident

Tasman

Gecko

WebKit

KHTML

Presto

CSS2

!important

Weight increasing

/*Comment*/

Comments

@import

Import stylesheet

@charset

Character set

?

@media

Media-specific rules

@page

For paged media

1

CSS3

@namespace

Namespace declaration

@font-face

Define font

Trident grammar and rule notes

  1. !important — !important doesn't override rules defined later in the same declaration block prior to IE7.
  2. @import — Media type support is broken in all versions including IE7. For @import exampleurl examplemedia; IE requests the url exampleurl%20examplemedia and will include url() and/or quotes in the url, too, if present in the @import rule.
  3. @font-face — Only supports Embedded OpenType (.eot) font format, does not understand the format() identifier.

Tasman grammar and rule notes

  1. @font-face — Versions 5.16 and 5.17 will download fonts specified but not use them. 5.23 no longer downloads the font.

Presto grammar and rule notes

  1. @import — Whilst Gecko, WebKit and iCab download all media stylesheets immediately, Opera only downloads handheld, print, projection and screen media, as well as speech if "voice" feature is enabled and tv, on tv devices. Text browser emulation mode is only a user stylesheet, so it does not switch to tty media type. This is consistent with older text browsers, which do not respect any CSS.

Selectors

Trident

Tasman

Gecko

WebKit

KHTML

Presto

Element selectors

CSS2

*

Universal

E

Element

E.class

Class

E#id

ID

CSS3

ns|E

Namespaced

Relationship selectors

CSS2

E F

Descendant

E > F

Child

E + F

Direct adjacent

CSS3

E ~ F

Indirect adjacent

Attribute selectors

CSS2

E[attr]

Has

E[attr="value"]

Equals

E[attr~="value"]

Contains (space-separated)

E[attr|="value"]

Contains (hyphen-separated)

CSS3

E[attr^="value"]

Begins with

E[attr$="value"]

Ends with

E[attr*="value"]

Contains substring

E[ns|attr]

Namespaced

Pseudo-classes

CSS2

E:link

Unvisited hyperlink

E:visited

Visited hyperlink

E:ACTIVE

Active

E:hover

Mouseover

E:focus

Focused

E:first-child

First child

E:lang()

Language

CSS3

E:root

Root

E:first-of-type

First child of type

E:last-child

Last child

E:last-of-type

Last child of type

E:only-child

Only child

E:only-of-type

Only child of type

E:nth-child

Nth child

E:nth-last-child

Nth last child

E:nth-of-type

Nth child of type

E:nth-last-of-type

Nth last child of type

E:target

Target

E:empty

Empty

E:not()

Negation

E:enabled

Enabled state

E:disabled

Disabled state

E:checked

Checked state

E:indeterminate

Indeterminate state

E:default

Default

E:valid

Valid

E:invalid

Invalid

E:in-range

In range

E:out-of-range

Out of range

E:required

Required

E:optional

Optional

E:read-only

Read-only

E:read-write

Read and write

Pseudo-elements

CSS2

E:first-letter

First letter

E:first-line

First line

E:before

Before

E:after

After

CSS3

E::before

Double colon notation

E::after

Double colon notation

E::first-letter

Double colon notation

E::first-line

Double colon notation

E::selection

Selection

 

Trident

Tasman

Gecko

WebKit

KHTML

Presto

Trident selector notes

  1. :active — :active is for anchor element only.
  2. :hover — :hover is applied for all elements only in standards-compliant mode, not quirks mode 2. Prior to 7.0, :hover is for anchor element only.
  3. .one.two — only .two class selector was taken into consideration before 7.0.
  4. * — Prior to 7.0 this was treated as a single or no element.
  5. :first-letter — float and vertical-align properties not allowed.
  6. :first-line — can't be attached to a inline-block element and background property doesn't work when pseudo-element is attached to a layout element.
  7. [attr] — matches every td and th in a table when the attribute is colspan (regardless of whether any actually have a colspan attribute). See Bug 446817.

Tasman selector notes

  1. :hover — For anchor element only prior to 0.9.
  2. .one.two — only .two class selector is taken into consideration.

Gecko selector notes

  1. :*-of-type — See Bug 128585 on Bugzilla.
  2. :nth-* — See Bug 75375 on Bugzilla.
  3. (:):before, (:):after — CSS2.0 behavior : some properties are unimplemented prior to 1.9.1. See Bug 237119 on Bugzilla.

WebKit selector notes

  1. :lang() — Only detected when explicitly present on element being tested, attribute not inherited.
  2. :first-line — text-transform doesn't apply with this pseudo-element. See Bug 3409 on Bugzilla.

Presto selector notes

  1. :target — Style doesn't get applied when navigating using back and forward buttons.

Properties

Trident

Tasman

Gecko

WebKit

KHTML

Presto

iCab

Box Model

CSS2

margin

padding

width

height

float

clear

display

min-width

max-width

min-height

max-height

clip

overflow

visibility

CSS3

overflow-x

overflow-y

Borders

CSS2

border

border-color

border-style

border-width

border-top

border-top-width

border-right

border-right-width

border-bottom

border-bottom-width

border-left

border-left-width

border-top-color

border-top-style

border-right-color

border-right-style

border-bottom-color

border-bottom-style

border-left-color

border-left-style

CSS3

border-radius

border-break

border-image

box-shadow

Line Layout

CSS2

line-height

vertical-align

Positioning

CSS2

position

top

right

bottom

left

z-index

Generated and Replaced Content

CSS2

quotes

content

counter-increment

counter-reset

Lists

CSS2

list-style

list-style-image

list-style-position

list-style-type

Colors

CSS2

color

CSS3

opacity

Backgrounds

CSS2

background

background-attachment

background-color

background-image

background-position

background-repeat

CSS3

background (multiple)

background-clip

background-origin

background-break

background-size

Fonts

CSS2

font

font-family

font-size

font-style

font-variant

font-weight

CSS3

font-size-adjust

font-stretch

font-effect

font-smooth

font-emphasize

Text

CSS2

text-align

text-decoration

text-indent

text-transform

letter-spacing

word-spacing

white-space

direction

unicode-bidi

CSS3

text-shadow

text-overflow

word-break

text-wrap

word-wrap

text-align-last

text-justify

punctuation-trim

text-emphasis

text-outline

hanging-punctuation

Tables

CSS2

border-collapse

border-spacing

caption-side

empty-cells

table-layout

User interface

CSS2

cursor

outline

outline-color

outline-style

outline-width

CSS3

outline-offset

outline-radius

box-sizing

resize

appearance

icon

nav-index

nav-up

nav-right

nav-down

nav-left

Paged media

CSS2

orphans

page-break-after

page-break-before

page-break-inside

widows

CSS3

page

size

image-orientation

fit

fit-position

Speech

CSS3

voice-volume

rowspan="22"

rowspan="22"

rowspan="22"

rowspan="22"

rowspan="22"

rowspan="22"

voice-balance

speak

pause

pause-after

pause-before

rest

rest-before

rest-after

cue

cue-after

cue-before

mark

mark-before

mark-after

voice-family

voice-rate

voice-pitch

voice-pitch-range

voice-stress

voice-duration

phonemes

Media Queries

CSS3

width

rowspan="13"

rowspan="13"

rowspan="13"

rowspan="13"

height

?

device-width

?

device-height

?

orientation

?

?

aspect-ratio

?

?

device-aspect-ratio

?

color

?

color-index

?

monochrome

?

resolution

?

scan

?

grid

?

Ruby characters

CSS3

ruby-position

rowspan="4"

rowspan="4"

rowspan="4"

rowspan="4"

rowspan="4"

ruby-align

ruby-overhang

ruby-span

Multi-column Layout

CSS3

column-break-before

rowspan="7"

rowspan="7"

rowspan="7"

rowspan="7"

rowspan="7"

column-break-after

column-break-inside

column-count

column-gap

column-rule

columns

Trident property notes

  1. overflow — overflow:visible is incorrectly supported prior to IE7.
  2. border-style — hidden is not supported. dotted is rendered as dashed prior to IE7.
  3. display — Only none, block, inline, table-header-group, and table-footer-group are supported prior to 7.0. In 5.5+, inline-block is supported on elements that are naturally inline.
  4. position — Prior to IE 7, fixed positioning was not supported, IE 7 supports it in standards-compliant mode only.
  5. visibility — Prior to IE 8, collapse value is not supported.
  6. background-attachment — Prior to IE 7, fixed was allowed on the body element only.
  7. opacity — isn't implemented. Trident is supporting a proprietary alternative (not understood by other layout engines) since v4.0. [http://msdn2.microsoft.com/en-us/library/ms532910(VS.85).aspx]
  8. background-position — Fixed positioning is not supported.
  9. border-color — transparent value is not supported prior to IE7.
  10. font-weight — Incorrect rendering when value is 600 3.
  11. text-decoration — Optional property blink is not supported.
  12. white-space — nowrap is supported in IE 5.5 and later. pre is supported in IE 6 and later in standards-compliant mode. pre-line and pre-wrap are not supported.
  13. list-style-type — decimal-leading-zero, lower-greek, lower-latin, upper-latin, upper-roman are not supported.

Gecko property notes

  1. display — run-in 4 is not supported. inline-table 5 and inline-block 6 are supported in Gecko 1.9a2+.
  2. z-index — Negatives values are badly supported prior to 1.9.
  3. quotes — Does not support nested quotes prior to 1.8 7.
  4. content — none value is unsupported prior to 1.9.
  5. background-position — Gecko versions prior to 1.7 implement the CSS2 syntax, not the proposed CSS2.1 expanded syntax.
  6. font-size-adjust — Supported in Windows only prior to 1.9.
  7. font-weight — Only Regular and Bold weights get used, even if Light or Heavy/Black faces are installed.
  8. white-space — pre-line is not supported prior to 1.9.1. Prior to 1.9, pre-wrap was only supported experimentally as -moz-pre-wrap.
  9. visibility — collapse is not supported prior to 1.8.
  10. border-radius — border curves are circular, but the W3C specs 8 define them as elliptical. Dashed curves are not available. Short-cut definitions for border-radius read "tl tr br bl" instead of the W3C's "tr br bl tl". Interesting bugs: 9
  11. page-break-before; page-break-after — Only the always and auto values are supported.

WebKit property notes

  1. box-shadow —
  2. font — The system font keywords are not supported that allow designers to tailor presentation to the user’s operating system environment.
  3. font-weight — Only Regular and Bold weights get used, even if Light or Heavy/Black faces are installed.
  4. page-break-before; page-break-after — Only the always and auto values are supported.
  5. text-decoration — Optional property blink is not supported.
  6. white-space — pre-line and pre-wrap from the proposed CSS2.1 draft are not supported.
  7. text-shadow — Multiple shadows are not supported.
  8. visibility — collapse is not supported prior to 522. Its implementation has the same effect as hidden and is therefore not compliant.

KHTML property notes

  1. overflow — Values scroll and auto are unsupported.
  2. page-break-before; page-break-after — Before 3.5 only the always and auto values were supported.
  3. text-decoration — Optional property blink is not supported.
  4. visibility — All properties are supported, but the implementation of collapse has the same effect as hidden and is therefore not compliant.

Presto property notes

  1. counter-increment, counter-reset — Implemented the algorithm in REC CSS2.
  2. background-position — Presto versions prior to 8.0 implement the CSS2 syntax, not the proposed CSS2.1 expanded syntax.
  3. font-weight — Incorrect rendering when value is 600 10. Renders the text in a compatibility mode for websites made for Trident.
  4. visibility — collapse is unsupported in table columns.

On rows, it has the same effect as hidden and is therefore not compliant.

  1. cursor — cursor is ignored with dynamic pseudo-classes and custom cursors are unsupported.

iCab property notes

  1. display — run-in is not supported.
  2. text-align — justify is not supported.
  3. font-stretch — Simulated using letter-spacing property.
  4. font-weight — Incorrect (bold) rendering when value is 500.
  5. visibility — collapse only partial.
  6. caption-side — top and bottom only which would comply with the proposed CSS2.1 elimination of the values: left and right.
  7. empty-cells — Compresses hidden rows but does not hide them completely.

Values and units

Trident

Tasman

Gecko

WebKit

KHTML

Numbers

CSS2

A floating-point number

followed by units

followed by %

An integer

CSS3

angle-unit

rowspan="3"

rowspan="3"

rowspan="3"

time-unit

frequency-unit

Strings

CSS2

String

\code

Unicode escapes

Shapes

| CSS2

rect()

A rectangle

Functions

CSS2

url()

Uniform Resource Identifier

counter()

attr()

Attribute identifier

| CSS3

calc()

Colors

CSS2

HTML4 color keywords

| 16 predefined web colors

#rrggbb or #rgb

Hexadecimal notation

rgb(r,g,b)

RGB notation

system colors

28 predefined system colors 11

CSS3

SVG color keywords

{{?}}

currentColor

The value of the ‘color’ property.

rgba(r,g,b,a)

RGBA notation

hsl(h,s,l)

HSL notation

hsla(h,s,l,a)

HSLA notation

transparent

Full transparency

Keywords

CSS2

auto

Automatically calculated

inherit

Inherited from the parents

?

CSS3

initial

Units

CSS2

px

Pixel

rowspan="9"

rowspan="9"

rowspan="9"

rowspan="9"

rowspan="9"

pt

Point

pc

Pica

cm

Centimetre

mm

Millimetre

in

inch

em

em

ex

ex

%

Percentage

CSS3

deg

Degree

rowspan="16"

rowspan="16"

grad

Grad

rad

Radian

ms

Millisecond

s

Second

Hz

Hertz

kHz

Kilohertz

dpi

Dots per inch

dpcm

Dots per centimetre

turn

turn

gd

Cells in the layout-grid

rem

the font size of the root element

vw

the viewport's width

vh

the viewport's height

vm

the viewport's height or width, whichever is smaller of the two

ch

the width of the "0" (ZERO, U+0030) glyph found in the font for the font size used to render.

General value and unit notes

  1. transparent —

    CSS1 introduced the ‘transparent’ value for the background-color property. CSS2 allowed border-color to also accept the ‘transparent’ value. The Open eBook(tm) Publication Structure 1.0.1 [OEB101] extended the ‘color’ property to also accept the ‘transparent’ keyword. CSS3 extends the color value to include the ‘transparent’ keyword to allow its use with all properties that accept a value. This simplifies the definition of those properties in CSS3.

Trident value and unit notes

  1. rect() — Correct syntax with commas is not supported.
  2. auto — In IE5 bug emulation mode (quirks mode) does not work for margins, except table elements.
  3. transparent — In IE6, transparency is not supported on borders (shows as solid black) and is ignored on PNG images, this is fixed in IE 7.0. Using the transparent keyword in combination with the color property will render the text as black.

Gecko value and unit notes

  1. <ch> — Prior to version 1.9.1, uses the width of the "M" glyph instead of the width of the "0" glyph.12

Presto value and unit notes

  1. <number> — Quantization error for values greater than 20.47 13 (not limited to em, try any non pixel units). Seems to have been fixed in Opera 9.6.
  2. transparent — CSS2.1 only, keyword is ignored when used with the outline-color, color and text-shadow properties.

General notes

Gecko general notes

  1. -moz- — All experimental selectors, properties and values are prefixed with "-moz-", e.g. ::-moz-selection instead of ::selection 14.

WebKit general notes

  1. -webkit- — All experimental selectors, properties and values are prefixed with "-webkit-", e.g. -webkit-box-shadow instead of box-shadow.

KHTML general notes

  1. -khtml- — All experimental selectors, properties and values are prefixed with "-khtml-", e.g. -khtml-opacity instead of opacity.

Presto general notes

  1. -xv- — All new selectors, properties and values introduced by CSS3 Speech Module are prefixed with "-xv-" (but not found in CSS2 aural style sheets), e.g. -xv-voice-rate instead of voice-rate.
  • WebDevout — mostly covers Windows browsers. Extensive bug testing.
  • QuirksMode — comprehensive but lacks latest versions.

See Also

Comparison of layout engines (CSS)

The following tables compare CSS compatibility and support for a number of layout engines. Please...

CSSTidy

CSSTidy is an open source CSS parser and optimiser. Both a version written in C++ and PHP are...

Comparison of layout engines (Document Object Model)

The following tables compare DOM compatibility and support for a number of layout engines. Please...

Comparison of layout engines (HTML 5)

The following tables compare support of HTML 5 differences from HTML 4 for a number of layout...

Comparison of layout engines (SVG)

This article is a comparison of layout engine support for Scalable Vector Graphics. SVG version...