Thu, 02 Jan 2003
- CSS: Go whole-hog or go home
-
Lately I have noticed that a lot of web designers who use CSS are duplicating their efforts in their HTML sources, most notably through the use of the
<font>tag as well as bgcolor, fgcolor and background attributes. These people should stop doing so, not only because it generates more work for both them and the browser, but also because it anchors their web pages firmly in the past.By including style information in two distinct places, one is being forced to perform double-duty: any changes in the stylesheet must be reflected in the HTML code. Who is to say that a web developer will remember to mirror every colour, every font style and every background image in both locations? I have seen many instances where designers have failed to mirror a CSS style change in their HTML, thereby making the page unreadable to those who use browsers which don't understand stylesheets. By restricting style information to one place, you will save a lot of hassle when it comes time to redesign the look and feel of a site. Any style changes will be made in one location, not two or more.
The practice of maintaining two style repositories not only necessitates more work for the web developer, it may require more work from the web browser with which the page is viewed. In loading the HTML page, browsers may first apply the
<font>tags and colour attributes therein and then repeat the process once the stylesheet is applied. For those with slow computers or slow connections, this could slow down rendering and probably result in confusion if the styles are out of synch. If the HTML or stylesheet is malformed, the wait could be significantly longer.In addition to the work involved, including font and colour style information in the HTML harkens back to 1997 and HTML3.2. The
<font>tag and bgcolor, fgcolor and background attributes have been deprecated in 1999's HTML4.01 in favour of stylesheets. Anyone who has used CSS will tell you that full separation of style and content makes content management and style changes so much easier. Why make HTML generation more of a pain than it already is?If you're guilty of including your style information in two locations, why are you bothering to do so? To make your content accessible to those using older browsers? (By "older", I mean pre-4.0 because even Netscape 4.7 can handle rudimentary stylesheets involving fonts and colour.) You have already gone to the trouble of learning CSS and implementing a stylesheet, why make all that work unnecessary? Are you worried that the fonts won't appear "just right" in older browsers? Use HTML logical styles like the heading tags,
<em>for emphasis, and<strong>for stronger emphasis, design your stylesheet and be done with it. Users with older browsers which don't understand stylesheets will still be able to follow the flow of your document. So what if they can't see your colours, or your page doesn't look precisely as intended? Do you really care? Is it worth all that extra effort which could be better spent adding content or letting loose with CSS?Release yourself from duplication of code and save yourself time and effort. You will be glad you did.
I'll step down from my pulpit now.
