Combining IDs with Multiple Classes

Classes are especially useful when you wish to have control over a number of elements. Consider
the following drinks list, the source code for which is available in the drinks.html file:
<ul id="drinks">
<li class="alcohol">Beer</li>
<li class="alcohol">Spirits</li>
<li class="mixer">Cola</li>
<li class="mixer">Lemonade</li>
<li class="hot">Tea</li>
<li class="hot">Coffee</li>
</ul>
Note first that the unordered list (<ul>) is given a unique ID. Thus, id="drinks" will not be
used again on the page at any time, allowing that particular list to be styled uniquely. Note also
that Beer and Spirits are within list elements defined with class="alcohol", Cola and Lemonade
are within list elements defined with class="mixer", and finally Tea and Coffee are defined in
list elements with class="hot". This allows each drinks group to be treated individually.
The CSS declares that the default text for that list will be red, so any list items without a
class attribute will default to red text:
/* Drinks list styling */
ul#drinks {
color:#F00;
}
Next, the classes for each drink type are defined with unique shades of gray for font color:
/* Define alcohol color */
.alcohol {
color:#333;
}
/* Define mixer color */
.mixer {
color:#999;
}
/* Define hot drinks color */
.hot {
color:#CCC;
}
The result sees the list of items move through shades of gray (defined by the classes).
Any further drinks added to the list can be assigned to a particular drinks group, such as
<li class="alcohol">Wine</li>. Thus a logical color key is established using simple CSS classes.


**■Tip Before adding a class to an element, be sure that the element needs it. Too often web designers
overuse classes when the (X)HTML is already providing more than enough hooks for the CSS. Make sure that
the element cannot be targeted using a descendant selector or other method before opting for a class. This
will help keep your code lean and make future redesigning much easier.

Installing multiple versions of browsers

One of the big problems when it comes to web design testing is that some browser manufacturers
don’t enable you to run multiple versions of their products. The two biggest
culprits here are, unsurprisingly, Microsoft and Apple, who presumably argue that as their
browsers rely on system-level code, they can’t provide standalone testing environments
for older releases. Luckily, enterprising developers have proven this to not be the case.
Online, there are now a number of sites that enable you to install standalone versions of
previous incarnations of Internet Explorer. By far the best is Tredosoft’s effort, which packages
everything up into a no-nonsense installer. This enables you to install standalones for
Internet Explorer versions from 6 way back to 3 (the following image shows an example of
three versions of Internet Explorer running simultaneously). Usefully, conditional comments
work fine, too, which wasn’t the case with earlier standalones. Download the
installer from www.tredosoft.com/Multiple_IE. Alternatively, you can manually install the
versions you require from Evolt (http://browsers.evolt.org/) and use the information
at Position Is Everything (www.positioniseverything.net/articles/multiIE.html) to
repair lost functionality.
In a similar vein, Michel Fortin has produced standalone versions of Safari for the Mac,
available from www.michelf.com/projects/multi-safari/. However, because of the
nature of WebKit (the application framework that’s the basis for Safari), there are limitations
regarding which versions of the browser can be run on which versions of Mac OS X.
David Hellsing of David’s Kitchen also notes in his “Browser Suite for Developers” article
(www.monc.se/kitchen/91/browser-suite-for-developers) that you can use the WebKit
nightly builds instead of the public downloads, in order to test in multiple versions of
Safari. Links are available from the article.
Elsewhere, things are simpler. For Firefox, different versions can happily live on the same
machine, although they can’t be run simultaneously, unless you start each version with a
different profile—see “Geek to Live: Manage Multiple Firefox Profiles,” by Gina Trapani
(www.lifehacker.com/software/firefox/geek-to-live--manage-multiple-firefox-å
profiles-231646.php), for how to do this on Windows; and “Running Multiple
Firefox Versions Concurrently,” by Jeroen Coumans (www.jeroencoumans.nl/journal/
multiple-firefox-versions), for how to do this on Mac OS X. Opera is even simpler: you
can install multiple versions and run them without having to do anything special.