Optimizing CSS Rules

Here you get to put the techniques you learned in Chapter 7, "CSS Optimization," to work and see whether you can optimize WebReference's old style sheet (see Listing 8.1).

Listing 8.1 Webreference.com's Original Style Sheet

 <style type="text/css"> <!-- form.tb{display:inline;} .h{text-decoration:none;font-size:9pt;font-family:geneva,arial,sans-serif;} .c{font-size:80%;font-family:arial,geneva,sans-serif;} .d{font-size:70%;font-family:arial,geneva,sans-serif;} dt{font-weight:bold;font-size:120%;margin-top:.8em;} .w{font-size:125%;font-family:verdana,sans-serif;color:#660099;} .NSlyr{width:119;position:absolute;visibility:hidden;} a:hover{background-color:#ffdd33;} --> </style> 

This style sheet already uses a number of techniques discussed earlier. It uses short, one-character class names (like .h and .c ), simple type selectors ( dt ), the :hover pseudo-class, and it is embedded rather than linked. But there's always room for improvement. Let's use the font and background shorthand properties and shorthand hex notation to shrink it even further:

 <style type="text/css">  <!-- form.tb{display:inline} .h{text-decoration:none;font:9pt geneva,arial,sans-serif} .c{font:80% arial,geneva,sans-serif} .d{font:70% arial,geneva,sans-serif} dt{font:bold 120% serif;margin-top:.8em} .w{font:125% verdana,sans-serif;color:#609} .NSlyr{width:119;position:absolute;visibility:hidden} a:hover{background:#fd3} --> </style> 

Using these shorthand properties, you save 99 bytesfrom 449 to 350 characters . Note that because the font shorthand property requires a font-family value, you may have a problem with your definition lists if the user sets the font-family to " sans-serif ." The dt s will be serif, and the dd s will be without serifs. To get around the problem, you could set the body to " serif ," like this:

 <style type="text/css">  <!-- body{font:1em serif} form.tb{display:inline} .h{text-decoration:none;font:9pt geneva,arial,sans-serif} .c{font:80% arial,geneva,sans-serif} .d{font:70% arial,geneva,sans-serif} dt{font:bold 120% serif;margin-top:.8em} .w{font:125% verdana,sans-serif;color:#609} .NSlyr{width:119;position:absolute;visibility:hidden} a:hover{background:#fd3} --> </style> 

But as it turns out, using longhand for the dt properties and leaving out the font family is shorter (360 versus 364 characters):

 <style type="text/css">  <!-- form.tb{display:inline} .h{text-decoration:none;font:9pt geneva,arial,sans-serif} .c{font:80% arial,geneva,sans-serif} .d{font:70% arial,geneva,sans-serif} dt{font-weight:bold;font-size:120%;margin-top:.8em} .w{font:125% verdana,sans-serif;color:#609} .NSlyr{width:119;position:absolute;visibility:hidden} a:hover{background:#fd3} --> </style> 

This is a savings of nearly 20 percent over the original (449 to 360 characters). You could further optimize this style sheet by grouping the font family of three styles and setting their sizes separately:

 <style type="text/css">  <!-- form.tb{display:inline} .h,.c,.d{font-family:arial,geneva,sans-serif} .h{text-decoration:none;font-size:9pt} .c{font-size:80%} .d{font-size:70%} dt{font-weight:bold;font-size:120%;margin-top:.8em} .w{font:125% verdana,sans-serif;color:#609} .NSlyr{width:119;position:absolute;visibility:hidden} a:hover{background:#fd3} --> </style> 

This takes you down to 348 characters. You could save even more by using generic font families, one smaller font size, and the font shorthand property (see Listing 8.2).

Listing 8.2 Webreference.com's Optimized Style Sheet

 <style type="text/css"> <!-- form.tb{display:inline} .h,.c,.d{font:80% sans-serif} .h{text-decoration:none} dt{font-weight:bold;font-size:120%;margin-top:.8em} .w{font:125% sans-serif;color:#609} .NSlyr{width:119;position:absolute;visibility:hidden} a:hover{background:#fd3} --> </style> 

Now you're down to 276 bytes, over 38-percent smaller than the original. We like the look of the previous one, however. Did you notice that this example combined grouping and a shorthand font property? Note that in the actual style sheet, you would remove the returns (creating up to 255-character lines) and any unnecessary spaces. By using cascading, inheritance, grouping, and shorthand properties, you can shrink unoptimized CSS by over 50 percent.