Comparison of layout engines (CSS)

From Wikipedia, the free encyclopedia

Jump to: navigation, search
CSS

Cascading Style Sheets
Comparison of layout engines (CSS)
CSS framework
CSS Zen Garden
CSSTidy
Tableless web design

 This box: view • talk • edit 

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.

Contents

[edit] Explanation of the tables

[edit] Engine nomenclature

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.

Layout Engine Used By
Trident Internet Explorer 4 to Internet Explorer 8
Tasman Internet Explorer 5 for Mac
Gecko All Mozilla software, including Firefox; Galeon; Flock; also Epiphany
WebKit Safari; iCab 4; Epiphany;
KHTML Konqueror
Presto Opera; Nintendo DS Browser; Internet Channel
iCab iCab 1-3
Prince XML Prince XML
Amaya Amaya

[edit] 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
Yes Indicates that the layout engine fully supports this property when valid values are used.
No Indicates that this property is completely ignored.
Partial Indicates that the property is understood, but that not all values are supported. Supported values are implemented correctly.
Incorrect Indicates that the property is understood, but that it is not implemented correctly in all cases.
Experimental Indicates that the property is provided in experimental form under an alternative name, generally with only partial functionality.

[edit] CSS version support

 This article or section is incomplete and may require expansion and/or cleanup.
Please improve the article, or discuss the issue on the talk page.

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 6.0 0 1.0 85 Yes 7.0 Yes 1.0
CSS2.1 Partial Partial Mostly Mostly Mostly Mostly Mostly Mostly
CSS3 No No Slight Slight Slight Partial Slight Partial

[edit] Grammar and rules

Trident Tasman Gecko WebKit KHTML Presto iCab Prince XML
CSS2 !important Weight increasing 7.0 0 1.0 85 Yes 7.0 Yes Yes
/*Comment*/ Comments 3.0 0 1.0 85 Yes 7.0 Yes Yes
@import Import stylesheet 4.0 0 1.0 Yes Yes 7.0 Yes 2.1
@charset Character set 5.5  ? 1.0 0 No 7.0 Yes Yes
@media Media-specific rules 5.5 0.9 1.0 Yes Yes 7.0 3.0 5.1
@page For paged media 5.5 No No [1] No No 7.0 No 6.0
CSS3 @namespace Namespace declaration No No 1.0 Yes Yes 8.0 No 5.0
@font-face Define font 5.5 No No [2] 525 No No No 6.0

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

