CSS contents and browser compatibility

lang="nl" Ik heb ook een CSS1 reader te koop.

The contents of my CSS pages and browser compatibility.

Originally set up as a CSS2 tests site, I quickly crossed the border to both CSS1 and CSS3. Currently these pages contain information about selectors and declarations I happen to find interesting, or whose browser compatibility is very complicated.

I don't much feel like creating tests for, for instance, margin or font-size because modern browsers support this pretty well and I'm usually not interested in a 1 pixel difference. Besides, such tests quickly become very complicated and I lack the typographical knowledge to delve too deeply into the various font-related declarations like line-height and letter-spacing. Finally, the existence of several units makes everything even more complicated.

Note that all test pages function in Quirks Mode (Why?). I have reluctantly come to the conclusion that I have to double the amount of test pages by adding Strict Mode ones, but I haven't yet actually done so.

If you know the old CSS2 Tests site, you'll notice I removed most of the browsers and the entire scoring system. I decided to concentrate on important browsers and to get rid of the rest, the strain of keeping the table up to date was too much. As to the scoring system, it was never an example of objective and detached measuring, and besides CSS is too complicated to fit into a simple Yes/No system.

Table of Contents

Be very, very careful.
A generally reliable method for separating Explorer Windows from all other browsers.
Why not to use it

See also the key to my compatibility tables.

All Safari 1.2 tests by Mark 'Tarquin' Wilton-Jones.

Selectors

Selector Explorer 5 Windows Explorer 6 Windows Explorer 5.2 Mac Mozilla 1.6 Safari 1.2 Opera 7.50
Selects all elements Yes Yes Yes Yes Yes Yes
 
Selects an element that is a child of another element 5.0 No Yes Yes Yes Yes
Explorer 5.0 Windows sees the part after the > as the selector. 5.5 does not support it.
Selects an element that is a next sibling of another element 5.0 No Yes Yes Yes Yes
Explorer 5.0 Windows sees the part after the + as the selector. 5.5 does not support it.
Selects an element with a certain attribute No No No Yes Yes Yes
 
Whether an element can support two or more class names Yes Yes Yes Yes Yes Yes
 

Pseudo-classes

Pseudo-class Explorer 5 Windows Explorer 6 Windows Explorer 5.2 Mac Mozilla 1.6 Safari 1.2 Opera 7.50
An element in a hovered (mouseover) or active (mousedown) state. Incomplete Incomplete Incomplete Almost Yes Yes
  • Explorer supports it only on links
  • Mozilla doesn't support .test:hover in Quirks Mode.
To generate content before and after an element No No No Yes Yes Yes
Safari places the :after content below my test paragraph instead of inside it.
Form fields that receive user focus No No Yes Yes Untestable Yes
Safari doesn't support background colors on form fields at all.
An element that is the first or last child of its parent No No Incomplete Yes Yes Incomplete

Explorer 5 on Mac and Opera 7 only support :first-child.

The first line or first letter of an element 5.5 Yes Yes Yes Almost Yes
 
Negation of a selector, or empty elements. No No No Yes Yes No
Interesting Mozilla extensions.
The root element, or initial containing block. No No Yes Yes Yes No
This test does not answer the question which element the browser considers the root element.

Declarations

Declaration Explorer 5 Windows Explorer 6 Windows Explorer 5.2 Mac Mozilla 1.6 Safari 1.2 Opera 7.50
Gives the element a fixed position relative to the browser window No No Yes Yes Yes Yes
 
Gives the element a fixed position relative to the HTML document or move it relative to its normal position Yes Yes Yes Yes Yes Yes
 
block, inline, corresponding to block level and inline elements, and none, hide completely Yes Yes Yes Yes Yes Yes
 
Don't really understand No Incomplete Yes No Yes Yes
Explorer 6 only accepts the value on elements with a natural display: inline
As an li No Yes Buggy Yes Yes Yes
Explorer Mac gives it list-style-type: decimal instead of a bullet. In addition, it numbers the elements incorrectly.
Complicated No No Buggy No Yes Yes
 
Complicated No No No No No Yes
 
