CSS 3 Tests

CSS is an important part of todays web, it is helping web developers separate design from content. Nearly all of CSS 2 can be viewed by most modern browsers. CSS 3 is here already! So how are our browsers coping?

The tests that I am running are from: http://www.geocities.com/seanmhall2003/css3/

I am doing some tests for CSS3 in Flock and Safari. Every test has been done on the same machine:
iBook G4 with Mac OS X 10.4.7.

I will also be putting this information on my blog: http://www.vanirsystems.co.uk/danielsblog/

Flock 0.7.4.1:
* http://www.geocities.com/seanmhall2003/css3/attr.html <– All supported
* http://www.geocities.com/seanmhall2003/css3/pseudo.html <– enabled and disabled supported, value not supported. Text selection, nth-child and nth-of-type not supported. Not is supported.
* http://www.geocities.com/seanmhall2003/css3/lists.html <– marker not supported
* http://www.geocities.com/seanmhall2003/css3/opacity.html <– Opacity supported
* http://www.geocities.com/seanmhall2003/css3/borders.html <– Box shadow not supported
* http://www.geocities.com/seanmhall2003/css3/table.html <– caption side supported
* http://www.geocities.com/seanmhall2003/css3/fonts.html <– min/max font size not supported. text line styles not supported. Font appearance not clear. Font effect not supported.
* http://www.quirksmode.org/css/box.html <–
* * No box-sizing defined, box-sizing: content-box, W3C box model width, box-sizing: margin-box are same size.
* * Traditional box model width, box-sizing: border-box are same size.
* * Mozilla’s padding-box, box-sizing: padding-box are same size
* http://www.geocities.com/seanmhall2003/css3/misc.html <– icon not supported. appearance not supported.
* http://www.geocities.com/seanmhall2003/css3/resize.html <– resize not supported.
* http://www.geocities.com/seanmhall2003/css3/content.html <– content not supported on any element.
* http://www.geocities.com/seanmhall2003/css3/bg.html <– Does not look like it is supported.

Safari 2.0.4:
* http://www.geocities.com/seanmhall2003/css3/attr.html <– All supported
* http://www.geocities.com/seanmhall2003/css3/pseudo.html <– Enabled, disabled and value not supported. Text Selection supported. nth-child and nth-of-type not supported. Not is supported.
* http://www.geocities.com/seanmhall2003/css3/lists.html <– marker not supported
* http://www.geocities.com/seanmhall2003/css3/opacity.html <– Opacity supported
* http://www.geocities.com/seanmhall2003/css3/borders.html <– Box shadow not supported
* http://www.geocities.com/seanmhall2003/css3/table.html <– caption side supported
* http://www.geocities.com/seanmhall2003/css3/fonts.html <– min/max font size not supported. text line styles not supported. Font appearance not clear. Font effect not supported. Results (h2) has a red drop shadow, so drop shadows are supported.
* http://www.quirksmode.org/css/box.html <–
* * No box-sizing defined, W3C box model width, box-sizing: content-box, box-sizing: border-box, box-sizing: padding-box, box-sizing: margin-box are same size.
* * Mozilla’s padding-box is a size
** Traditional box model width is a size
* http://www.geocities.com/seanmhall2003/css3/misc.html <– icon not supported. appearance not supported.
* http://www.geocities.com/seanmhall2003/css3/resize.html <– resize not supported.
* http://www.geocities.com/seanmhall2003/css3/content.html <– content not supported on any element.
* http://www.geocities.com/seanmhall2003/css3/bg.html <– Does not look like it is supported.

I can almost guarantee that Internet Explorer 6 won’t support any of this. Internet Explorer may be a little better - who knows?

Web developers don’t need to worry about css3 yet, it does have very nice features though. The people that need to worry about this is the browser developers, so the people in the Mozilla, Flock, IE, Opera and WebKit development team get on with it :p - We want good drop shadows and classy rounded corners!

Daniel

Technorati Tags: css, css3, webstandards, webbrowsers, browsers, flock, safari, webkit, webdevelopment, mozilla