Comparison of layout engines (CSS)

Encyclopedia : C : CO : COM : 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.

Version number, if possible, is provided for 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 was 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.

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.

General overview

	Trident	Tasman	Gecko	WebCore	KHTML	Presto	iCab
CSS1					style="background: #ddffdd" |		style="background: #ddffdd" |
CSS2 (2.1)
CSS3
	Trident	Tasman	Gecko	WebCore	KHTML	Presto	iCab

Grammar and rules

			Trident	Tasman	Gecko	WebCore	KHTML	Presto	iCab
CSS1	!important	Weight increasing
	/*Comment*/	Comments
	@import	Import stylesheet
CSS2	@charset	Character set		?
	@media	Media-specific rules
	@page	For paged media
	@font-face	Define font
CSS3	@namespace	Namespace declaration
			Trident	Tasman	Gecko	WebCore	KHTML	Presto	iCab

CSS 2.1 notes

1. @font-face removed in CSS 2.1
2. @charset removed in CSS 2.1

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

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. 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	Presto	iCab
Element selectors
CSS1	*	Universal
	E	Element
	E.class	Class
	E#id	ID
CSS2	ns|E	Namespaced
Relationship selectors
CSS1	E F	Descendant
CSS2	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
CSS1	E:link	Unvisited hyperlink
	E:visited	Visited hyperlink
	E:active	Active
CSS2	E:hover	Mouseover
	E:focus	Focused
	E:first-child	First child
	E:lang()	Language
	@page:first	First page
	@page:left	Left page
	@page:right	Right page
CSS3	E:root	Root
	E:last-child	Last child
	E:first-of-type	First child of type
	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:contains()	Contains
	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
CSS1	E:first-letter	First letter
	E:first-line	First line
CSS2	E:before	Before
	E:after	After
CSS3	E::pseudo-element	Double colon notation
	E::selection	Selection
			Trident	Tasman	Gecko	WebCore	KHTML	Presto	iCab

Trident selector notes

1. :hover — Prior to 7.0 Beta 2 Preview, :hover is for anchor element only.
2. .one.two — only .two class selector is taken into consideration.

Tasman selector notes

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

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.

Properties

		Trident	Tasman	Gecko	WebCore	KHTML	Presto	iCab
Box model
CSS1	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
	margin
	margin-top
	margin-right
	margin-bottom
	margin-left
	padding
	padding-top
	padding-right
	padding-bottom
	padding-left
CSS2	border-top-color
	border-top-style
	border-right-style
	border-right-color
	border-bottom-color
	border-bottom-style
	border-left-color
	border-left-style
CSS3	border-radius
	box-sizing
Visual formatting model
CSS1	width
	height
	float
	clear
	line-height
	vertical-align
CSS2	min-width
	max-width
	min-height
	max-height
	display
	position
	top
	right
	bottom
	left
	z-index
	direction
	unicode-bidi
Generated content, automatic numbering, and lists
CSS1	list-style
	list-style-image
	list-style-position
	list-style-type
CSS2	quotes
	content
	counter-increment
	counter-reset
Colors and backgrounds
CSS1	color
	background
	background-attachment
	background-color
	background-image
	background-position
	background-repeat
CSS3	background-clip
	background-origin
Fonts
CSS1	font
	font-family
	font-size
	font-style
	font-variant
	font-weight
CSS2	font-size-adjust
	font-stretch
Text
CSS1	text-align
	text-decoration
	text-indent
	text-transform
	letter-spacing
	word-spacing
	white-space
CSS2	text-shadow
Visual effects
CSS2	clip
	overflow
	visibility
CSS3	overflow-x
	overflow-y
	opacity
Tables
CSS2	border-collapse
	border-spacing
	caption-side
	empty-cells
	speak-header
	table-layout
User interface
CSS2	cursor
	outline
	outline-color
	outline-style
	outline-width
CSS3	outline-offset
	outline-radius
Paged media
CSS2	marks
	orphans
	page
	page-break-after
	page-break-before
	page-break-inside
	size
	widows
Aural
CSS2	azimuth
	cue
	cue-after
	cue-before
	elevation
	pause
	pause-after
	pause-before
	pitch
	pitch-range
	play-during
	speak
	speak-numeral
	speak-punctuation
	speech-rate
	stress
	richness
	voice-family
	volume
CSS3	-xv-voice-pitch
	-xv-voice-pitch-range
	-xv-voice-rate
	-xv-voice-volume
Ruby characters
CSS3	ruby-position
	ruby-align
	ruby-overhang
	ruby-span
		Trident	Tasman	Gecko	WebCore	KHTML	Presto	iCab

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[link]).

Trident property notes

1. border-style — dotted is rendered as dashed.
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 [link].
7. text-decoration — Optional property blink is not supported.

Gecko property notes

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

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-space — pre-line and pre-wrap are not supported.
7. text-shadow — Multiple shadows are not supported.
8. visibility — All supported except for collapse.

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

iCab property notes

1. display — run-in is not supported.
2. text-align — justify is not supported.
3. visibility — collapse only partial.
4. caption-side — top and bottom only.
5. empty-cells — Compresses hidden rows but does not hide them completely.

CSS2 aural style sheets notes

1. The aural style sheets introduced in CSS2 are deprecated in CSS2.1 [link]. The only know software that supports CSS2 Aural is EMACSpeak [link], 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.

Values and units

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

Trident value and unit notes

1. auto — Does not work for margins.

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. em — Quantization error for values greater than 20.47em [link].
3. % — Floating point numbers are treated as integers when used in percentages.

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 (and proprietary) selectors, properties and values are prefixed with "-moz-", e.g. ::-moz-selection instead of ::selection [link].

WebCore general notes

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

KHTML general notes

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

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.

References

See also

• Comparison of layout engines
• Comparison of layout engines (HTML)
• Comparison of layout engines (XML)
• Comparison of layout engines (XHTML)
• Comparison of layout engines (graphics)
• Comparison of layout engines (DOM)

External links

• [Web browser CSS support] by David Hammond
• [CSS contents and browser compatibility]
• [CSS specification/browser support page: General Syntax]
• [MacEdition CSS Guides]
• [browser support for css1 & css2]
• [Third-party Mozilla support chart]
• [Assigning external CSS]
• [CSS Support in Opera]

 

---

From Wikipedia, the Free Encyclopedia. Original article here. Support Wikipedia by contributing or donating.
All text is available under the terms of the GNU Free Documentation License See Wikipedia Copyrights for details.

Search Titles

0

1

2

3

4

5

6

7

8

9

A

B

C

D

E

F

G

H

I

J

K

L

M

N

O

P

Q

R

S

T

U

V

W

X

Y

Z

?