It’s been a few years since I first found out PNG images with alpha-channel transparency work in some Web browsers. What’s more, 8-bit PNGs are very similar to GIFs but they’re often a little smaller in file-size and they’re not a proprietary format. Very cool. Since then, I’ve used PNG images for logos and just about everything else that doesn’t need to be a JPEG.

Using PNG definitely has come with some frustrations though. Mainly, 24-bit PNGs that use alpha-channel transparency don’t work in IE 6 but you can get around that fairly easily with some simple JavaScript. On a side note, you should definitely check out Angus Turnbull’s IE PNG Fix. It even works with background images. Nice, dude… very nice!

Transparency aside, another major issue has been that even if you get the alpha channel to work, the colors are always off. Well, in most browsers anyway. Safari and Opera seem to be the only two that actually followed the rules for PNG support and even they don’t do it perfectly. Firefox supposedly handles the color profiles correctly too but I haven’t seen that it does. Because most browsers choke on PNGs color profiles, there’s one thing you can do to make things look right: remove the color profile.

Remove the color profile, eh? I don’t know about you but that sounds about as simple as brain surgery to me! Luckily, it is much simpler. There are a few tools out there that do this but I’ve had pretty good luck with pngcrush so I’m going to focus on that. According to the website, it works on Mac, Linux, and Windows but I’ve only tried it on Mac OS X.

I installed it using the MacPorts package manager (formerly DarwinPorts) and it honestly couldn’t have been easier. In a Terminal window, type,

sudo port install pngcrush

and that’s it. You might want to do a sudo port selfupdate first just to make sure you’ve got the latest and greatest MacPorts too. After you’ve got it installed, the following command will remove the color profile from any PNG:

pngcrush -rem gAMA -rem cHRM -rem iCCP -rem sRGB original.png fixed.png

That’s a whopper of a command to commit to memory. Luckily, you can do a couple things to make using pngcrush a little more convenient.  Create an alias for the command in your .bash_profile or the equivalent for your shell.  I used the following line:

alias crush='pngcrush -rem gAMA -rem cHRM -rem iCCP -rem sRGB'

This makes it very easy to pop open a Terminal window and do:

crush original.png corrected.png

If you’re a Mac user running Tiger or above, Ryan Schenk built a great little Dashboard widget called PNGpong that lets you drag and drop PNG onto it and either create a new image or optionally overwrite the original.  Using PNGs on the Web just became a whole lot easier!

I’m not much for initial drop caps but if the design you’re building uses them, personal preference doesn’t matter. I’ve often seen drop-caps implemented by wrapping the first letter of the paragraph in a span tag and giving it a class of drop-cap or something similar. If the design changes though and doesn’t include drop-caps any longer, having all of the extra markup in your content doesn’t really make sense anymore.

A better, cleaner way to go about it is to use the pseudo elements built into CSS2. There are four useful pseudo elements, :first-line, :first-letter, :before, and :after. The before and after elements are some of my favorites but, of course, no version of Internet Explorer supports them. Amazingly enough, IE does support the first-line and first-letter pseudo elements.

Assuming you would only want a drop cap on the first paragraph, give your first paragraph a class of drop-cap, unless you want all your paragraphs to have them. Then, include the following in your CSS:

p.drop-cap:first-letter {
   float: left;
   font-size: 3em;
   line-height: 1em;
   padding-right: 0.125em;
}

A friend of mine was talking with me about sizing text for the Web and how there are seemingly thousands of articles out there but few truly useful solutions. I’ve recently come across one that I feel ties together some very reasonable approaches, including the idea of establishing an initial stylesheet that overrides browser defaults for things like heading padding, margins, etc. It’s definitely worth a read!

CSS techniques I use all the time –The Montoya Herald