Comparison of layout engines (CSS)

From Wikipedia, the free encyclopedia

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.

Version number, if possible, is provided for a feature that is fully supported (based on CSS2.1, unless it is a CSS3 feature). Proprietary extensions are not included. Notice that some CSS2 features were removed in CSS 2.1 because they proved too hard to implement. In the tables below they still figure under CSS2 unless they have resurfaced in a CSS3 module.

Contents

[edit] Engine Nomenclature

Trident is the layout engine used in Internet Explorer for Windows. Tasman is used in Internet Explorer for Macintosh, Gecko in all Mozilla software, WebCore provides the HTML layout engine for Mac OS X, KHTML for KDE, Presto for Opera and iCab is a browser for the Mac.

[edit] General overview

Trident Tasman Gecko WebCore KHTML Presto iCab
CSS1 6.0 0 1.0 85 Yes 7.0 Yes
CSS2 (2.1) Minor Minor Major Major Major Major Major
CSS3 No No Minor Minor Minor Minor Minor

[edit] Grammar and rules

Trident Tasman Gecko WebCore KHTML Presto iCab
CSS1 !important Weight increasing 4.0 0 1.0 85 Yes 7.0 Yes
/*Comment*/ Comments 3.0 Yes 1.0 85 Yes 7.0 Yes
@import Import stylesheet 4.0 Yes 1.0 Yes Yes 7.0 Yes
CSS2 @charset Character set 5.5  ? 1.0 No No 7.0 Yes
@media Media-specific rules 5.5 0.9 1.0 Yes Yes 7.0 3.0
@page For paged media 5.5 No No No No 7.0 No
@font-face Define font 5.5 No No No No No No
CSS3 @namespace Namespace declaration No No 1.0 Yes Yes 8.0 No

[edit] CSS 2.1 notes

  1. @font-face removed in CSS 2.1

[edit] 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 in the same declaration block.

[edit] 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.

[edit] 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. 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.

[edit] Selectors

