Comparison of layout engines (Cascading Style Sheets)

From Wikipedia, the free encyclopedia

Jump to: navigation, search
Cascading Style Sheets

CSS Animations
Comparison of layout engines (Cascading Style Sheets)
Comparison of stylesheet languages
CSS framework
CSS Zen Garden
CSSTidy
Style sheet
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 and other Internet Explorer shells
Tasman Internet Explorer for Mac; MSN for Mac OS X
Gecko All Mozilla software, including Firefox; SeaMonkey; Galeon; Camino; K-Meleon; Flock; also Epiphany-gecko
WebKit Safari; Google Chrome; Shiira; iCab 4; experimentally Epiphany; Adobe Air; Midori; OmniWeb; Adobe Dreamweaver CS4
KHTML Konqueror
Presto Opera; Opera Mobile, Nintendo DS Browser; Internet Channel; future Adobe Systems products
iCab iCab 1-3

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

[edit] CSS version support

 This article is incomplete and may require expansion or cleanup. Please help to 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 Yes 0 1.0 85 Yes 7.0 Yes 1.0
CSS2.1 Mostly Partial Mostly Mostly Mostly Mostly Mostly Mostly
CSS3 Slight Slight Slight Slight Slight Slight Slight Slight

[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 4.2.3 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 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 1.9.1 525 4.3 10.0 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 Yes 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 Yes
Attribute selectors
CSS2 E[attr] Has Partial 0.9 1.0 85 Yes 7.0 3.0 Yes
E[attr="value"] Equals Partial 0.9 1.0 Yes Yes 7.0 3.0 Yes
E[attr~="value"] Contains (space-separated) Partial 0.9 1.0 Yes Yes 7.0 3.0 Yes
E[attr|="value"] Contains (hyphen-separated) Partial 0.9 1.0 Yes Yes 7.0 3.0 Yes
CSS3 E[attr^="value"] Begins with Partial No 1.0 Yes 3.4 8.02 3.0 Yes
E[attr$="value"] Ends with Partial No 1.0 Yes 3.4 9.0 3.0 Yes
E[attr*="value"] Contains substring Partial No 1.0 Yes 3.4 9.0 3.0 Yes
E[ns|attr] Namespaced No No 1.0 Yes 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 8.0 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.5 No Yes
E:first-of-type First child of type No 0.9 1.9.1 525 3.4 9.5 No Yes
E:last-child Last child No 0.9 1.0 525 3.4 9.5 No Yes
E:last-of-type Last child of type No 0.9 1.9.1 525 3.4 9.5 No Yes
E:only-child Only child No 0.9 1.8 525 3.4 9.5 No Yes
E:only-of-type Only child of type No 0.9 1.9.1 525 3.4 9.5 No Yes
E:nth-child Nth child No 0.9 1.9.1 525 3.4 9.5 No Yes
E:nth-last-child Nth last child No 0.9 1.9.1 525 3.4 9.5 No Yes
E:nth-of-type Nth child of type No 0.9 1.9.1 525 3.4 9.5 No Yes
E:nth-last-of-type Nth last child of type No 0.9 1.9.1 525 3.4 9.5 No Yes
E:target Target No 0.9 1.3 525 3.4 Partial No No
E:empty Empty No 0.9 1.8 412 3.4 9.5 No Yes
E:not() Negation No 0.9 1.0 85 3.4 9.5 No Yes
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 1.9.2 No No No No  ?
E:default Default No No 1.9 No 4.3 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 4.3 9.0 No  ?
E:read-write Read and write No No Experimental No 4.3 9.0 No  ?
Pseudo-elements
CSS2 E:first-letter First letter Partial 0 1.0 85 Yes 7.0 3.0 5.0
E:first-line First line Partial 0 1.0 Incorrect Yes 7.0 3.0 No
E:before Before 8.0 No 1.9.1 85 Yes 7.0 3.0 Yes
E:after After 8.0 No 1.9.1 85 Yes 7.0 3.0 Yes
CSS3 E::before Double colon notation No No 1.9.1 85 3.4 7.0 Yes Yes
E::after Double colon notation No No 1.9.1 85 3.4 7.0 Yes Yes
E::first-letter Double colon notation No 0.9 1.5 85 3.4 7.0 Yes Yes
E::first-line Double colon notation No 0.9 1.5 Incorrect 3.4 7.0 Yes No
E::selection Selection No 0.9 Experimental 412 3.4 9.5 No No
  Trident Tasman Gecko WebKit KHTML Presto iCab Prince XML

[edit] Trident selector notes

  1. :active — :active is for anchor element only prior to 8.0.
  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.
  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.

[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. (:):before, (:):after — CSS2.0 behavior : some properties are unimplemented prior to 1.9.1. See Bug 237119 on Bugzilla.

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

[edit] Presto selector notes

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

[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 8.0 0.9 1.8 Partial Partial Partial Partial 5.0
CSS3 overflow-x 7.0 No 1.8 525 3.5.6 9.5 No 5.0
overflow-y 7.0 No 1.8 525 3.5.6 9.5 No 5.0
Borders
CSS2 border 4.0 0 1.0 85 Yes 7.0 3.0 3.0
border-color 7.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 Experimental Experimental No No No No
box-shadow No No Experimental Experimental No No No No
column reminder Trident Tasman Gecko WebKit KHTML Presto iCab Prince XML
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.9 85 Yes 7.0 3.0 6.0
Generated and Replaced Content
CSS2 quotes Yes 0.9 1.8 No 3.4 7.0 3.0 5.0
content 8.0 No 1.9 85 Yes 7.0 3.0 5.0
counter-increment 8.0 No 1.8 525 3.4 7.0 3.0 5.0
counter-reset 8.0 No 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 opacity No No 1.7 125 4.0 9.0 No No
column reminder Trident Tasman Gecko WebKit KHTML Presto iCab Prince XML
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 1.9.2 312 3.5 No No No
background-clip No No Experimental Experimental Experimental No No No
background-origin No No Experimental Experimental Experimental No No No
background-break No No No No No No No No
background-size No No No Experimental Experimental Experimental No 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 1.9 No No No No No
font-stretch No No No No No No Incorrect No
font-effect No No No No No No No No
font-smooth No No No No No No No No
font-emphasize No No No No No No No No
column reminder Trident Tasman Gecko WebKit KHTML Presto iCab Prince XML
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 Yes 6.0
letter-spacing 4.0 0 1.0 85 Yes 7.0 Yes 5.
word-spacing Partial Partial 1.0 85 Yes 7.0 Yes 5.0
white-space 8.0 Partial 1.9.1 85 Yes 9.5 Yes 6.0
direction 5.0 0 1.0 85 Yes 7.2 No No
unicode-bidi 5.0 0 1.0 525 Yes 7.2 No No
CSS3 text-shadow No No 1.9.1 Yes 3.4 9.5 3.0.3 No
text-overflow Partial No No Partial No Experimental No No
word-break Partial No No No No No No No
text-wrap No No No No No No No No
word-wrap 5.0 No 1.9.1 85 4.3 No No No
text-align-last Partial No No No No No No Partial
text-justify 5.5 No No No No No No 6.0
punctuation-trim No No No No No No No No
text-emphasis No No No No No No No No
text-outline No No No No No No No No
hanging-punctuation No No No No No No No No
Tables
CSS2 border-collapse 8.0 0.9 1.0 125 Yes 7.0 3.0 5.1
border-spacing 8.0 0.9 1.0 125 Yes 7.0 3.0 6.0
caption-side 8.0 0.9 1.4 85 Yes 7.0 CSS2.1 5.0
empty-cells 8.0 0.9 1.0 125 Yes 7.0 Incorrect 5.0
table-layout 5.0 0 1.0 85 Yes 7.0 3.0 6.0
User interface
CSS2 cursor 5.5 0 1.8 125 Yes Partial 3.0 Yes
outline 8.0 0 1.8 125 Yes 7.0 3.0 No
outline-color 8.0 0 1.8 125 Yes 7.0 3.0 No
outline-style 8.0 0 1.8 125 Yes 7.0 3.0 No
outline-width 8.0 0 1.8 125 Yes 7.0 3.0 No
CSS3 outline-offset No No 1.8 125 3.5 9.5 No No
outline-radius No No Experimental No No No No No
box-sizing 8.0 0 Experimental Experimental 3.3.2 7.0 No No
resize No No No 525 No No No No
appearance No No Experimental Experimental No No No No
icon No No No No No No No No
nav-index No No No No No 9.5 No No
nav-up No No No No No 9.5 No No
nav-right No No No No No 9.5 No No
nav-down No No No No No 9.5 No No
nav-left No No No No No 9.5 No No
column reminder Trident Tasman Gecko WebKit KHTML Presto iCab Prince XML
Paged media
CSS2 orphans 8.0 No No 312 3.5 7.0 No 6.0
page-break-after 4.0 No Partial Partial 3.5 7.0 No 6.0
page-break-before 4.0 0 Partial Partial 3.5 7.0 No 6.0
page-break-inside 8.0 No No 312 3.5 7.0 No 6.0
widows 8.0 No No 312 3.5 7.0 No 6.0
CSS3 page No No No No No No No No
size No No No No No 7.0 No No
image-orientation No No No No No No No No
fit No No No No No No No No
fit-position No No No No No No No No
Speech
CSS3 voice-volume No No No No No 7.6 No No
voice-balance 7.6
speak 7.6
pause 7.6
pause-after 7.6
pause-before 7.6
rest No
rest-before No
rest-after No
cue 7.6
cue-after 7.6
cue-before 7.6
mark No
mark-before No
mark-after No
voice-family 7.6
voice-rate 7.6
voice-pitch 7.6
voice-pitch-range 7.6
voice-stress 7.6
voice-duration 7.6
phonemes 7.6
column reminder Trident Tasman Gecko WebKit KHTML Presto iCab Prince XML
Media Queries
CSS3 width No No 1.9.1 525 4.1 9.0 No  ?
height 525 4.1 9.0  ?
device-width 525 4.1 9.0  ?
device-height 525 4.1 9.0  ?
orientation No 4.2.1  ?  ?
aspect-ratio No 4.2.1  ?  ?
device-aspect-ratio 525 4.1 9.0  ?
color 525 4.1 9.0  ?
color-index 525 4.1 9.0  ?
monochrome 525 4.1 9.0  ?
resolution No 4.1 9.0  ?
scan No 4.1 No  ?
grid No 4.1 9.0  ?
Ruby characters
CSS3 ruby-position 5.0 0 No No No No No No
ruby-align 5.0 0
ruby-overhang 5.0 0
ruby-span No No
Multi-column Layout
CSS3 column-break-before No No Experimental Experimental No No No 6.0
column-break-after Experimental Experimental 6.0
column-break-inside Experimental Experimental 6.0
column-count Experimental Experimental Yes
column-fill  ?  ?  ?
column-gap Experimental Experimental Yes
column-rule Experimental Experimental Yes
column-span  ?  ?  ?
columns Experimental Experimental Yes
Animation
CSS3
animation No No No yes No No No No
animation-delay yes
animation-direction yes
animation-duration yes
animation-iteration-count yes
animation-name yes
animation-play-state yes
animation-timing-function yes

[edit] 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. box-shadow — Not supported. Trident supports similar functionality since 5.5 using the proprietary Shadow and DropShadow filters. [2] [3]
  4. display — compact is not supported. IE7 does not support run-in and table. Earlier versions only support none, block, inline, table-header-group, and table-footer-group. Prior to IE8, inline-block is only supported on elements that are naturally inline.
  5. position — Prior to IE 7, fixed positioning was not supported, IE 7 supports it in standards-compliant mode only.
  6. visibility — Prior to IE 8, collapse value is not supported.
  7. background-attachment — Prior to IE 7, fixed was allowed on the body element only.
  8. opacity — isn't implemented. Trident is supporting a proprietary alternative (not understood by other layout engines) since v4.0. [4]
  9. background-position — Fixed positioning is not supported.
  10. border-color — transparent value is not supported prior to IE7.
  11. font-weight — Incorrect rendering when value is 600 [5].
  12. text-decoration — Optional property blink is not supported.
  13. white-space — IE 5.5 only supports nowrap; IE6 and IE7 also support pre. IE8 supports all values.
  14. list-style-type — decimal-leading-zero, lower-greek, lower-latin, upper-latin, upper-roman are not supported prior to IE8.

[edit] Gecko property notes

  1. display — run-in [6] is not supported. inline-table [7] and inline-block [8] 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 [9].
  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 [10] 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: [11]
  11. page-break-before; page-break-after — Only the always and auto values are supported.

[edit] 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. visibility — collapse is not supported prior to 522. Its implementation has the same effect as hidden and is therefore not compliant.
  8. animation — Supported since at least version 530.

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

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

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

[edit] Values and units

Trident Tasman Gecko WebKit KHTML Presto iCab Prince XML
Numbers CSS2 <number> A floating-point number 3.0 0 1.0 85 Yes 7.0 Yes 6.0
<length> <number> followed by units 3.0 0 1.0 85 Yes 7.0 Yes 6.0
<percentage> <number> followed by % 3.0 0 1.0 Yes Yes 7.0 Yes 6.0
<integer> An integer 3.0 0 1.0 85 Yes 7.0 Yes Yes
CSS3 <angle> <number> angle-unit No No No Yes Yes No No No
<time> <number> time-unit Yes Yes
<frequency> <number> frequency-unit Yes Yes
Strings CSS2 <string> String 3.0 0 1.0 85 Yes 7.0 Yes Yes
\code Unicode escapes 6.0 0.9 1.0 85 Yes 7.0 Yes Yes
Shapes CSS2 rect() A rectangle 5.5 0 1.0 85 Yes 7.0 Yes Yes
Functions CSS2 url() Uniform Resource Identifier 3.0 0 1.0 85 Yes 7.0 Yes Yes
counter() No No Yes Yes Yes Yes ? Yes
attr() Attribute identifier No No 1.0 Yes Yes 7.0 Yes Yes
CSS3 calc() No No No No No No No No
Colors CSS2 HTML4 color keywords 16 predefined web colors 3.0 0 1.0 85 Yes 7.0 Yes Yes
#rrggbb or #rgb Hexadecimal notation 3.0 0 1.0 85 Yes 7.0 Yes Yes
rgb(r,g,b) RGB notation 4.0 0 1.0 85 Yes 7.0 Yes Yes
system colors 28 predefined system colors [13] 3.0 0 1.0 85 Yes 7.0 Yes Yes
CSS3 SVG color keywords Partial ? Yes Yes Yes Yes ? ?
currentColor The value of the ‘color’ property. No No Yes No Yes 9.5 ? ?
rgba(r,g,b,a) RGBA notation No No 1.9 525 4.0 10.0 No 6.0
hsl(h,s,l) HSL notation No No 1.6 525 3.5.5 9.5 No No
hsla(h,s,l,a) HSLA notation No No 1.9 525 3.5.5 10.0 No No
transparent Full transparency 7.0 0 1.9 525 4.0 Partial (10.0) Partial Partial
Keywords CSS2 auto Automatically calculated 6.0 0 1.0 85 Yes 7.0 Yes Yes
inherit Inherited from the parents 8.0  ? 1.0 85 Yes 7.0 Yes Yes
CSS3 initial No No Experimental 125 No No No No
Units CSS2 px Pixel 3.0 0 1.0 85 Yes 7.0 Yes Yes
pt Point
pc Pica
cm Centimetre
mm Millimetre
in inch
em em
ex ex
% Percentage
CSS3 deg Degree No No No Yes Yes No No No
grad Grad No Yes Yes
rad Radian No Yes Yes
ms Millisecond No Yes Yes
s Second No Yes Yes
Hz Hertz No Yes Yes
kHz Kilohertz No Yes Yes
dpi Dots per inch No No 4.1
dpcm Dots per centimetre No No 4.1
turn turn No No No
gd Cells in the layout-grid No No No
rem the font size of the root element 1.9.2 No No
vw the viewport's width No No No
vh the viewport's height No
vm the viewport's height or width, whichever is smaller of the two No
ch the width of the "0" (ZERO, U+0030) glyph found in the font for the font size used to render. 1.9.1 No No

[edit] 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 <color> value. This simplifies the definition of those properties in CSS3.

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

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

[edit] Presto value and unit notes

  1. <number> — Quantization error for values greater than 20.47 [15] (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.

[edit] General notes

[edit] Gecko general notes

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

[edit] WebKit general notes

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

[edit] KHTML general notes

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

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

[edit] References

[edit] External links

  • WebDevout — mostly covers Windows browsers. Extensive bug testing.
  • QuirksMode — comprehensive but lacks latest versions.
v • d • e
Layout engines
List of layout engines
Amaya · Boxely · Gecko · GtkHTML · HTMLayout · KHTML · Mariner · Presto · Prince · Tasman · Tkhtml · Trident · WebKit  · Gazelle
Comparison of layout engines
HTML · XML · XHTML · Graphics · CSS · DOM · HTML 5 · ECMAScript · SVG · Non-standard HTML
Retrieved from "http://en.wikipedia.org/wiki/Comparison_of_layout_engines_(Cascading_Style_Sheets)"
Personal tools