In this post I’ll show you the one and only correct way to use sprites and the very little benefit if you use sprites the wrong way.

It’s in everyones mouth but a lot of people do not understand fully what sprites are supposed to optimize. Well we want so badly to reduce the HTTP requests but as I’ll show you, a lot of people do not understand how to write efficient selectors for sprites.

Here’s a meaningfull chart I’m going to explain a few pixel down.

The first “wrong way” uses multiple images and no sprites and show you what you might except. For each image a request gets done. 22ms were used.

The second wrong way shows you something, a lot of people wouldn’t have guessed. For each CSS selector a request is made! The reason is, that the Browser does not know that the image has been already requested and requests it again. The browser then, when it does it’s pre-processing understands, that tghe ressource has been already requested and grabs it ideally from the browser-cache. However that’s just 4ms faster than without sprites.

.icon-mail 			{ background: transparent url(images/sprite.png) 0 0 no-repeat }
.icon-mail-add 		{ background: transparent url(images/sprite.png) 0 -40px no-repeat }
.icon-mail-attach 		{ background: transparent url(images/sprite.png) 0 -80px no-repeat }
.icon-mail-delete 		{ background: transparent url(images/sprite.png) 0 -120px no-repeat }
.icon-mail-edit 		{ background: transparent url(images/sprite.png) 0 -160px no-repeat }
.icon-mail-error 		{ background: transparent url(images/sprite.png) 0 -200px no-repeat }
.icon-mail-go 			{ background: transparent url(images/sprite.png) 0 -240px no-repeat }
.icon-mail-link 		{ background: transparent url(images/sprite.png) 0 -280px no-repeat }
.icon-nail-open 		{ background: transparent url(images/sprite.png) 0 -320px no-repeat }
.icon-mail-open-image 	{ background: transparent url(images/sprite.png) 0 -360px no-repeat }

The third and correct way uses one selector containing the sprite and a few others to change only the position of the sprite. As you can see in my fancy chart, the benefit is: 4ms for the whole test document. Thats 5.5 times faster than the first example and unbelievable 4 times faster than the second example, which uses the very same sprite!

.icons { background-image: url(images/sprite.png); background-repeat: none }
.icon-mail 			{ background-position: 0 0 }
.icon-mail-add 		{ background-position: 0 -40px }
.icon-mail-attach 		{ background-position: 0 -80px }
.icon-mail-delete 		{ background-position: 0 -120px }
.icon-mail-edit 		{ background-position: 0 -160px }
.icon-mail-error 		{ background-position: 0 -200px }
.icon-mail-go 			{ background-position: 0 -240px }
.icon-mail-link 		{ background-position: 0 -280px }
.icon-nail-open 		{ background-position: 0 -320px }
.icon-mail-open-image 	{ background-position: 0 -360px }

ps: You need something like firebug or httpwatch to check it for yourself.

Everybody is talking about CSS fontstacks and there are plenty of good lists/combinations out there but do not use them carelessly – like the prototype.js guys did (@see screenshot). DO NOT use «Helvetica Neue» for your bodycopy or fontsizes smaller than 18px! It is a narrow/condensed font – not made for continuous text, nor small text. Use it only for headlines with 18px++.

There are some selector hacks out there, but I don’t like them – ie: (@media screen and (-webkit-min-device-pixel-ratio:0) {}). My personal favourite is done with Prototype because I use it a lot and it is pretty simple:

<link rel="stylesheet" type="text/css" media="none" href="/css/safari.css" id="safari" />
<script type="text/javascript">
	// matches all safari/chrome versions
	if(Prototype.Browser.WebKit) {
		$('safari').media="all";
	}
</script>

If you set the media attribute to none – no media device will display it. By adding the little if statement, you can check if the Browser is WebKit, which is the engine name of safari or chrome and alter the media value to all.

If you do not use prototype, you can do it like this:

<script type="text/javascript">
	// targets safari 3 - not 2!
	if(window.devicePixelRatio) {
		document.getElementById('safari')media="all";
	}

	// targets all safari or better said webKit engines
	if(navigator.userAgent.indexOf('AppleWebKit/') > -1) {
		document.getElementById('safari')media="all";
	}

	// prototype way + targeting old and new webKit with two stylesheets
	if(Prototype.Browser.WebKit) {
		var mySafari = (window.devicePixelRatio) ? 'safari3' : 'safari2';
		document.getElementById(mySafari)media="all";
	}
</script>

Note, this method shouldn’t be used for “accessible” Websites, because it relies on javascript. You can do it then serverside as well by “sniffing” the UserAgent from the HTTP Request and add your little switch there – whereas this isn’t a 100% safe method though, because some people alter their UserAgent strings and there are tons of vendors/versions thus your detection may fail from time to time.

