Extreme HTML Optimization: CSS

Extreme HTML Optimization

CSS

By purging your pages of FONT tags and other presentational markup, you can save a surprising amount of bytes, while separating style from content. By substituting a style sheet for our front page formatting, and using CLASS=stylename inside TDs I saved a couple K off the home page. With the majority (over 80%) of our browsers using CSS-compliant browsers, the switch was relatively painless. Here's a sample style sheet from WebRef's home page:

<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;}
-->
</STYLE>

Inline FORMs

There are four techniques of interest here. The inline form class can be used to suppress the return below the closing </FORM> tag in newer browsers, avoiding the </TD></FORM></TR> hack commonly in use to suppress form spacing. Improperly nesting tags like this can cause problems for newer standards-compliant browsers in rendering CSS and loading external JavaScript files. See JavaScripting Netscape 6 for more details.

Styled DT

In the center column of our front page we use two descriptive lists (DL), one for the newest WebRef content, and the other for internet.com content. We used to format these lists like so:

<DL>
<DT><B>Headline</B>
   <DD>Description<P>

Besides being invalid HTML this takes more code than necessary, especially with longer lists. Using a style sheet you can achieve the same effect, with less code:

<STYLE TYPE="text/css">
<!--
DT{font-weight:bold;font-size:120%;margin-top:.8em;}
-->
</STYLE>
...
<DL>
<DT>Headline
   <DD>Description

The right way to do this in XHTML is to close every tag, and make them lowercase:

<STYLE TYPE="text/css">
<!--
dt{font-weight:bold;font-size:120%;margin-top:.8em;}
-->
</STYLE>
...
<dl>
<dt>Headline</dt>
   <dd>Description</dd>

CLASS vs. SPAN

To style toolbars etc. we used to use <SPAN CLASS="stylename">...</SPAN>. This is fine, but if you are using tables to layout your page there's a better way. Style the TD where the text resides like this:

<STYLE TYPE="text/css">
<!--
.c{font-size:80%;font-family:Arial,Geneva,sans-serif;}
-->
</STYLE>
<TABLE><TR><TD CLASS="c">...

Notice that we use relative sizes for our fonts. EMs or percentages are more flexible than fixed point sizes, and allow users to adjust the size of your fonts at will. Rule-based design can be used in multiple instances, unlike pixel-based design, saving space.

Short Style Names

By using one or two-character style names you can save space, especially when you refer to multiple styles.

JavaScript

For our news flipper we optimized our JavaScript (short variable names, no spaces etc.) and put it at the end of the page, called onload. This allows the page to display first, then load the JavaScript. Using a doc.write to load an external .js file will shrink your page even further, but Netscape 6 can have problems with dynamically written external files. Our optimized news flipper is now less than 3K in size, including ten headlines.

Created: Jan. 10, 2000
Revised: Mar. 19, 2001

URL: https://webreference.com/authoring/languages/html/optimize/part2.html