CSS files are the most downloaded parts of a website, as they are usually loaded with every webpage. Also, CSS files usually contain a lot of, from a technical point of view, unnesseccery characters. Therefore it is a good idea to optimize your CSS file(s) for faster loading. A good tool to remove pretty much all spare characters is the CSS compressor, which can reduce the file size of your CSS up to 25%. Of course, you should always keep a “source” version for modifications.

That tool of course is not able to optimize your CSS semantically, this must be done by you. Semantic optimization means that you should scrutinize your CSS file for redundancy. Do you possibly define background-image, background-position and background-repeat separately? Merge them into a single statement like background: #fff url(image.png) top left; — you need the first ones only for overwriting a single other property. (That’s why they are called Cascading Style Sheets.) Same goes for margin, border and padding with their -top, -right, -bottom, -left: Use them only for overwriting. In all other cases, merge them into one statement: For example, margin: 5px 2px; will assign a margin of 5px to the top and bottom, and 2px to the left and right. margin: 5px 2px 3px; will assign a margin of 5px to the top, 2px to the left and right, and 3px to the bottom. And margin: 5px 2px 3px 4px; will assign a margin of 5px to the top, 2px to the right, 3px to the bottom, and 4px to the left.

Other possibilities: Consider using relative paths to images instead of absolute ones. Remove unneeded definitions (or comment them out before sending them through the compressor). Combine multiple selectors in a single one (e.g. if you have #content_left a, #content_right a it could be possible to use #content a instead).

Optimizing your CSS by compression and good semantical style will shrink your CSS by 30-60%. This will make the loading of a webpage from your website noticeably faster, even with a fast connection.

I’m happy to announce the public release of the Codelog theme 0.1 for WordPress. The Codelog theme is a stylish and very lightweight two-column theme. If plain blogging is what you do, this theme is for you. The only features of this theme are fast loading, clean code and the elegant look. Ok, it also comes with multi-language support (German translation already included). But that’s it, less is more!

If you like the Codelog theme, download it and give your blog a new look!

Hello World indeed! This is my new little notepad for code snippets and ideas. I’ll post stuff on an irregular basis, just as I feel like it. Maybe somebody finds the chunks posted here useful. If so, take them, use them, have fun. For all code and other stuff found on this website, the “No problem, Bugroff” license applies (although I don’t agree with the GPL bashing in the license text), unless explicitely noted otherwise. Attribution is apprechiated, though not neccessary.