An alternative to this way is to load the needed script on the fly, so you can reduce a HTTP Request, by writing the link tag dynamically to your document. However – the describe method above is shorter

According to the Specification (4.1.3 Characters and case), identifiers can contain only alphanumerical characters [a-z0-9] and – big surprise – ISO 10646 characters U+00A1 and higher, plus the hyphen (-) and underscore (_).

That’s totally new to me and I’ve never ever seen someone who uses special characters like that for identifiers. Actually this is really bullshit, because no Validator supports identifiers like that. For instance: when you are going to use the ampersand character, HTML expects an html-entity and will fail. The Validation will not fail, when you use the copyright sign (�?© = U+00A9) – but it will fail, when you not write the ampersand as html-entity (&)

Here is an example CSS which will be displayed correctly in most browsers (ff2, ie7, opera9, safari3):

.A\&A {
    background-color: #D1EDEC;
    border: 1px solid #92C0DA
}
.A\26B {
    background-color: #D1EDEC;
    border: 1px solid #92C0DA
}
.A\000026C {
    background-color: #D1EDEC;
    border: 1px solid #92C0DA
}

Nevertheless: it will fail the �all mighty� validator.w3.org test, when the class names are assigned to elements (because of the ampersand). I perfectly understand why the ampersand fails, but IMHO I think it shouldn’t be allowed plus [a-z0-9] and hyphens should be enough to describe the class/id.

If you have a layer which has the css property height: inherit; and also a repeating background image, you might find yourself lost with opera. You try and try so hard but you can’t get the background work. You might want to delete the height: inherit; property and eventually everything works fine. This may happens, when you use floating layouts. This applies even so, if you have no height defined for the parent div container.

It took me about 30 minutes to figure this out.
I didn’t needed the height property and so I am lucky

Yesterday I’ve downloaded and tried to install DSL (Damn Small Linux) as X as well running it as Live-CD. The latest release from DSL uses for somehow an old Qemu release and I couldn’t start the graphical interface. After downloading the latest Qemu release for Windows and replacing some files witting the embedded version I was able to start it. Actually I liked it. It’s a handy dist for USB-like-devices. I wish my OpenWRT would run in graphic mode and the router were easier to extend with an USB-HD. That would be really nice – something like DSL on my Linksys with an additional 1GB USB Stick. Well, there is a web server on OpenWRT but I configure everything via ssh. However when I checked out Dillo, I figured out there’s no CSS support and no java script. It gave me a good insight into how sites can look like. When I develop sites, I use to check them with JS, CSS and images disabled – but I never thought that there are still some browsers besides lynx, who run with minimal features like Dillo. A lil bit annoying was the non ability to access my dvd from witting DSL. I recon it’s because of the emu but I am not pretty sure

Today I’ll try to unlock my PDA (MDA Pro/HTC Universal). I’ve still found a patch some days ago to do it – but I guess it can be tricky. And no – I will not try to install some linux dist on it I’ll be in London over New Year and got a second SIM card but atm my MDA doesn’t like non t-mobile cards. I really hate manufactures/retailers for »locking« things.

Another funny thing will be, to write a redirect for a WP Site. Of course it’s pretty easy to simply redirect but I want 301 Redirects for every article. I guess it will take an hour including moving WP to another domain. I have something on my mind but I guess I have to check out the mod rewrite cheat sheet again. Capturing simple Get Requests is easy, but Permalinks,… I never tried to capture it.

Capture > Captcha! Today I’ll write a little captcha class for my work – because we still need such class – to inhibit bots spaming some sites. I’m not really sure how to do it – I mean to write it sophisticated and 100% bot save. There will be no 100% I guess but it’s worth a try.

Don’t ask me why, but Damiano called me a womanizer last weekend and this word was allways on my mind until then, so I’ve choosen the probaly most idiotic name ever: womenized!

Anyhow I have to credit someone: The owner of the picture with the very nice woman: Slastyonoff from domai.com because I have asked him once to use this wonderfull picture of Aneli and he permitted it! Thanks mate!

There are still some bugs within the template tags for wordpress, or better said: I have to bug fix some stuff I’ve did. But therefore live journal and open ID users can also post with their ID on my blog;) I love the open ID feature and *big props* to the creator of this wonderfull plugin!

Whatsoever! I hope you like my new WP theme!

This article is about an alternate rollover technique. It’s not very popular until now, so I’ll try to promote it a little bit, because I like it. The regular technique to change an image, is to use JavaScript. However: This technique requires instead of JavaScript only some CSS. Read the rest of this entry »