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 button

this is a bevel button

this is a square button

this is a push button

this is a radio button

this is a checkbox

this is a listbox

this is a listitem

this is a scrollbarbutton-up

this is a scrollbarbutton-down

this is a scrollbarbutton-right

this is a scrollbarbutton-left

this is a scrollbartrack-horizontal

this is a scrollbartrack-horizontal

this is a scrollbartrack-horizontal

this is a scrollbargripper-vertical

this is a scrollbargripper-horizontal

this is a slider-horizontal

this is a slider-vertical

this is a sliderthumb-horizontal

this is a sliderthumb-vertical

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.