Follow me on Twitter

CSS Wizardry Hardcore Optimisation


[Content]

Hardcore optimisation

Hardcore what?! Nope, it really is code — nothing as exciting as you were hoping for. This is just a useful little tip that can trim five bytes off of every absolute link in your documents. This might not sound like a lot at all, but over a large enough site this can amount to quite a bit, and it’s alarmingly simple.

Original link

Take the following hyperlink: <a href="http://google.com/">Google</a>. That is an absolute link to Google’s homepage. However you can safely lose five bytes from that…

Google

New link

The following will work in exactly the same way: <a href="//google.com/">Google</a>. That will take you to the same place as before — Google’s homepage.

Google

This not only works on the href attribute, but also on the src attribute too. In fact, anywhere where you’d normally use http://... you can now use //... as they both resolve to the same thing.

Update

Wes Mason, colleague, has since pointed out that this simply uses the same protocol as the current URL, therefore if you’re linking from a http:// domain to a https:// domain you will need to explicitly define that in the link, //... won’t work in this instance.

[Sub Content]

From the Toybox

Twitter

Resources

Web Design+ — Tips and advice on web standards development Web Design+ is a freely available one-stop document for developers to get advice and tips on web standards development.

Typogridphy — A Typographical and Grid Layout CSS Framework Typogridphy is a CSS framework constructed to allow web designers and front-end developers to quickly code typograhically pleasing grid layouts.

Clecktionary — Cleckheaton’s Dictionary Clecktionary is a tongue in cheek homage to my hometown Cleckheaton. It can be enjoyed by anyone, but is better appreciated by a Cleck’ native.