kaioa.com

A simple sprite sheet

Update: Good news, everyone! A proper proposal for this kind of thing is already on its way. :)

CSS sprites are a nuisance

While CSS sprites offer nice performance benefits (less connections/overhead), they are troublesome in every respect. Putting lots of tiny images with different dimensions into one bigger image is fiddly and very hard – np-hard in fact. But that's the smallest issue. It doesn't need to be perfect after all. Deflate will happily squish all that extraneous white-space to virtually nothing.

One of the real problems is CSS. It just isn't flexible enough to let you do everything you might want to do with your sprite sheet. For example repeating parts of the image isn't possible. And if you want to display a sub region of an image in the upper right of some element, it only works if that sub region is in the lower left of the sprite sheet. So, the best thing you can do is to use elements in the size of the sub region and use background-position to slide the image around, but that usually means extra markup for something that should be very simple.

But it doesn't stop there. The real nightmare is maintenance. A year or two and several iterations later it becomes very hard to figure out which parts of the sheet are used. Where can you add one? Which one can be removed? How many places do you have to fix if you move this column a bit up? It all becomes a mess of fuzzy uncertainty.

CSS sprites are a huge time sink. They waste my time, they waste your time, and they also waste the time of millions of other front-end developers. It's about time to do something about it.

It's a trap

I just trashed my history again. Same accident as last time. Was it my fault? Well, herein lies the problem. I pressed a specific key sequence which triggered the delete. However, it's very similar to a key sequence I'm using a dozen times a day. The only difference is the order of one down and one release key event.

But let me explain it a bit first. If you hold the Control key you can jump from one word to the next with the left and right cursor keys. If you also hold Shift you can quickly highlight a couple of words. I often highlight parts of the URL like this in the address bar. Then I press Delete and then I either add something new or press Return right away.

The problem is that I can trigger Firefox's Clear Private Data dialog with Control+Shift+Delete (i.e. if I don't release Control or Shift quickly enough). If I now press Return right away, which isn't all that unusual if you've done it a million times before, it will delete my history (among other things) instantaneously.

Case in Point

Caching is a very hot topic these days. Aggregation of scripts and style sheets, compression, setting Expires and Last-Modified headers. All of that is about improving loading times and reducing the amount of traffic. It's pretty smart stuff and it works pretty well.

There are always two cases to consider: a user with a non-primed cache and a user with a primed cache. If the cache is primed, the user will need to download far less files, because most of it is already cached. Scripts are the same, style sheets are the same, lots (or even all) images are the same, and maybe even the document itself is the same. Well, that's the deal basically.

Yesterday I noticed something odd, however. I visited some page I visited just the day before and all those images were reloaded. I also observed this on a lot of other websites I visit regularly. Of course I checked the headers and everything looked fine. Pretty odd. Especially if you consider that I already ramped up the cache size to 150mb ages ago.

It's not that difficult, is it?

The diagram on the right illustrates how things everywhere are. Everywhere except Firefox, that is. For reasons unknown to me Firefox does the exact opposite of what would have been intuitive. I.e. increase the font size with up and decrease it with down. Firefox, however, does it the other way around.

I'm using Firefox for years and I still mix that up over and over again. Today was the first day I became aware of that though. After failing to increase the font size I stopped reading, looked at the mouse wheel, and wondered why it didn't increase the font size. I moved the mouse wheel up, didn't I?

Since Opera 9.5 started to support :last-child, I changed the markup/styling of the reports generated by my PNG batch processing utility. Finally the markup was down to an absolute minimum. There wasn't even a single extraneous character (except for new lines... for the bare minimum of legibility). I was really happy with the simplicity/elegance and lived happily ever after.

Well, not quite.

Two hours ago I did a checkout and after the tool processed the 2 new/changed files I took a look at the report. Instead of 682 rows there were now 684 rows, which happens to be just enough to trigger the bug on my machine. Firefox doesn't render the page in one go anymore, and whenever it stops elements which happen to be the last element right now get the :last-child rule applied. It stays this way even if the layout changes (e.g. by loading the rest or via JavaScript).

This means that you cannot rely on :first-child, :only-child, or :last-child. You only have good chances that they work with small test cases. With about 100kb of markup (or even 50kb if the site loads slow) they simply won't work reliable anymore. And things like :nth-child(), :nth-last-child(), :nth-of-type(), :nth-last-of-type(), :first-of-type, :last-of-type, :only-of-type etc. will be broken in a similar fashion once they are supported.

And if that wouldn't be bad enough already, this bug is very old:

Bug 254598 – Firefox 9.1 extend :first-child styling erratically (reported: 2004-08-06)

Which is a duplicate of:

Bug 73586 – matching of :first-child, :only-child, and :last-child not dynamically updated [SELECTORS-DYNAMIC] (reported: 2001-03-27)

The sprite sheet:

As APNG: (You need Firefox 3 Alpha 7 or newer, if you want to see the animation)

MNG was supported in some nighty builds many moons ago, but it never went into a stable release. The MNG specs are sort of complex and the lib was too big. The growth of the executable couldn't be really justified with this little feature. Especially since most browsers don't support MNG at all and therefore it isn't used anywhere.