On Friday, David Hyatt posted on Surfin' Safari that support for several CSS3 properties had been added, including border-radius. Many of you will have seen my site, and, it must be pointed out, for each block, 4 divs and 4 images are needed, one for each corner. The border-radius property eliminates the need for all but one of those divs, and no images are required.
I went ahead and ported my site to CSS3, and here are some screenshots for those of you without the WebKit CVS running ;) The current XHTML1.1/CSS2 version and the experimental XHTML1.1/CSS3 version. To keep them equal, they are both taken from Safari running the WebKit CVS.
I challenge anybody who looks at either of those to find a single difference, apart from the corners being smoother.
Some other info: By not having to download an images for each corner, a total of 12 images, as well as being able to cut out 3 divs on each block, I have saved the browser downloading 17,476 bytes, by getting the total size down to 51,057 bytes from 68,533 bytes.
But -moz-border-radius? Why aren't I going mad about that? The CSS3 property is border-radius, not -moz-border-radius.
Comments
Ryan Parman says…
August 31, 2005 03:27:42+01:00
Yes, but you must understand that when Mozilla adds support for a property that isn't yet part of a standard, they prefix it with -moz- so that it doesn't get confused with the standardized syntax (whenever it happens to get standardized). Web developers know that this property may not be around forever, and can take their own precautions.
They did that with the CSS3 opacity property (as -moz-opacity) for a while until that particular CSS3 module got approved. Now they've done that with border-radius until the appropriate CSS3 module is approved (which it may or may not already be... I have no idea for sure).
What's important to understand is that CSS3 isn't being handled as a single spec, but rather as smaller modules which browser vendors can add as they become recommendations instead of waiting for the whole massive CSS3 spec to be approved.
I'd bet that -moz-border-radius will be changed in time for the Firefox 1.5 release this November. No worries. :)
Geoffrey Sneddon says…
August 31, 2005 04:27:49+01:00
My memory served me wrong, I thought the border module had been approved, it has not. Brilliant memory I have. :) For those wondering why I didn't check before posting, it was because I was pretty much certain that it had been.
Oh well, that renders my whole argument against -moz-border-radius is wrong :)