[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, 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.

[edit] Selectors

Trident Tasman Gecko WebKit KHTML Presto iCab Prince XML
Element selectors
CSS2 * Universal 7.0 0 1.0 85 Yes 7.0 3.0 Yes
E Element 4.0 0 1.0 85 Yes 7.0 Yes Yes
E.class Class 7.0 Incorrect 1.0 85 Yes 7.0 Yes Yes
E#id ID 4.0 0 1.0 85 Yes 7.0 Yes Yes
CSS3 ns|E Namespaced No No 1.0 No Yes 8.0 No  ?
Relationship selectors
CSS2 E F Descendant 4.0 0 1.0 85 Yes 7.0 Yes Yes
E > F Child 7.0 0 1.0 85 Yes 7.0 3.0 Yes
E + F Direct adjacent 7.0 0 1.0 85 Yes 7.0 3.0 Yes
CSS3 E ~ F Indirect adjacent 7.0 0.9 1.7 412 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 Yes
E[attr="value"] Equals 7.0 0.9 1.0 Yes Yes 7.0 3.0 Yes
E[attr~="value"] Contains (space-separated) 7.0 0.9 1.0 Yes Yes 7.0 3.0 Yes
E[attr|="value"] Contains (hyphen-separated) 7.0 0.9 1.0 Yes Yes 7.0 3.0 Yes
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
CSS2 E:link Unvisited hyperlink 3.0 0 1.0 85 Yes 7.0 Yes 6.0
E:visited Visited hyperlink 3.0 0 1.0 85 Yes 7.0 Yes Yes
E:active Active Partial 0 1.0 85 Yes 7.0 Yes Yes
E:hover Mouseover 7.0 0.9 1.0 419.3 Yes 7.0 3.0 Yes
E:focus Focused 8.0 0 1.0 Yes Yes 7.0 Yes Yes
E:first-child First child 7.0 0 1.0 85 Yes 7.0 3.0 Yes
E:lang() Language 8.0 0 1.2 525 3.4 7.5 3.0 Yes
CSS3 E:root Root No 0.1 1.0 85 3.4 9.5a No  ?
E:first-of-type First child of type No 0.9 No 525 3.4 9.5a No  ?
E:last-child Last child No 0.9 1.0 Incorrect 3.4 9.5a No  ?
E:last-of-type Last child of type No 0.9 No Incorrect 3.4 9.5a No  ?
E:only-child Only child No 0.9 1.8 Incorrect 3.4 9.5a No  ?
E:only-of-type Only child of type No 0.9 No Incorrect 3.4 9.5a No  ?
E:nth-child Nth child No 0.9 No No 3.4 9.5a No  ?
E:nth-last-child Nth last child No 0.9 No No 3.4 9.5a No  ?
E:nth-of-type Nth child of type No 0.9 No No 3.4 9.5a No  ?
E:nth-last-of-type Nth last child of type No 0.9 No No 3.4 9.5a No  ?
E:target Target No 0.9 1.3 Partial 3.4 9.5a No  ?
E:empty Empty No 0.9 1.8 412 3.4 9.5a No  ?
E:not() Negation No 0.9 1.0 85 3.4 9.5a No  ?
E:enabled Enabled state No 0.9 1.8 525 3.4 9.0 No  ?
E:disabled Disabled state No 0.9 1.8 525 3.4 9.0 No  ?
E:checked Checked state No No 1.0 525 3.4 9.0 No  ?
E:indeterminate Indeterminate state No 0.9 No No No No No  ?
E:default Default No No 1.9 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 9.0 No  ?
E:read-only Read-only No No Experimental No No 9.0 No  ?
E:read-write Read and write No No Experimental No No 9.0 No  ?
Pseudo-elements
CSS2 E:first-letter First letter 5.5 0 1.0 85 Yes 7.0 3.0 5.0
E:first-line First line 5.5 0 1.0 85 Yes 7.0 3.0 Partial
E:before Before No No 1.0 85 Yes 7.0 3.0 Yes
E:after After No No 1.0 85 Yes 7.0 3.0 Yes
CSS3 E::before Double colon notation No No 1.5 85 3.4 7.0 Yes  ?
E::after Double colon notation No No 1.5 85 3.4 7.0 Yes  ?
E::first-letter Double colon notation No 0.9 1.5 85 3.4 7.0 Yes  ?
E::first-line Double colon notation No 0.9 1.5 85 3.4 7.0 Yes  ?
E::selection Selection No 0.9 Experimental 412 3.4 No No  ?
E::value Double colon notation No No No No No No No  ?
E::choices Double colon notation No No No No No No No  ?
E::repeat-item Double colon notation No No No No No No No  ?
E::repeat-index Double colon notation No No No No No No No  ?
  Trident Tasman Gecko WebKit KHTML Presto iCab Prince XML

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

[edit] Tasman selector notes

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

[edit] Gecko selector notes

  1. :*-of-type — See Bug 128585 on Bugzilla
  1. :nth-* — See Bug 75375 on Bugzilla

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

[edit] Properties

Trident Tasman Gecko WebKit KHTML Presto iCab Prince XML
Box model
CSS2 margin 4.0 0 1.0 85 Yes 7.0 3.0 Yes
padding 4.0 0 1.0 85 Yes 7.0 3.0 Yes
width 4.0 0 1.0 85 Yes 7.0 3.0 Yes
height 4.0 0 1.0 85 Yes 7.0 3.0 Yes
float 5.0 0 1.0 85 Yes 7.0 3.0 Yes
clear 5.0 0 1.0 85 Yes 7.0 Yes Yes
display Partial Partial Partial 85 Yes 7.0 Partial Yes
min-width 7.0 0.9 1.0 416 Yes 7.0 3.0 5.0
max-width 7.0 0.9 1.0 416 Yes 7.0 3.0 5.0
min-height 7.0 0.9 1.7 416 3.3.2 7.0 3.0 5.0
max-height 7.0 0.9 1.7 416 3.3.2 7.0 3.0 5.0
clip 5.5 0.9 1.0 85 5.0 7.0 3.0 5.0
overflow 7.0 0 1.0 85 3.2 7.0 3.0 5.0
visibility 4.0 0.9 1.8 525 Partial Partial Partial 5.0
CSS3 overflow-x 7.0 No 1.8 525 3.5.6 9.5a No 5.0
overflow-y 7.0 No 1.8 525 3.5.6 9.5a No 5.0
Borders
CSS2 border 4.0 0 1.0 85 Yes 7.0 3.0 3.0
border-color 4.0 0 1.0 85 Yes 7.0 3.0 3.0
border-style Partial 0 1.0 85 Yes 7.0 3.0 3.0
border-width 4.0 0 1.0 85 Yes 7.0 3.0 3.0
border-top 5.5 0 1.0 85 Yes 7.0 3.0 3.0
border-top-width 5.5 0 1.0 85 Yes 7.0 3.0 3.0
border-right 5.5 0 1.0 85 Yes 7.0 3.0 3.0
border-right-width 5.5 0 1.0 85 Yes 7.0 3.0 3.0
border-bottom 5.5 0 1.0 85 Yes 7.0 3.0 3.0
border-bottom-width 5.5 0 1.0 85 Yes 7.0 3.0 3.0
border-left 5.5 0 1.0 85 Yes 7.0 3.0 3.0
border-left-width 5.5 0 1.0 85 Yes 7.0 3.0 3.0
border-top-color 4.0 0 1.0 85 Yes 7.0 3.0 3.0
border-top-style 5.5 0 1.0 85 Yes 7.0 3.0 3.0
border-right-color 4.0 0 1.0 85 Yes 7.0 3.0 3.0
border-right-style 5.5 0 1.0 85 Yes 7.0 3.0 3.0
border-bottom-color 4.0 0 1.0 85 Yes 7.0 3.0 3.0
border-bottom-style 5.5 0 1.0 85 Yes 7.0 3.0 3.0
border-left-color 4.0 0 1.0 85 Yes 7.0 3.0 3.0
border-left-style 5.5 0 1.0 85 Yes 7.0 3.0 3.0
CSS3 border-radius No No Experimental Experimental Experimental No No 6.0
border-break No No No No No No No  ?
border-image No No No Experimental No No No  ?
box-shadow No No No Experimental No No No  ?
Line Layout
CSS2 line-height 4.0 0 1.0 85 Yes 7.0 Yes 5.0
vertical-align 5.5 0 1.0 85 Yes 7.0 3.0 6.0
Positioning
CSS2 position 7.0 0 1.0 85 Yes 7.0 3.0 5.0
top Partial Partial 1.0 85 Yes 7.0 3.0 6.0
right Partial Partial 1.0 85 Yes 7.0 3.0 6.0
bottom Partial Partial 1.0 85 Yes 7.0 3.0 6.0
left Partial Partial 1.0 85 Yes 7.0 3.0 6.0
z-index Partial Partial 1.0 85 Yes 7.0 3.0 6.0
Generated and Replaced Content
CSS2 quotes No 0.9 1.8 No 3.4 7.0 3.0 5.0
content 8.0 Partial 85 Yes 7.0 3.0 5.0
counter-increment 8.0 1.8 525 3.4 7.0 3.0 5.0
counter-reset 8.0 1.8 525 3.4 7.0 3.0 5.0
Lists
CSS2 list-style 4.0 0 1.0 85 Yes 7.0 3.0 6.0
list-style-image 4.0 0 1.0 85 Yes 7.0 3.0 6.0
list-style-position 4.0 0 1.0 85 Yes 7.0 3.0 6.0
list-style-type 8.0 0 1.0 85 3.4 8.0 3.0 6.0
Colors
CSS2 color 3.0 0 1.0 85 Yes 7.0 Yes 5.0
CSS3 color-profile No No No No No No No  ?
opacity No No 1.7 125 Experimental 9.0 No  ?
rendering-intent No No No No No No No  ?
Backgrounds
CSS2 background 4.0 0 1.0 85 Yes 7.0 Yes 6.0
background-attachment 7.0 0 1.0 85 Yes 7.0 Yes 5.0
background-color 4.0 0 1.0 85 Yes 7.0 3.0 3.1
background-image 4.0 0 1.0 85 Yes 7.0 Yes 6.0
background-position Partial 0 1.0 85 Yes 7.0 Yes 3.1
background-repeat 4.0 0 1.0 85 Yes 7.0 Yes 3.1
CSS3 background (multiple) No No No 312 3.5 No No  ?
background-clip No No Experimental Experimental Experimental No No  ?
background-origin No No Experimental Experimental Experimental No No  ?
background-break No No No No No No No  ?
background-size No No No Experimental Experimental 9.5 No  ?
Fonts
CSS2 font 4.0 0 1.0 85 Yes 7.0 Yes Yes
font-family 4.0 0 1.0 85 Yes 7.0 Yes Yes
font-size 3.0 0 1.0 85 Yes 7.0 Yes 3.1
font-style 4.0 0 1.0 85 Yes 7.0 Yes Yes
font-variant 4.0 0 1.0 125 Yes 7.0 3.0 Yes
font-weight Incorrect 0 Partial Partial Yes Incorrect Incorrect Yes
CSS3 font-size-adjust No No Partial No No No No  ?
font-stretch No No No No No No Incorrect  ?
font-effect No No No No No No No  ?
font-smooth No No No No No No No  ?
font-emphasize No No No No No No No  ?
Text
CSS2 text-align 4.0 0 1.0 85 Yes 7.0 Partial Yes
text-decoration 4.0 0 1.0 85 Yes 7.0 3.0 3.1
text-indent 3.0 0 1.0 85 Yes 7.0 Yes Yes
text-transform 4.0 0 1.0 85 Yes 7.0