HTML Post #7: CSS & Browsers

In closing up the HTML series, we’re gonna cover stylesheets and differences between browsers.

Stylesheets

This is just a text document that holds all your style information. It is stored in a separate file so the webpages are smaller and keep traffic down on the webserver and the internet.

To set the style of all p tags, you would say:

p {
    color: green;
    text-align: center;
    background: red;
}

That would make everything inside a p tag green, centered, and have a red background. You could do the same with a div tag, table tag, img tag, or any other tag. You can also use a class name:

.christmas {
    color: green;
    text-align: center;
    background: red;
}

Any tag that has class=”christmas” would have those styles. You can combine the two:

p.christmas {
    color: green;
    text-align: center;
    background: red;
}

Now, any p tag that has class=”christmas” will have the style.

The “p.christmas” in that last example is called the selector. There are plenty more types of selectors, including “ancestor descendant” and “parent > child”. Here is more information about selectors and style properties.

Linking

Putting this in the head section will link the page with a stylesheet at http://www.example.com/style.css:

<link rel="stylesheet" href="http://www.example.com/style.css" type="text/css" />

You can even set a print css, only used when printing the page:

<link rel="stylesheet" href="http://www.example.com/print.css" type="text/css"
 media="print" />

A document can have multiple stylesheets. The second one will supercede the first if there’s any duplication. There is one exception. If the first file says this:

p.error {
    color: red !important;
}

Then the second file will have to use “!important” if it is to supercede the color.

Browser Differences

From time to time, you’ll run across something that looks fine in one browser and totally funky in another. If you run into this, do a quick search or two. Odds are that someone else has run into it too.

Many times, the answer will be an IE conditional statement or some sort of CSS Hack. The IE conditional works like this:

<!--[if IE]>
<p>According to the conditional comment this is Internet Explorer</p>
<![endif]-->

It’s really one big html comment! IE will show it. Firefox and the rest will ignore it. You can even say:

<link rel="stylesheet" href="http://example.com/overall.css" type="text/css" />
<!--[if IE 6]>
<link rel="stylesheet" href="http://example.com/ie6.css" type="text/css" />
<![endif]-->

That will tell only IE 6 to use an additional stylesheet.

<link rel="stylesheet" href="http://example.com/ie.css" type="text/css" />Linking

Minify the Web

Most websites are built for high-speed internet connections, even though there are plenty of people still on dial-up. There are many ways to make your site work much faster for all your users, dial-up and high speed alike. When a site is optimized, users are more likely to stay on the site longer and keep coming back for more.

Utilizing the browser’s cache
The browser’s cache can kill a lot of communications between the browser and the web server. To take advantage of the cache, you should limit the amount of data & code in the HTML. When a file is in the cache, the browser asks the server to send the page if it’s been modified since a certain date/time, if the browser does that.

Step 1: Use a stylesheet
Moving the style information into a stylesheet is priority #1. If you have 1500 bytes of style info inside the HTML doc and a user, on average, views 5 pages, that’s 7.5KB (3 seconds on dialup) per visit. Moving that data into a stylesheet means that the user only downloads the stylesheet once.

Step 2: Make javascript external
Just like a stylesheet, doing this will save time by utilizing the browser’s cache. Also, remove any duplicate javascript.

Minifying the javascript file is like compressing it. You can do this by hand or use one of the many tools available for free on the web. Remeber to test the minified code. A warning: DO NOT DELETE YOUR ORIGINALS. If you do, you’ll wish you hadn’t when it comes time to upgrade or fix a bug.

Step 3: Make use of CSS sprites
If you have 15 images that are on every page, that’s 15 files to download or 15 files to check for modification. Merging those 15 images into 1 larger image is fairly easy using GIMP or Photoshop. Once that is done, setting up the CSS sprites can be easy or difficult depending on how your HTML is setup.

A CSS sprite is a CSS background image using the height, width, background and background-position CSS attributes. If the image is a link, you’ll need to make a transparent image to place inside the link.

Step 4: Compress your images
This is, perhaps, the quickest and easiest way to speed up your site. GIMP and Photoshop allow you to set the compression level when saving the jpeg/gif/png. I’d suggest using 75% to 85% quality, but every image is different. You’ll have to play around with the setting a bit.

Step 5: Rework the HTML
Removing excess white space is one way. You can also rename CSS classes and element ids to a single letter, and remove any unneeded attributes altogether. This step is the most time consuming.

Other Considerations
Use only 1, 2 max, domain name(s) (www.example.com) not counting any ads/analytics you have as DNS lookups can be slow. Also, move Google Analytics and any other non-essential javascript to just before the closing body tag, that way your site shows up before the 1-5 seconds wait for that javascript.

YSlow Firefox Extension
IMO, this is the best extension for optimizing a website. It gives you a letter grade and detailed information on how to improve your score. It does require Firebug, so make sure that’s installed first.

Happy Optimizing.