Trident Tasman Gecko WebCore KHTML Presto iCab
Element selectors
CSS1 * Universal 7.0 Yes 1.0 85 Yes 7.0 3.0
E Element 4.0 Yes 1.0 85 Yes 7.0 Yes
E.class Class 7.0 Yes 1.0 85 Yes 7.0 Yes
E#id ID 4.0 Yes 1.0 85 Yes 7.0 Yes
CSS2 ns|E Namespaced No No 1.0 No Yes 8.0 No
Relationship selectors
CSS1 E F Descendant 4.0 Yes 1.0 85 Yes 7.0 Yes
CSS2 E > F Child 7.0 Yes 1.0 Yes Yes 7.0 3.0
E + F Direct adjacent 7.0 Yes 1.0 Yes Yes 7.0 3.0
CSS3 E ~ F Indirect adjacent No No 1.7 2005-06-10 3.3.2 9.0 3.0
Attribute selectors
CSS2 E[attr] Has 7.0 0.9 1.0 85 Yes 7.0 3.0
E[attr="value"] Equals 7.0 0.9 1.0 Yes Yes 7.0 3.0
E[attr~="value"] Contains (space-separated) 7.0 0.9 1.0 Yes Yes 7.0 3.0
E[attr|="value"] Contains (hyphen-separated) 7.0 0.9 1.0 Yes Yes 7.0 3.0
CSS3 E[attr^="value"] Begins with 7.0 No 1.0 Yes 3.4 8.02 3.0
E[attr$="value"] Ends with 7.0 No 1.0 Yes 3.4 9.0 3.0
E[attr*="value"] Contains substring 7.0 No 1.0 Yes 3.4 9.0 3.0
E[ns|attr] Namespaced No No 1.0 No 3.4 9.0 No
Pseudo-classes
CSS1 E:link Unvisited hyperlink 3.0 0 1.0 85 Yes 7.0 Yes
E:visited Visited hyperlink 3.0 Yes 1.0 85 Yes 7.0 Yes
E:active Active 4.0 Yes 1.0 85 Yes 7.0 Yes
CSS2 E:hover Mouseover 7.0 Partial 1.0 85 Yes 7.0 3.0
E:focus Focused No Yes 1.0 Yes Yes 7.0 Yes
E:first-child First child 7.0 Yes 1.0 Yes Yes 7.0 3.0
E:lang() Language No Yes 1.2 2006-06-16 3.4 7.5 3.0
@page:first First page No No No No No No No
@page:left Left page No No No No No No No
@page:right Right page No No No No No No No
CSS3 E:root Root No 0 1.0 Yes 3.4 No No
E:last-child Last child No No 1.0 No 3.4 No No
E:first-of-type First child of type No No No 2005-10-23 3.4 No No
E:last-of-type Last child of type No No No No 3.4 No No
E:only-child Only child No No 1.8 No 3.4 No No
E:only-of-type Only child of type No No No No 3.4 No No
E:nth-child Nth child No No No No 3.4 No No
E:nth-last-child Nth last child No No No No 3.4 No No
E:nth-of-type Nth child of type No No No No 3.4 No No
E:nth-last-of-type Nth last child of type No No No No 3.4 No No
E:target Target No No 1.3 Partial 3.4 No No
E:empty Empty No No 1.8 Yes 3.4 No No
E:contains() Contains No No No No 3.4 No No
E:not() Negation No No 1.0 Yes 3.4 No No
E:enabled Enabled state No Yes 1.8 No 3.4 9.0 No
E:disabled Disabled state No Yes 1.8 No 3.4 9.0 No
E:checked Checked state No No 1.0 No No 9.0 No
E:indeterminate Indeterminate state No No No No No No No
E:default Default No No No No No 9.0 No
E:valid Valid No No 1.8 No No 9.0 No
E:invalid Invalid No No 1.8 No No 9.0 No
E:in-range In range No No 1.8 No No 9.0 No
E:out-of-range Out of range No No 1.8 No No 9.0 No
E:required Required No No No No No 9.0 No
E:optional Optional No No No No No No No
E:read-only Read-only No No Experimental No No No No
E:read-write Read and write No No Experimental No No No No
Pseudo-elements
CSS1 E:first-letter First letter 5.5 0 1.0 Yes Yes 7.0 3.0
E:first-line First line 5.5 Yes 1.0 Yes Yes 7.0 3.0
CSS2 E:before Before No No 1.0 85 Yes 7.0 3.0
E:after After No No 1.0 85 Yes 7.0 3.0
CSS3 E::pseudo-element Double colon notation No No 1.5 Yes 3.4 7.0 Yes
E::selection Selection No No Experimental Yes 3.4 No No
  Trident Tasman Gecko WebCore KHTML Presto iCab

[edit] Trident selector notes

  1. :hover:hover is applied for all elements only in standards-compliant mode, not quirks mode [1]. Prior to 7.0 Beta 2 Preview, :hover is for anchor element only.
  2. .one.two — only .two class selector was taken into consideration before 7.0.
  3. * — Prior to 7.0 this was treated as a single or no element.

[edit] Tasman selector notes

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

[edit] WebCore selector notes

  1. :hover — Fails to trigger when over empty table cells. Fails to trigger when :link:hover or :visited:hover are used. (CSS2, :hover is not longer mutually exclusive with :link and :visited.)
  2. :target — Only detected when explicitly present on element being tested, attribute not inherited.
  3. :target — Style doesn't get applied when navigating using back and forward buttons.
  4. :last-child & :last-of-type — will match all siblings, or all siblings of the same type, respectivly.
  5. :only-child & :only-of-type — identical behaviour to :first-child & :first-of-type.
  6. ::pseudo-element — Mistakenly also triggers on ::pseudo-class prior to version 416.0.

[edit] Properties

