Yesterday I tried learning some CSS3 on my own in order to convert my kung fu school’s website to be more “modern” in terms of technology. I’ve been using a modified Ocean Mist 2.0 theme and hacked up the CSS a bit to fit what I wanted. In doing so, I noticed that there is lots of CSS rules to create shadows and rounded corners. These were easily the most visible visual elements that I knew CSS3 addresses. I experimented with box-shadow and border-radius on a test site, and the results are positive so far.

Here is the original version which uses its own with a background image:

and this is the version using CSS3:

The visual difference is minimal, and it’s a heck of a lot easier to change a few values in CSS instead multiple properties (and potentially an image file). The CSS3 tags basically eliminates the extra background image inside a div tag and its associated CSS to display the image sprite (I originally used SpriteMe.org to cut down some bytes). I haven’t cleaned up the CSS or image files yet, but I imagine that this will cut down a lot of extra bytes in the whole theme.

What I’m not thrilled about though is maintaining backward compatibility for older browsers. It’s nice that I get to define a single CSS property so I don’t have to use or wrangle a massive CSS file. I don’t like the idea of sticking in vendor prefixes let alone trying to be compliant with a whole gamut of browsers and include some fallback code/mechanisms. That’s partly the reason why I haven’t switched to using CSS3 (aside from my lack of time). Even so, I’m not too, too worried about browser compatibility being a huge problem since the website’s reach is very localized.

This is just an exploration really since there isn’t a huge need for me to do it. What’s in place right now works just fine and across many browsers. There aren’t any issues with that.