Out of the shade and into the shadows

Following a recent rethink about my default web browser, I’ve been enjoying the speed and feel of Safari again.  Firefox 2 may well be almost infinitely extensible, but it’s not designed specifically for the Mac, and that makes it work like cold porridge sometimes.  The interface is far from native, the widgets it uses on web pages are unconvincing, and it’s rather sluggish.  Safari on the other hand flies along nicely, and while still not coping at all with some odd bits and pieces that make the vast majority of web-based text editors work (like FCKEditor for instance, or the one used in WordPress), it does have some redeeming qualities in some of the added extras it’s bundled in.

One such extra is the ability to make search boxes look and operate like other search boxes found in Mac OS X.  Not only are these more beautiful than the standard boxes, but they add more functionality into it as well.  The magic key here is type=”search”.  Safari recognises this as a special search box and does some clever stuff with it.  Other browsers just ignore it, rendering it as a normal text box, which is what you’d want since none of them are clever enough to know what to do with it.

Safari search box

Another cool ‘hidden’ feature is text shadows.  Adding in text-shadow: #000 0.1em 0.1em 0.2em; to your CSS will add a nice shadow underneath the text.  You can tell it what colour the shadow is, its x- and y-offset, and the amount of blur given to the shadow.  It’s all pretty neat, and can transform an already good design into something stunning.  This example below (thanks to porneL from the my.opera.com community for the image) shows a side by side comparison of what text-shadow can do.  The use of shadows is subtle but very effective in bringing the text off the page slightly and bringing increased clarity.

Safari text shadow

Some have decried Apple’s non-standard way of dealing with certain web objects, since they do not conform strictly with the W3C models.  Poppycock.  It doesn’t break other web browsers, and transforms the appearance when viewed on Safari.  True, this means that you only get the full experience on that one browser, which is a bit limiting for your target audience, but Safari isn’t the first (or indeed the only) browser to implement something that only works in that one browser.  Mozilla uses -moz-border-radius to add rounded corners to boxes, and there are numerous IE-only bits and bobs that people have used over the years (much to the annoyance of Firefox users, admittedly).  What marks this out though is that it’s a good implementation and doesn’t break the appearance in other browsers.

I like it.  I’ll be using it more.  You should too.  You should also be using a Mac, but that’s another story…

One thought on “Out of the shade and into the shadows

  1. Safari does sound like a very nice browser, however – like you point out – Firefox does have the cross-platform thing going for it 😉 Also, I really don’t know (as a web developer) how you’d manage to live without something like Firebug. At the end of the day, I’ll take “useful” over “pretty” any day of the week (and you know when I combine two metaphors involving days of the week, I’m being serious!)

Leave a Reply

Your email address will not be published. Required fields are marked *