Trident Tasman Gecko WebCore KHTML Presto iCab
Box model
CSS1 border 4.0 Yes 1.0 85 Yes 7.0 3.0
border-color 4.0 Yes 1.0 85 Yes 7.0 3.0
border-style 7.0 Yes 1.0 85 Yes 7.0 3.0
border-width 4.0 Yes 1.0 85 Yes 7.0 3.0
border-top 5.5 Yes 1.0 85 Yes 7.0 3.0
border-top-width 5.5 Yes 1.0 85 Yes 7.0 3.0
border-right 5.5 Yes 1.0 85 Yes 7.0 3.0
border-right-width 5.5 Yes 1.0 85 Yes 7.0 3.0
border-bottom 5.5 Yes 1.0 85 Yes 7.0 3.0
border-bottom-width 5.5 Yes 1.0 85 Yes 7.0 3.0
border-left 5.5 Yes 1.0 85 Yes 7.0 3.0
border-left-width 5.5 Yes 1.0 85 Yes 7.0 3.0
margin 4.0 Yes 1.0 85 Yes 7.0 3.0
margin-top 4.0 Yes 1.0 85 Yes 7.0 3.0
margin-right 4.0 Yes 1.0 85 Yes 7.0 3.0
margin-bottom 4.0 Yes 1.0 85 Yes 7.0 3.0
margin-left 4.0 Yes 1.0 85 Yes 7.0 3.0
padding 4.0 Yes 1.0 85 Yes 7.0 3.0
padding-top 4.0 Yes 1.0 85 Yes 7.0 3.0
padding-right 4.0 Yes 1.0 85 Yes 7.0 3.0
padding-bottom 4.0 Yes 1.0 85 Yes 7.0 3.0
padding-left 4.0 Yes 1.0 85 Yes 7.0 3.0
CSS2 border-top-color 4.0 Yes 1.0 85 Yes 7.0 3.0
border-top-style 5.5 Yes 1.0 85 Yes 7.0 3.0
border-right-color 4.0 Yes 1.0 85 Yes 7.0 3.0
border-right-style 5.5 Yes 1.0 85 Yes 7.0 3.0
border-bottom-color 4.0 Yes 1.0 85 Yes 7.0 3.0
border-bottom-style 5.5 Yes 1.0 85 Yes 7.0 3.0
border-left-color 4.0 Yes 1.0 85 Yes 7.0 3.0
border-left-style 5.5 Yes 1.0 85 Yes 7.0 3.0
CSS3 border-radius No No Experimental 420+ No No No
box-sizing No No Experimental 420+ 3.3.2 7.0 No
Visual formatting model
CSS1 width 4.0 Yes 1.0 85 Yes 7.0 3.0
height 4.0 Yes 1.0 85 Yes 7.0 3.0
float 5.0 Yes 1.0 85 Yes 7.0 3.0
clear 5.0 0.9 1.0 85 Yes 7.0 Yes
line-height 4.0 Yes 1.0 85 Yes 7.0 Yes
vertical-align 5.0 Yes 1.0 85 Yes 7.0 3.0
CSS2 min-width 7.0 0.9 1.0 416 Yes 7.0 3.0
max-width 7.0 0.9 1.0 416 Yes 7.0 3.0
min-height 7.0 0.9 1.7 146 3.3.2 7.0 3.0
max-height 7.0 0.9 1.7 146 3.3.2 7.0 3.0
display Partial Partial Partial 85 Yes 7.0 Partial
position 7.0 Yes 1.0 85 Yes 7.0 3.0
top Partial Partial 1.0 85 Yes 7.0 3.0
right Partial Partial 1.0 85 Yes 7.0 3.0
bottom Partial Partial 1.0 85 Yes 7.0 3.0
left Partial Partial 1.0 85 Yes 7.0 3.0
z-index Partial Partial 1.0 85 Yes 7.0 3.0
direction 5.0 Yes 1.0 85 Yes 7.2 No
unicode-bidi 5.0 Yes 1.0 No Yes 7.2 No
Generated content, automatic numbering, and lists
CSS1 list-style 4.0 Yes 1.0 85 Yes 7.0 3.0
list-style-image 4.0 Yes 1.0 85 Yes 7.0 3.0
list-style-position 4.0 Yes 1.0 85 Yes 7.0 3.0
list-style-type 4.0 Yes 1.0 85 3.4 8.0 3.0
CSS2 quotes No 0.9 1.8 No 3.4 7.0 3.0
content No No Partial 85 Yes 7.0 3.0
counter-increment No No 1.8 No 3.4 7.0 3.0
counter-reset No No 1.8 No 3.4 7.0 3.0
Colors and backgrounds
CSS1 color 3.0 Yes 1.0 85 Yes 7.0 Yes
background 4.0 Yes 1.0 85 Yes 7.0 Yes
background-attachment 7.0 Yes 1.0 85 Yes 7.0 Yes
background-color 4.0 Yes 1.0 85 Yes 7.0 3.0
background-image 4.0 Yes 1.0 85 Yes 7.0 Yes
background-position Partial Yes Partial 85 Yes Partial Yes
background-repeat 4.0 Yes 1.0 85 Yes 7.0 Yes
CSS3 background (multiple) No No No Yes 3.5 No No
background-clip No No Experimental No Experimental No No
background-origin No No Experimental No Experimental No No
Fonts
CSS1 font 4.0 Yes 1.0 85 Yes 7.0 Yes
font-family 4.0 Yes 1.0 85 Yes 7.0 Yes
font-size 3.0 Yes 1.0 85 Yes 7.0 Yes
font-style 4.0 Yes 1.0 85 Yes 7.0 Yes
font-variant 4.0 Yes 1.0 125 Yes 7.0 3.0
font-weight Incorrect Yes 1.0 85 Yes Incorrect Yes
CSS2 font-size-adjust No No Partial No No No No
font-stretch No No No No No No Partial
Text
CSS1 text-align 4.0 Yes 1.0 85 Yes 7.0 Partial
text-decoration Partial Partial 1.0 85 Yes 7.0 3.0
text-indent 3.0 Yes 1.0 85 Yes 7.0 Yes
text-transform 4.0 Yes 1.0 85 Yes 7.0 Yes
letter-spacing 4.0 Yes 1.0 85 Yes 7.0 Yes
word-spacing Partial Partial 1.0 85 Yes 7.0 Yes
white-space Partial Partial Partial 85 Yes Partial Yes
CSS2 text-shadow No No No Partial 3.4 No No
Visual effects
CSS2 clip 5.5 0.9 1.0 85 Yes 7.0 3.0
overflow 5.5 Yes 1.0 85 Partial 7.0 3.0
visibility 4.0 0.9 1.8 Partial Partial Partial Partial
CSS3 overflow-x 6.0 No 1.8 No No No No
overflow-y 6.0 No 1.8 No No No No
opacity No No 1.7 Yes No 9.0 No
Tables
CSS2 border-collapse Partial 0.9 1.0 125 Yes 7.0 3.0
border-spacing No 0.9 1.0 125 Yes 7.0 3.0
caption-side No 0.9 1.4 85 Yes 7.0 Partial
empty-cells Partial 0.9 1.0 125 Yes 7.0 Incorrect
speak-header No No No No No No No
table-layout 5.0 Yes 1.0 85 Yes 7.0 3.0
User interface
CSS2 cursor 5.5 Yes 1.8 Partial Yes 7.0 3.0
outline No Yes 1.8 125 Yes 7.0 3.0
outline-color No Yes 1.8 125 Yes 7.0 3.0
outline-style No Yes 1.8 125 Yes 7.0 3.0
outline-width No Yes 1.8 125 Yes 7.0 3.0
CSS3 outline-offset No No 1.8 Yes No No No
outline-radius No No Experimental No No No No
Paged media
CSS2 marks No No No No No 7.0 No
orphans No No No No 3.5 7.0 No
page No No No No No No No
page-break-after 4.0 No 1.0 Partial 3.5 7.0 No
page-break-before 4.0 No 1.0 Partial 3.5 7.0 No
page-break-inside No No 1.0 No 3.5 7.0 No
size No No No No No 7.0 No
widows No No No No 3.5 7.0 No
Aural
CSS2 azimuth No No No No No No No
cue 7.5
cue-after 7.5
cue-before 7.5
elevation No
pause 7.5
pause-after 7.5
pause-before 7.5
pitch No
pitch-range No
play-during No
speak No
speak-numeral No
speak-punctuation No
speech-rate No
stress No
richness No
voice-family 7.5
volume No
CSS3 -xv-voice-pitch No No No No No 7.5 No
-xv-voice-pitch-range 7.5
-xv-voice-rate 7.5
-xv-voice-volume 7.5
Ruby characters
CSS3 ruby-position 5.0 Yes No No No No No
ruby-align 5.0 Yes
ruby-overhang 5.0 Yes
ruby-span No No

