Reasons to love Webkit

If you don’t know, Webkit is the framework in OS X which provides web display to apps. It’s the power behind Safari.

Now, people knock Safari sometimes. They say it’s slow, and they say FireFox has better rendering. People say all sorts of things. Well, Safari is the speediest browser on my MacBook, and that’s nothing compared to what’s coming. And as for rendering…

Safari – Webkit – makes the web pretty. The anti-aliased text is drop dead gorgeous. Everything about it is designed to make content look as good as it can possibly be. have you seen FireFox’s dog-ugly rounded corners on boxes? None of that crap in Webkit.

Now, FireFox has its place. It’s my browser of choice – on Windows, anyway – and it’s been flying the flag for standards on that platform for some time. This isn’t about FireFox. It’s about Webkit, and the jaw-dropping goodness it can deliver.

If you’re not a web designer, this probably won’t blow your mind – but that’s because you don’t know that until recently if you wanted rounded corners, you had to go to Photoshop and draw a box. And split it into pieces. And arrange those pieces carefully on your website, and try to make them work like they’re linked. Either that, or resort to (admittedly ingenious) hacks like this. It was a pain in the ass.

The image above could not, to my knowledge, be created in any other browser. It uses rounded corners (border-radius), the aesthetics of which put other implementations to shame. It uses text-shadow. It uses box-shadow (the first implementation I’ve seen of this). It also uses multiple background images (surprisingly rare in other browsers) to provide highlights. The end result comes from a few lines of code and about 12 pixels of image. To create all that. I still can’t get over it.

I’m in love.

Oh, you wanna know what it is? Well, if you use Adium, you’ll know – it’s a message style. If you want to beta test, email me: hawkman @ the domain you’re at now.

0 Responses to “Reasons to love Webkit”

Comments are currently closed.