and related values, like table-cell and table-row No No Buggy Yes Yes Yes
Safari puts each table-cell on its own row if it is not enclosed by a table-row.
Declaration Explorer 5 Windows Explorer 6 Windows Explorer 5.2 Mac Mozilla 1.6 Safari 1.2 Opera 7.50
What to do with overflowing content Yes Yes Yes Yes Yes Yes
 
Minimum or maximum width No No No Yes Yes Yes
 
Minimum or maximum height No Minimal No Yes No Yes
Explorer 6 Windows supports only min-height on TD's.
Change cursor style Yes Yes Yes Almost Buggy Yes
One minor bug in Mozilla.
Safari has confused support for any value but pointer.
Squares, decimal numbers, roman numbers, etc. Incomplete Incomplete Incomplete Yes Almost Yes
Explorer doesn't support a few styles, Safari misses one.
Image instead of dot Yes Yes Yes Yes Yes Yes
 
Dot inside or outside li? Yes Yes Yes Yes Yes Yes
 
Declaration Explorer 5 Windows Explorer 6 Windows Explorer 5.2 Mac Mozilla 1.6 Safari 1.2 Opera 7.50
A sort of border, but different No No Yes Alternative Yes Yes
I assume that Explorer Mac and Opera are closest to correct implementation.
Show empty cells in table No No Almost Yes Yes Yes
Explorer Mac makes the empty cell too large.
Fit cells snugly Yes Yes No Yes Yes Yes
 
cellspacing No No No Yes Yes Yes
 
Really strict width for tables Yes Yes No Yes Yes Yes
 
5.5 Yes No No No Incomplete
Microsoft extensions. Opera supports them inline only, and only when you turn them on.
Alternative from 5.5 Alternative No Alternative Yes No
Very messy and unreliable. No standard syntax.
Declaration Explorer 5 Windows Explorer 6 Windows Explorer 5.2 Mac Mozilla 1.6 Safari 1.2 Opera 7.50
To hide a table column or row without recalculating the width or height of the other TD's. No No Incorrect Incorrect Incorrect Incorrect
This value could be useful. Unfortunately all browsers treat it as an equivalent of visibility: hidden.
To remove text wrapping or to make an element behave like a pre No Incomplete Yes Yes Yes Yes
Explorer 6 Windows only supports white-space: pre in 'Strict Mode'.

Of the advanced values, Opera 7.50 supports pre-wrap. No other browser supports this, and no browser at all supports pre-line.

To overwrite the content of an element. No No No No No Yes
 
To define the position of a background image. Yes Yes Yes Incomplete Almost Incomplete
Mozilla and Opera refuse a combination of keywords and pixels/percentages. Safari has a minor oddity in mixing keywords and pixels/percentages.
Create a text-shadow. No No No No Yes No
 
Declaration Explorer 5 Windows Explorer 6 Windows Explorer 5.2 Mac Mozilla 1.6 Safari 1.2 Opera 7.50
No No Yes Alternative No Yes
Mozilla requires -moz-box-sizing and supports an additional value.

No browser supports box-sizing in combination with min- or max- width or height
on elements other than body Alternative Alternative Yes Yes Yes Yes
Although Explorer Windows and Mozilla don't support the standard, the standard itself is missing one value for this property, so I count their support as Alternative, not Incorrect.
Not downloading hidden images. No No No No Yes Yes
Browsers should not download an img with display: none until the display changes.

Tasks

Some CSS tasks I happened to study.
Switching all browsers to one box model.
Giving an element 100% of the height of the browser window.
The background-attachment property for elements other than the body needs three values instead of the current two. Result: incompatibility soup.
My solution for creating tableless forms.
For thos silly rigid 800x600 designs that should be centered in the browser window.
Report of a curious experiment.

Browser bugs

Some CSS browser bugs I happened to discover.
Explorer Mac gives absolutely positioned elements a secret margin of 15 pixels.
Explorer Mac propagates an overflow: hidden in a page in a frame to the next page appearing in that frame.
Explorer Mac gives an element with overflow: auto enough height to cause scrollbars on the containing page.
Explorer 5 Windows doesn't place an element with position: relative within an element with position: absolute relative to the containing element, but relative to the page.
An Explorer 6 bug in Eric Meyer's Pure CSS Popups.
In Mozilla a table cannot contain absolutely positioned elements.
When giving a TD a width, Explorer Windows maintains this width for the content of the TD, even when the TD has a colspan.