[edit] CSS 2.1 notes

  1. font-stretch was removed from CSS 2.1
  2. font-size-adjust was removed from CSS 2.1
  3. text-shadow was removed from CSS 2.1, but reintroduced in CSS 3 Text, then shelved again (until it has an evaluation[2]).
  4. size was removed from CSS 2.1

[edit] Trident property notes

  1. border-styledotted is rendered as dashed prior to IE7.
  2. display — Only none, block, inline, table-header-group, and table-footer-group are supported.
  3. position — Prior to 7.0 Beta 2, fixed positioning is not supported.
  4. background-attachment — Prior to 7.0 Beta 2, fixed is for body element only.
  5. background-position — Fixed positioning is not supported.
  6. font-weight — Incorrect rendering when font-weight is 600 [3].
  7. text-decoration — Optional property blink is not supported.
  8. white-spacepre-line and pre-wrap are not supported. pre is supported in Microsoft Internet Explorer 6 and later in standards-compliant mode.

[edit] Gecko property notes

  1. displayrun-in [4], inline-table [5], and inline-block [6] are not supported.
  2. quotes — Does not support nested quotes prior to 1.8 [7].
  3. content — Only works with :before and :after. Only support image <uri>. <counter> does not work prior to 1.8 [8].
  4. background-position — Problem handling a combination of keyword value and pixel or percentage value. [9]
  5. font-size-adjust — Supported in Windows only [10].
  6. white-spacepre-line is not supported. pre-wrap is only supported experimentally as -moz-pre-wrap;.
  7. visibilitycollapse is not supported prior to 1.8.
  8. border-radius — border curves are circular, but the W3C specs [11] 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: [12] [13] [14]

