CSS3 Layout Module Browser Support

Question

I'm trying to figure out which browsers currently (natively) support the CSS3 layout module.

Basically, I'm developing for a specific environment where I can specify what browsers to use, and CSS3 will speed up development times, so hey - why not?

What I'm specifically talking about is

body {
   display: 'aaa'
            'bcd';
}

and being able to slot page elements into the layout like so:

div#div1 { position: a; }
div#div2 { position: b; }

(div1 is the header, and div2 is a left sidebar)

Answer 1

Opera has the best CSS3 support, followed by webkit (safari). I suggest testing on Opera to see what works.

Here's a compatibility chart (may be out of date) http://geocities.com/seanmhall2003/css3/compat.html

this one seems better: http://westciv.com/iphonetests/

Be aware that most css3 properties are supported through a prefix (since css3 isn't final). For opera the prefix is -o- and for webkit it is -webkit-. ie: -o-text-shadow.

UPDATE: There is a Javascript implementation of the layout module: http://a.deveria.com/csstpl/ . Have not used it myself and it comes with the catch that you must wait for all the page to load before it can render cleanly. If you're writing an intranet application on a LAN this would probably have a negligible impact but on a slow connection that could make your pages appear unresponsive.