Safari 4, DigitalColor Meter, Hex Values, and Hidden Characters
Shortly after upgrading to Safari 4, the latest version of Apple’s web browser, I took a look at a site that I’ve been working on and noticed that the layout was off. The site looked fine for the most part, but some elements — specifically some navigational links — had been left unstyled by the site’s style sheet.
Normally, style sheet info is an “all or nothing” deal. Either your style sheet works or it doesn’t. And if it doesn’t, it’s usually because of something simple, like the style sheet’s URL being incorrectly specified. But that obviously wasn’t the case here, because part of the style sheet was working.
Furthermore, the site looked perfectly fine in Firefox, and I couldn’t remember the site ever having this issue in Safari 3. So obviously, my thoughts turned to Safari 4 as the culprit. I immediately began dreading the hours spent trawling through discussion forums and mailing lists to try and learn if style sheets were being handled differently in Safari 4. All manner of worst case scenarios were tumbling around in my imagination when, in a moment of clarity, I decided to validate my style sheet.
Sure enough, the style sheet had a few errors. Most of them were fairly straightforward, like improper values being specified for an attribute. But one error stood out to me: one of the hex color values was invalid because it contained hidden characters.
That’s when it dawned on me. When making my (X)HTML/CSS mockups, I often use of DigitalColor Meter, an OS X utility that shows you the color value of any pixel on the screen. It’s a very handy utility for web developers because it lets you get a color from your layout without having to load a mockup in Photoshop just so you can use Photoshop’s Eyedropper tool. Instead, you fire up DigitalColor Meter, hover over the area containing the color you need, press Command-Shift-C, go to your HTML editor, press Command-V, and presto — you’ve got your hex value.
It’s a pretty slick shortcut, but I’d forgotten that — for whatever reason — hidden characters are inserted into the hex value when you paste it into your HTML editor. Take a look at this screenshot taken of a recently pasted hex value in BBEdit with the “Show Invisibles” option turned on.
As you can see, there are additional characters after the “96”, “C2”, and “51.” I usually remember to remove such characters, but in this instance, I had missed one. Other browsers ignored the hidden character when they loaded the style sheet but Safari 4 choked on it; when it loaded the style sheet, any info after the hidden character was simply ignored. (I’ll let the reader decide if this is a good thing or not. But personally, I tend to think that it is a good thing when a web browser forces me to make sure that my code is neat and tidy.)
So for today’s lesson, repeat after me: Always validate your style sheet(s) and if you’re using DigitalColor Meter, make sure you clean out any hidden characters if/when you paste hex values from it into your HTML editor.