[edit] WebCore property notes

  1. cursor — Custom cursors are not supported.
  2. font — The system font shorthands are not supported.
  3. font-variant — All supported from version 85 except small-caps, which was added in version 125.
  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-spacepre-line and pre-wrap are not supported.
  7. text-shadow — Multiple shadows are not supported.
  8. visibility — All supported except for collapse.

[edit] KHTML property notes

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

[edit] 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 — Problem handling a combination of keyword value and pixel or percentage value. [15]
  4. font-weight — Incorrect rendering when font-weight is 600 [16].
  5. white-spacepre-line is not supported.
  6. visibility — All supported except for collapse.

[edit] iCab property notes

  1. displayrun-in is not supported.
  2. text-alignjustify is not supported.
  3. visibilitycollapse only partial.
  4. caption-sidetop and bottom only.
  5. empty-cells — Compresses hidden rows but does not hide them completely.

[edit] CSS2 aural style sheets notes

  1. The aural style sheets introduced in CSS2 are deprecated in CSS2.1 [17]. The only know software that supports CSS2 Aural is EMACSpeak [18], an emacs-based speech browser. The popular screen-reader JAWS does not respect Aural CSS instructions. The CSS3 Speech module reuses some, but not all, of the properties.

[edit] Values and units

Trident Tasman Gecko WebCore KHTML Presto iCab
Numbers CSS1 <number> A floating-point number 3.0 0 1.0 85 Yes Incorrect Yes
<length> <number> followed by units 3.0 Yes 1.0 85 Yes 7.0 Yes
<percentage> <number> followed by % 3.0 Yes 1.0 85 Yes 7.0 Yes
CSS2 <integer> An integer 3.0 0 1.0 85 Yes 7.0 Yes
CSS3 <angle> <number> followed by angle unit No No No No No No No
<time> <number> followed by time unit
<frequency> <number> followed by frequency unit
Strings CSS1 <string> String 3.0 0 1.0 85 Yes 7.0 Yes
\code Unicode escapes 6.0  ? 1.0 85 Yes 7.0 Yes
Shapes CSS2 rect() A rectangle 5.5 0 1.0 85 Yes  ? Yes
Functions CSS1 url() Uniform Resource Identifier 3.0  ? 1.0 85 Yes 7.0 Yes
CSS3 attr() Attribute identifier 1.0 No No Yes Yes 7.0 Yes
Colors CSS1 color names 16 predefined web colors 3.0 0 1.0 85 Yes 7.0 Yes
#rrggbb or #rgb Hexadecimal notation 3.0 Yes 1.0 85 Yes 7.0 Yes
rgb(r,g,b) RGB notation 3.0 Yes 1.0 85 Yes 7.0 Yes
CSS2 system colors 28 predefined system colors [19] 3.0 0 1.0 85 Yes 7.0 Yes
transparent Full transparency No  ? 1.0 85 Yes 7.0 Yes
CSS3 rgba(r,g,b,a) RGBA notation No No No Yes Partial No No
Keywords CSS1 auto Automatically calculated Partial  ? 1.0 85 Yes 7.0 Yes
CSS2 inherit Inherited from the parents No  ? 1.0 85 Yes 7.0 Yes
Units CSS1 px Pixel 3.0 0 1.0 85 Yes 7.0 Yes
pt Point 3.0 Yes 1.0 85 Yes 7.0 Yes
pc Pica 3.0 Yes 1.0 85 Yes 7.0 Yes
cm Centimetre 3.0 Yes 1.0 85 Yes 7.0 Yes
mm Millimetre 3.0 Yes 1.0 85 Yes 7.0 Yes
in inch 3.0 Yes 1.0 85 Yes 7.0 Yes
em em 3.0 Yes 1.0 85 Yes 7.0 Yes
ex ex 3.0 7.0 Yes 1.0 85 7.0 Yes
% Percentage 3.0 Yes 1.0 85 Yes 7.0 Yes
CSS3 deg Degree No No No No No No No
grad Gradient
rad Radian
ms Millisecond
s Second
Hz Hertz
kHz Kilohertz

[edit] Trident value and unit notes

  1. auto — Does not work for margins, except table elements.

[edit] 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 [20] (not limited to em, try any non pixel units).

[edit] KHTML value and unit notes

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

[edit] General notes

[edit] Gecko general notes

  1. -moz- — All experimental (and proprietary) selectors, properties and values are prefixed with "-moz-", e.g. ::-moz-selection instead of ::selection [21].

[edit] WebCore general notes

  1. -webkit- — All proprietary selectors, properties and values are prefixed with "-webkit-", e.g. -webkit-focus-ring-color.

[edit] KHTML general notes

  1. -khtml- — All experimental (and proprietary) selectors, properties and values are prefixed with "-khtml-", e.g. -khtml-arabic-indic.

[edit] Presto general notes

  1. -o- — All proprietary selectors, properties and values are prefixed with "-o-", e.g. -o-replace.
  2. -wap- — All proprietary selectors, properties and values for Wireless CSS are prefixed with "-wap-", e.g. -wap-accesskey.
  3. -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-interpret-as instead of interpret-as.

[edit] References

[edit] See also

[edit] External links