I’ve been playing around with CSS3, lately.
One very specific thing I do is make images that are a bit larger than they appear on my screen, because I know people are going to set their text sizes differently. Another thing I do is scale things depending on width or such, so that everything fits the best it can.
With today’s background-images, the image is rendered at 100% zoom even if you want it in a smaller box. That means I need to put images in my markup, or at least it means I can’t just switch them out using only CSS.
This is where CSS3 comes in: Konqueror, Opera, Safari, and Chrome can set background-images to specific widths and heights. I just set visibility:hidden on my old image, and copied the width and height to my CSS background-image (in this case, background-size:100% auto). Voila!
If you’ve visited http://cozycabbage.com using Webkit or Gecko, you’ll notice that I have rounded corners. That means the corners are square for Opera, Konqueror, all IE versions, and whatever else. This CSS image replacement doesn’t work in Firefox or IE (strange how Firefox is missing support on it), which makes it look terrible in those browsers. It’s not something that you could put out publicly.
Altogether, this means my page only renders correctly in Webkit. That’s about… 5% of the total market?
I guess I’ll be stuck hacking up some PHP for my page bodies. For those of you who want to see my simple little session-switched thing, you can visit Cozy Cabbage, then put a ?grey in the address bar, and then ?green to switch back.