CSS3 property tests
This information is now maintained in our Wiki. Head over and see the latest details, and even contribute yourself.
While the assumption has been that the version of Safari in the iPhone is very close to Safari 3 for the Mac and Windows in terms of support for CSS, that does not seem to be the case. While Safari 3 supports just about all of the following properties, at least in "experimental" form with the prefix '-webkit-' added to the property name, Safari on the iPhone (at least when it was released) has much more limited support (see support tables). You can see for yourself by visiting this page with an iPhone, or Safari 3. This page has tests for a small subset of CSS3, chosen because these features are in part supported by at least one browser.
Still to come, tests for mozilla's and opera's experimental support for features (property names with -moz- and -o- prepended), and CSS 3 selectors.
Please feel free to email me, John Allsopp, with comments, suggestions, corrections and so on.
Browser support for CSS3 properties
| Property | Safari 2 | Safari 3 | iPhone (2.0) | Mozilla 1.7 | Opera 9 | IE 7 |
|---|---|---|---|---|---|---|
| text-shadow | supported | supported | supported | not supported | supported | not supported |
| box-shadow | not supported | supported with -webkit- prefix | supported with -webkit- prefix | not supported | not supported | not supported |
| multiple backgrounds | supported | supported | supported | not supported | not supported | not supported |
| border-image | not supported | supported with -webkit- prefix | ??? - more info needed | not supported | not supported | not supported |
| text-stroke [1] | not supported | supported with -webkit- prefix | supported with -webkit- prefix | not supported | not supported | not supported |
| text-fill-color [1] | not supported | supported with -webkit- prefix | supported with -webkit- prefix | not supported | not supported | not supported |
| border-radius | not supported | supported with -webkit- prefix | supported with -webkit- prefix | supported with -moz- prefix | not supported | not supported |
| opacity | supported | supported | supported | supported | supported | supported |
| text-overflow | supported ('clip' and 'ellipsis') | supported ('clip' and 'ellipsis') | supported ('clip' and 'ellipsis') | partially supported (always 'clip') | supported ('clip') and ('ellipsis' with -o- prefix) | supported |
| appearance | not supported | partially supported with -webkit- prefix | partially supported with -webkit- prefix | not supported | not supported | not supported |
[1] text-stroke and text-fill-color are innovations in Webkit, and to the best of my knowledge, as yet not part of CSS3. My guess is that due to the fluid nature of many of the CSS3 modules, and the desirability of this feature, something very like it will make its way into CSS3. Hat tip Chris Bentley for pointing this out.
text-shadow
This paragraph should have a text shadow
This paragraph should not have a text shadow. If the appearance of the text of this is the same as the paragraph above, text-shadow is not supported
-webkit-box-shadow
This paragraph should have a box shadow
This paragraph should not have a box shadow. If the appearance of the text of this is the same as the paragraph above, -webkit-box-shadow is not supported
box-shadow
This paragraph should have a box shadow
This paragraph should not have a box shadow. If the appearance of the text of this is the same as the paragraph above, box-shadow is not supported
multiple backgrounds
this element has an explicit width and height of 400px. It has four background images set. You should see a small green square on top of a larger orange square on top of a larger purple square on top of an aqua square.
border-image
this element has an explicit width and height of 400px. It has a border image on all borders. You should see a yellow and black striped border on each edge. The top and bottom borders should have large number of black stripes, while the left and right borders should have one elongated yellow and black strip. If you see a solid black border, border-image is not supported.
-webkit-border-image
this element has an explicit width and height of 400px. It has a border image on all borders. You should see a yellow and black striped border on each edge. The top and bottom borders should have large number of black stripes, while the left and right borders should have one elongated yellow and black strip. If you see a solid black border, -webkit-border-image is not supported.
-webkit-border-image: round
this element has an explicit width and height of 400px. It has a border image on all borders, using the value 'round'. You should see a yellow and black striped border on each edge. If you see a solid black border, -webkit-border-image is not supported.
-webkit-border-image: stretch
this element has an explicit width and height of 400px. It has a border image on all borders, using the value 'stretch'. You should see a yellow and black striped border on each edge. If you see a solid black border, -webkit-border-image is not supported.
-webkit-text-stroke
This paragraph should have a text stroke (the outline of the text should be a different color from the text color)
This paragraph should not have a text stroke. If the appearance of the text of this is the same as the paragraph above, -webkit-text-stroke is not supported
text-stroke
This paragraph should have a text stroke (the outline of the text should be a different color from the text color)
This paragraph should not have a text stroke. If the appearance of the text of this is the same as the paragraph above, text-stroke is not supported
-webkit-text-fill-color
This paragraph should have a text-fill-color (the color of the text should be blue)
This paragraph should not have a text fill color. If the appearance of the text of this is the same as the paragraph above, -webkit-text-fill-color is not supported
text-fill-color
This paragraph should have a text-fill-color (the outline of the text should be a different color from the text color)
This paragraph should not have a text shadow. If the appearance of the text of this is the same as the paragraph above, text-fill-color is not supported
-webkit-border-radius
This paragraph should have a border-radius - each border corner should have distinctly rounded edges
This paragraph should have square borders. If the appearance of box is the same as the paragraph above, -webkit-border-radius is not supported
-webkit-border-radius on each border
This paragraph should have a border-radius - each border corner should have distinctly rounded edges.
iPhone supports -webkit-border-top-left-radius, -webkit-border-top-right-radius, -webkit-border-bottom-left-radius, -webkit-border-bottom-right-radius, but not the -webkit-border-radius shorthand.
border-radius
This paragraph should have a border-radius - each border corner should have distinctly rounded edges
This paragraph should have square borders. If the appearance of box is the same as the paragraph above, border-radius is not supported
opacity
This paragraph should despite having a black background and white text, appear to have a grey background, because it has an opacity of .5 .
This paragraph should should have a black background and white text. If it appears the same as the previous paragraph, opacity is not supported
appearance
this is a listbox
this is a listitem
this is a scrollbarbutton-down
this is a scrollbarbutton-right
this is a caret
this is a searchfield
the last element in this paragraph is a searchfield-decoration
the last element in this paragraph is a searchfield-results-decoration
the last element in this paragraph is a searchfield-results-button
the last element in this paragraph is a searchfield-results-button
this is a text field
this is a text area
text-overflow: ellipsis
This paragraph has its height and width set to 200px using CSS. The amount of text inside the paragraph should overflow these bounds. If the text-overflow property is supported with a value of ellipsis, then you should see an ellipsis character like this ... after the last visible character in the paragraph
The paragraph above has a width set on it, and the contents are styled to not wrap, which the overflow property is set to hidden, and the text-overflow to ellipsis. If text overflow is supported, the paragraph will appear as a few words followed by an ellipsis character (...)
text-overflow: clip
This paragraph has its height and width set to 200px using CSS. The amount of text inside the paragraph should overflow these bounds.
The paragraph above has a width set on it, and the contents are styled to not wrap, which the overflow property is set to hidden, and the text-overflow to clip. If text overflow is supported, the paragraph will appear as a few words and where the text overflows the bounds of the paragraph, it should be clipped exacltly where the text overflows the bounds, even part way through acharacter, as opposed to at the character or word.