Adventures in CSS3

Printer-friendly versionSend to friend

While giving my site a facelift (which isn't quite finished yet I know) I thought I would have a little play with CSS3 to see what could be done and I have to say I am impressed and frustrated in equal measure at the moment.

Those of you viewing this site in a proper browser (you know who you are), will notice the flickr gallery to the right has some nice effects applied to it, ok its not much but I thought I would start small and I have to say that the resulting effect is pretty cool considering all I did was add 4 lines of code:

-moz-box-shadow:6px 1px 10px #888888;
-moz-transform:rotate(-10deg);
-webkit-box-shadow:6px 1px 10px #888888;
-webkit-transform:rotate(-10deg);

But here also lies my gripe with CSS3 so far, why do I need to repeat myself? Ok so it is only 4 lines to create what would have been an imagemap or a flash element in the past but still... why do i need to target individual browsers? Surely this is a step backwards?

I also have some rounded corners on the comments for each post, I thought I would be a little different and only specify 2 corners of each box to be rounded and by doing so ended up with a fairly unruly rule (no pun intended!):

-moz-border-radius-bottomleft:20px;
-moz-border-radius-topright:20px;
-webkit-border-bottom-left-radius: 20px;
-webkit-border-top-right-radius: 20px;

Even the declaration isn't quite the same in this case and it took me a while to spot a mistake whereby I simply copied the Mozilla format and replaced -moz with -webkit and found that my rule now didn't work in Safari 4.

I love the power that CSS3 will undoubtedly grant designers and developers, and the time that will be saved by not having to produce imagemaps and swfs for all kinds of things that can now be produced using CSS3 will no doubt be vast, but there needs to be some kind of consistency in my view before this gets rolled out as the standard and before Microsoft catch up and start implementing it. The last thing we really need is for IE to implement yet another property and thereby tripling the size of our CSS files because we now have to add -IE7-border-radius-topright to the above rule to get rounded corners? 8 lines of code simply to add a pretty rounded corner effect...

...can we just have a border-radius: 10px 10px 0 0 rule across all browsers please? Looking at the W3C Specification that seems to be what they are aiming at and hopefully the browser specific declarations will go away, I for one wont be too impressed if they are here to stay.