Comparison of layout engines (CSS)

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__

Explanation of the tables

Engines

Rather than the names of web browsers, the names of the underlying engines are used. The browsers that use the various engines are listed below.

  • Trident – Internet Explorer. IE6 uses Trident IV; IE7 uses Trident V.
  • Tasman – Internet Explorer 5 for Apple Mac.
  • Gecko – Various open-source browsers (Firefox, Netscape 6+, Camino, Flock, SeaMonkey, K-Meleon)
  • WebCore – Apple Safari
  • KHTML – Konqueror. KHTML and WebCore are quite similar, and developments in one are often copied to the other.
  • Presto – Opera 7+
  • iCab – iCab

Values

Values indicate the level of support in the most recent version of the layout engine, or (if a version number is given) in the specified version. Version numbers without any other value indicate the version at which the layout engine first fully supported the feature.

Value

Meaning

Indicates that the layout engine fully supports this property when valid values are used.

Indicates that this property is completely ignored.

Indicates that the property is understood, but that not all values are supported. Supported values are implemented correctly.

Indicates that the property is understood, but that it is not implemented correctly in all cases.

Indicates that the property is provided in experimental form under an alternative name, generally with only partial functionality.

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

WebCore

KHTML

Presto

iCab

CSS1

CSS2.1

CSS3

Grammar and rules

Trident

Tasman

Gecko

WebCore

KHTML

CSS2

!important

Weight increasing

/*Comment*/

Comments

@import

Import stylesheet

@charset

Character set

?

@media

Media-specific rules

@page

For paged media

CSS3

@namespace

Namespace declaration

@font-face

Define font

Trident grammar and rule notes

  1. @font-face — Only supports Embedded OpenType (.eot) font format, does not understand the format() identifier.
  2. !important — !important doesn't override rules defined later in the same declaration block prior to IE7.

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, WebCore 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

WebCore

KHTML

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

E::value

Double colon notation

E::choices

Double colon notation

E::repeat-item

Double colon notation

E::repeat-index

Double colon notation

 

Trident

Tasman

Gecko

WebCore

KHTML

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 1. 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.

Tasman selector notes

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

WebCore selector notes

  1. :lang() — Only detected when explicitly present on element being tested, attribute not inherited.
  2. :target — Style doesn't get applied when navigating using back and forward buttons.
  3. :last-child & :last-of-type — will match all siblings, or all siblings of the same type, respectively.
  4. :only-child & :only-of-type — identical behaviour to :first-child & :first-of-type.
  5. ::pseudo-element — Mistakenly also triggers on ::pseudo-class prior to version 416.0.

Properties

Trident

Tasman

Gecko

WebCore

KHTML

Presto

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

rowspan="4"

content

counter-increment

counter-reset

Lists

CSS2

list-style

list-style-image

list-style-position

list-style-type

Colors

| CSS2

color

CSS3

color-profile

opacity

rendering-intent

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"

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="11"

rowspan="11"

rowspan="11"

rowspan="11"

height

device-width

device-height

device-aspect-ratio

color

color-index

monochrome

resolution

scan

grid

Ruby characters

CSS3

ruby-position

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"

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 — 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. background-attachment — Prior to IE 7, fixed was allowed on the body element only.
  6. background-position — Fixed positioning is not supported.
  7. font-weight — Incorrect rendering when value is 600 2.
  8. text-decoration — Optional property blink is not supported.
  9. 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.
  10. list-style-type — decimal-leading-zero, lower-greek, lower-latin, upper-latin, upper-roman are not supported.

Gecko property notes

  1. display — run-in 3 is not supported. inline-table 4 and inline-block 5 are supported in Gecko 1.9a2+.
  2. quotes — Does not support nested quotes prior to 1.8 6.
  3. content — Only works with :before and :after. Only support image . does not work prior to 1.8 7.
  4. background-position — Gecko versions prior to 1.7 implement the CSS2 syntax, not the proposed CSS2.1 expanded syntax.
  5. font-size-adjust — Supported in Windows only8. This problem will be fixed in the future Gecko 1.9.
  6. font-weight — Only Regular and Bold weights get used, even if Light or Heavy/Black faces are installed.
  7. white-space — pre-line is not supported. pre-wrap is only supported experimentally as -moz-pre-wrap;.
  8. visibility — collapse is not supported prior to 1.8.
  9. border-radius — border curves are circular, but the W3C specs 9 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: 10 11 12
  10. page-break-before; page-break-after — Only the always and auto values are supported.

WebCore property notes

  1. box-shadow — The system font keywords are not supported that allow designers to tailor presentation to the user’s operating system environment.
  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.

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 supported except for collapse.

Presto property notes

  1. list-style-type — The CSS2 values are not supported prior to 8.0.
  2. counter-increment, counter-reset — Implemented the algorithm in REC CSS2.
  3. background-position — Presto versions prior to 8.0 implement the CSS2 syntax, not the proposed CSS2.1 expanded syntax.
  4. font-weight — Incorrect rendering when value is 600 13.
  5. white-space — pre-line is not supported prior to Opera 9.5.
  6. visibility — collapse is unsupported until 9.5, in which collapse is only unsupported in table columns.

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

WebCore

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

color names

| 16 predefined web colors

#rrggbb or #rgb

Hexadecimal notation

rgb(r,g,b)

RGB notation

system colors

28 predefined system colors 14

transparent

Full transparency

CSS3

rgba(r,g,b,a)

RGBA notation

hsl(h,s,l)

HSL notation

hsla(h,s,l,a)

HSLA notation

Keywords

CSS2

auto

Automatically calculated

inherit

Inherited from the parents

?

CSS3

initial

Units

CSS2

px

Pixel

pt

Point

pc

Pica

cm

Centimetre

mm

Millimetre

in

inch

em

em

ex

ex

%

Percentage

CSS3

deg

Degree

rowspan="14"

rowspan="14"

rowspan="14"

grad

Grad

rad

Radian

ms

Millisecond

s

Second

Hz

Hertz

kHz

Kilohertz

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.

Trident value and unit notes

  1. auto — In IE5 bug emulation mode (quirks mode) does not work for margins, except table elements.
  2. transparent — In IE6, transparency is not supported on borders (shows as solid black) and is ignored on PNG images. Thus, version 7.0 is the first version that supports transparency in its entirety.

WebCore value and unit notes

  1. <percentage> — Only uses the integer component of <number>.

Presto value and unit notes

  1. attr() — As all URI attribute values are resolved to full URI, the value could be wrong if attr() is used on an attribute that contains relative URI.
  2. <number> — Quantization error for values greater than 20.47 15 (not limited to em, try any non pixel units).

KHTML value and unit notes

  1. rgba() — Because opacity is not supported, the opacity value of rgba() is ignored.

General notes

Gecko general notes

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

WebCore 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.
  • Westciv — abridged form of their retail guide.
  • MacEdition — covers many Mac browsers, including rare and discontinued ones.
  • Jesset — simple table without bug details, includes WebTV.
  • Motohiko — covers Firefox only. [Japanese]


See Also

Comparison of layout engines (HTML)

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