I guess I was younger, back when I made my first set of buttons. I went back to them today, and found that they didn’t work in other browsers. Also, I wanted to see if I could make them with HTML (seems like my latest craze).
Webkit is stuffed full of strange and amazing tags that let you set background gradients, text shadows, rounded corners, rotations, and pretty much anything else you could want. It’s missing outline-radius, though, which meant I had to use two divs to create the button I had designed in Paint Shop Pro. And a span. But that’s all!
It had two borders, each with a small amount of radius, a linear gradient background, :target tags so it looks like you click it, text shadow to get the 3D appearance, and whole bunch of regular old CSS2 and CSS1.
When I was done, however, I realized that, while it still worked in other browsers, there was no background. Yet again, I had made something that was only viewable in webkit.
I tossed the gradients from my image buttons into another image and used that as a background for everything not-webkit, but there’s a bit of white sticking out of the bottom. Things just aren’t lining up the same in every browser, which is a pain to work with. I’ve never really needed to worry about 0.02em before today. It turns out that’s a fair amount.
Anyway, I’ve got the newer version here for your perusal.
(As if I’m submitting it for your approval, or something.)
As I said before, it looks best in Chrome or Safari. The little font-changing button doesn’t seem to work in Firefox, for little or no reason. It looks stupid in IE7 and lower, because there’s no :focus selector, which means it’s not really a button.
What am I going to do with it, now? I saw some great article about progressive enhancement that laid out about five images beside eachother, and each one showed a more feature-rich page in a different browser. In that light, I think I’ll try my hand at making some sort of tab that turns into a great-looking button when you view it in a more advanced browser.
It appears Firefox lacks support for things Webkit and Opera have, like text shadows. 3.5 is going to be an important release.
Also, I’ve noticed, lately, that I refer to Firefox, Opera, and Webkit, because it seems a bit redundant to mention both Safari AND Chrome when talking about rendering. I’ll talk about one or the other when it’s about browser features (like how I’m jealous of Safari’s document inspector), but otherwise I’ll just refer to the Webkit engine.
So this whole day has been an exercise in jQuery. I’m trying to find out how to get certain elements from the context array (whatever it’s called). It seems .get() doesn’t allow things like the .text() tag or the .html() tag. Maybe if I wrapped that in another jQuery object…