Google recently came out with a new tracking code for its Analytics service. It has a cool new feature, but validators also choke on it.

Let’s Fix the Code

Virtually all browsers in use today understand that they should ignore what’s in between <script> tags. For the most part, we don’t have to insert comment tags <!-- --> any more. Unfortunately, most validators still choke on what they find in between script tags. So technically, you could leave comment tags out, but in practice it’s very annoying to have the validator spitting back a big pile of errors.

To “fix” Google’s tracking code (which in theory should be perfectly fine) so that it doesn’t result in validation errors, simply add comments around the contents of the script tag, like so:

A Cool New Feature

The nicest feature of the new Google Analytics tracking code is that it has Javascript code that automatically detects whether the page the code is on uses a secure, https:// connection or a normal, http:// connection. No more having to write your own detection code to include a different script.

Personally, I think adding comment tags is a small price to pay to get a tracking code that validates and automatically detects the transfer protocol. Thank you, Google.

If you haven’t learned to do a CSS rollover effect yet, it’s time to learn—they’ve become a main-stay of modern web design and do just about everything better than a Javascript rollover (there are a few exceptions, which I will discuss briefly later)

The Basics of a CSS Sprite Rollover

The basic concept of a CSS sprite rollover is to assign a background image to a link. This image contains the possible states of the link rollover. Based on which “state” is being used, we shift the background image around to display the correct portion of the image.

For example, the Lime Blog RSS feed icon is a CSS sprite rollover. Here’s the image used to create the effect:

In the default state of the link, I display the normal version of the RSS logo. The rest is hidden beyond the borders of the link (illustrated in black) like this image illustrates:

In the highlight or selected state of the link, I use the same RSS logo as a background, I just shift it so that the hover state is displayed and the default state is hidden:

Here’s the basic HTML needed:

And here’s the important part of the CSS:

Benefits of a CSS Rollover Using Sprites

There are many benefits to using CSS sprite rollovers, especially for most simple rollover applications:

• Reduce page load time

  By reducing the number of file requests and the overhead associated with each file, you reduce the load on your server, resulting in a snappier site.

• Automatic pre-loading of alternate states

  The alternate states are included in just one image that is loaded for the initial state. Once the initial state is loaded, all of the states are loaded.

• Simple updates

  You only have one image file and one CSS file to edit.

• Clean, semantic HTML

  Most Javascript rollovers result in bloated, ugly code with behavior and presentation mixed in with the content.

• Improved accessibility

  Some people have their Javascript and/or images disabled. Rollovers based solely on Javascript would break, whereas the CSS rollovers would degrade gracefully.

Shortcomings of CSS Sprites

There are a few shortcomings to using CSS to execute rollovers:

• Lack of transition effects

  Using animated .gifs, you can create some transitions, like the tabs at the bottom of the page on Corda.com, but you have to use separate images and they get big quickly.

• Limited states

  For some complex applications, it’s nice to have multiple states to an object, and CSS is limited to link, visited, hover, and active.

For most intents and purposes, however, CSS is lighter, faster, and cleaner for a rollover, and a sprite-based rollover is one of the best CSS rollover methods.