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.

<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

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.

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

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.

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!

The good things about this one are:

• no need of preloading images
• no JavaScript required
• you can easily provide alternate Text-Links

The main trick is, to change the background position of an image. This can be done via a hover state in css:

#myid {
background-image: url(someImage.jpg);
background-position: top;
}
#myid:hover {
background-position: bottom;
}

The only thing you need to do, which is the extra time, you have to create and provide all roll over states in one single image. And you need to define for your �a� element a height. However, this method is kind of cool, because it works with mostly all new user agents and I like sites working without CSS, so we have to provide some alternate Text-Links. This can be done like this:

Text-Link

And the CSS:

#nav strong {
position: abosulte;
top: -4000px;
bottom: -4000px;
}

If you wonder about the absolute position, then let me tell you, that “display:none” is no be nice method for screenreaders and also provides some possibility for alternate positioning.

To see tis method in full effect, see this example(opens up in a popup).