Idle Hacking

I thought it might be useful to share some techniques I’ve started to adopt when building a website’s CSS. These range from reducing the number of requests to keeping it easy to develop for multiple browsers.

Performance topics:

Technique 1:
First know, your CSS less is always better. For example, a lot of times I find myself writing:

margin-left:0px;
margin-right:10px;
margin-top:5px;
margin-bottom:8px;

This can be converted to:

margin: 0px 10px 5px 8px; /* top, left, bottom, right */

Doing this can reduce the size of your CSS file, making it load faster.

Technique 2:
Use conditional comments to support IE a slightly modified approach to including a separate style sheet. Typically, you will see people import a completely new CSS file. For example, this is what blueprint suggests.

This works great, but IE takes a performance penalty, because it has to make 2 requests instead of one. Think about this for a second and it’s even worse when you consider IE 6 already limits the number of concurrent requests to 2. Let’s say your screen.css includes a graphic, either that image will be queued up behind the ie.css or ie.css will be queued up behind that graphic. Either, way it’ll degrade an already slowish browser. It’s great to want to focus on the new browsers, but consider your users for a minute and realize that they might not point the finger at the browser as you’d like and instead at you and your application. Keeping that in mind, we can deal with internet explorer and still provide an optimal experience to our users, by putting into use 2 features. One conditional comment, and two CSS selectors. If instead of including the second style sheet we copy the contents of ie.css into the bottom of screen.css, making the following changes:

/* ie.css */
body {text-align:center;}
.container {text-align:left;}
* html .ie .column {overflow-x:hidden;}
* html .ie legend {margin:-18px -8px 16px 0;padding:0;}
.ie ol {margin-left:2em;}
.ie sup {vertical-align:text-top;}
.ie sub {vertical-align:text-bottom;}
html>body .ie p code {*white-space:normal;}
.ie hr {margin:-8px auto 11px;}

Now each of the original IE specific rules are targeted at IE only. We have only one other issue to solve, how to include an “ie” class name in our DOM without exposing it to our other browsers. The solution: conditional comments.

  
    

     Your site content goes here

    
  

This adds the DOM elements .ie and .ie6, for internet explorer 6 and .ie for 7 and leaves them out for gecko, webkit, and opera. From this technique we got one less HTTP request and easier way to manage IE compatibility in our CSS documents.

Technique 3:
Improving IE CSS can be painful. One of the simplest additions to blueprint is to use zoom:1 effectively. First off, what is zoom:1? zoom is a property supported by IE that allows you to zoom an element. zoom:1 has the effect of giving the element layout, making it appear on the page. Generally, if you don’t see an element or region of your page after floating another element left or right. Zoom the elements parent will trigger it to reappear. Here’s what I add to my ie.css:

.ie div { zoom:1; }

Software CSS, IE, IE6, Performance, zoom:1