Comparison of layout engines (Cascading Style Sheets)

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.

[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 (Windows operating systems only)
Tasman	Mac OS X versions of Internet Explorer and MSN
Gecko	All Mozilla software, including Firefox; SeaMonkey; Galeon; Camino; K-Meleon; Flock; also Epiphany-gecko
WebKit	Apple 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
Prince XML	Prince

[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 understood, but supported under an alternate name. May be incomplete or buggy.
Dropped	Indicates that the property/element is no longer supported.

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

[edit] Grammar and rules

[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 versions prior to IE8. For @import <URL> <MEDIA>, IE requests as the URL "<URL> <MEDIA>" and will include url() and/or quotes in the URL, too, if present.
3. @import — Limited to 35 imported stylesheets, after that, rules stops applying.
4. @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

[edit] Trident selector notes

1. :active — Prior to 8.0, :active is only supported on anchor elements.
2. :hover — Prior to 7.0, :hover is only supported on anchor elements.
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. [attr] — Matches every td and th in a table when the attribute is colspan (regardless of whether any actually have a colspan attribute). This may not actually be a bug, as ambiguity exists in the specification.

[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

[edit] Trident property notes

1. overflow — overflow:visible is incorrectly supported prior to IE7.
2. border-style — hidden is not supported prior to IE8. 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.
4. cursor — Does not fail on non-prefixed vendor extensions.
5. display — Prior to IE8, run-in and table are not supported, while inline-block is only supported on elements that are naturally inline. Prior to IE7, only none, block, inline, table-header-group, and table-footer-group are fully supported.
6. position — Prior to IE7, fixed positioning was not supported. IE7 and later support it in standards-compliant mode only.
7. visibility — Prior to IE8, collapse value is not supported.
8. background-attachment — Prior to IE7, fixed was allowed on the body element only.
9. opacity — isn't implemented. Trident supports a proprietary alternative (not understood by other layout engines) since IE5.5.
10. background-position — Fixed positioning is not supported prior to version 8.0.
11. border-color — transparent value is not supported prior to IE7.
12. font-weight — Incorrect rendering when value is 600 prior to version 8.0.
13. text-decoration — Optional property blink is not supported.
14. white-space — IE 5.5 only supports nowrap; IE6 and IE7 also support pre. IE8 supports all values.
15. list-style-type — armenian, decimal-leading-zero, georgian, lower-greek, lower-latin, upper-latin are unsupported prior to IE8.

[edit] Gecko property notes

1. display — run-in is unsupported. inline-table and inline-block 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.
4. content — none value is unsupported prior to 1.9.
5. background-position — Versions prior to 1.7 implement the CSS2 syntax, not the proposed CSS2.1 expanded syntax.
6. font-size-adjust — Prior to 1.9, supported on Windows only.
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 unsupported prior to 1.8.
10. border-radius — Prior to 1.9.1, border curves are circular, not elliptical as specified by the current CSS3 draft. Short-cut definitions for border-radius read "tl tr br bl" instead of the W3C's "tr br bl tl". When the border style is dotted or dashed, curves are rendered as solid instead.
11. page-break-before; page-break-after — Only the always and auto values are supported.

[edit] WebKit property notes

1. font — The system font keywords that allow designers to tailor presentation to the user's operating system environment are unsupported.
2. font-weight — Only Regular and Bold weights get used, even if Light or Heavy/Black faces are installed.
3. page-break-before; page-break-after — Only the always and auto values are supported.
4. text-decoration — Optional property blink is unsupported.
5. white-space — pre-line and pre-wrap are unsupported.
6. visibility — collapse is unsupported prior to 522. Its implementation has the same effect as hidden and is therefore not compliant.
7. content — The none, open-quote, close-quote, no-open-quote, no-close-quote and normal values is unsupported.
8. font-size — The font-size property does not always accept the value 0, in "font-size: 0px" the text is still visible.

[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. 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.
5. cursor — cursor is ignored with dynamic pseudo-classes and custom cursors are unsupported.
6. content — The none value is unsupported.
7. font/font-size — inherit should not be allowed together with a font-size value. This should not be parsed, but it's currently done in Opera.

[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

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

2. <angle> — The turn unit is unsupported.

[edit] Trident value and unit notes

1. rect() — Between versions 5.5 and 7.0, the correct syntax with commas was not supported. Version 8.0 implements clip:rect() correctly.
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.

[edit] Presto value and unit notes

1. <number> — Quantization error for values greater than 20.47 (not limited to em, try any non-pixel units). Seems to have been fixed in Opera 9.6.
2. transparent — Keyword is ignored when used with the outline-color property. Prior to 10.0 it was also ignored when used with the 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.

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