|Preparing for standard-compliant browsers, Part 1
By Makiko ItohWhy You Should Care
Standards-compliance has been an issue for web building community for some time and in the last months has really come to the fore. Chances are that if you are reading this article, you are involved in web site production on some level and you’re already aware that we are in the middle of some big changes on the browser front with the first beta release of Netscape 6, which claims it will be fully compliant with the official World Wide Web Consortium specifications, and the new Microsoft Internet Explorer version 5 for the Macintosh which has been highly praised for its high level of standards compliance.
Should you even care about standards? Given that Microsoft’s Internet Explorer product for Windows is now the dominant browser, perhaps you think that standards do not matter anymore—you’ll just code your pages for IE and be done with it. But to confuse matters, while IE5 for the Mac proudly boasts of the number of standards it supports, the new 5.5 beta version of IE for Windows has introduced a whole slew of proprietary features rather than concentrate on shoring up standards compliance. Just choosing to support one browser may be the easiest thing to do in the short run. However, if web programmers and designers actively show their support for browsers that are standards-compliant, it’s ultimately going to make our jobs easier.
Step Back, Step Forward
One more word before we move on. Whenever a certain feature doesn’t work on one type of browser, I commonly hear less experienced web designers/programmers blame it on the browser, while more often than not the problem really lies in the use of proprietary code, and the page creators’ incomplete understanding of what is proprietary and what isn’t. Before you decide to use a new, cool feature in one browser, check to see how, or if, the same feature is supported in other browsers. When you do decide to use a proprietary feature, do so with open eyes and with the understanding that the user experience will not be uniform – and make sure your client understands this too.
The goal here is to make pages that are uniform in appearance and functionality across the largest number of browsers as possible. This means making pages that follow the standards. So let’s see how to take your first cautious steps towards standards-compliance.
Clean up Your HTML, Even if You Didn’t Hand Code It
The best way to check your syntax and to train your eye and brain to seeing clean HTML is to run your pages through an HTML checker. There are two types of checkers: lints and validators. A lint generally compares your code against the DTD (document type definition) you’ve specified in your page with the DOCTYPE (see below)—or against an HTML4.0 “loose” DTD if you haven’t specified one—checks for common errors, and cleans up your HTML markup. The best one of this kind is probably HTML Tidy by Dave Raggett, which will also perform its magic on XML. I highly recommend getting the port of this wonderful program for your development platform. I use the BBEdit plug-in version ported by Terry Teague all the time—it’s quick and thorough. Even though BBEdit has a built-in lint (the Check Syntax function), the Tidy plug-in does a better job of picking up errors, including any embedded CSS, and best of all, outputs a cleaned up page automatically. HTML Tidy also will check your page for accessibility, following W3C guidelines.
The second type of checker is called a validator. Validators will more rigorously test your page against the specified DTD and report back any errors to you. Currently there are two online validators—the W3C HTML Validation Service and the similar service from the Web Design Group, which also offers an shareware offline version for Windows called A Real Validator.
What if you don’t write HTML directly but use a WYSIWYG program—or generate pages from a word processor? Unfortunately, auto-generated code from the currently available versions of programs is not always valid. As an example, run this GoLive page through a validator: it will return many errors, and in HTML4-compliant IE5/Mac does not display as intended. In particular, if anyone has been adding some handwritten markup or scripts on top of the auto-generated code, chances are that coding errors abound. So as a final step prior to publication, you should run always your pages through a validator regardless of the way it was authored.
Clean Up Your CSS
Again, help is at hand in the form of CSS checkers. My preference is for CSS Check by the Web Design Group, but the W3C CSS Validator works just as well. Here is a screenshot of some typical error messages returned by CSS Check on a style sheet I uploaded. While none of the errors shown here would actually break a page, it’s a good idea to clean them up anyway. As with HTML checking, CSS checking is an excellent way to educate yourself without having to memorize all the W3C documentation in one big gulp. While you are at it, also try to familiarize yourself with the cascade order of styles.
An important authoring tip is to keep your styles separate from your HTML, either embedded in your page or in an external stylesheet for ease of checking and debugging.
Use the Right DOCTYPE for Your Page
Get Rid of the Table Cell Mentality in Design
However, this can cause problems on standards-compliant browsers. This comes partly from the fact that tables were never really intended to be used as layout devices, and partly from an incomplete understanding on the part of designers about CSS elements, especially block elements. Tables are so familiar to most designers that they will probably continue to be used for some time, but, as a general rule of thumb, be extra-careful about overlapping tags when you are using tables for layouts. Either completely wrap a table with a block element (such as DIV), or enclose a block element in a single-table cell.
But more important perhaps is a basic mental adjustment about exactly how much you should control on a web page. While some elements, such as tightly spaced navigational items, must be specified in absolute terms (i.e., pixels) as the new browsers allow you to transition into more reliance on CSS, try to get rid the absolutely specified table-cell way of thinking. CSS elements are far more fluid and flexible. It’s time to think in terms of fluidity in your design as well.
Don’t Rely too Much on the Browsers
There are a couple of browsers that can be safely used for testing your standards-education efforts. On the Mac, IE5 is a stable and worthy testing browser with only a few minor problems. On Windows, however, you can’t really rely on IE5 except for testing some DOM issues. Therefore, I recommend that you download both Netscape 6 Preview Release 1 or a stable-as-possible Mozilla build, as well as Opera 4.0 beta.
Coping with Netscape 4: Getting rid of the <LAYER> and <ILAYER>
Here is a typical LAYER to standards-compliant DIV conversion:
<LAYER id=”l4″ position=absolute bgcolor=yellow top=103 left=117 visibility=show z-index=2 width=100 height=180 onMouseOver=”someaction”></LAYER>
<DIV id=”l4″ style:”position:absolute; background-color:yellow;layer-background-color:yellow;top:103px;left:117px; visibility:visible; z-index:2; width:100px; height:180px;”></DIV>
Note some key differences. Netscape 4 allows for positioning and size attributes to be set as numbers, but this is incorrect CSS. (Incidentally, the layer-background-color attribute is not correct CSS—it’s workaround in order to display the background color for the block element as intended in NN 4.)
Wrap-up for Part 1
Cascading Style Sheets: Designing for the Web by Håkon Wium Lie and Bert Bos (2nd edition, Addison-Wesley 1999, ISBN:0-201-59625-3) Covers CSS1 and 2. The authors wrote the official specifications.
Web Standards Organization If you care, join. The mailing list can be quite informative, often combative.
The Web Design Group A more accessible site for information and tutorials than the W3C with an equally strong focus on standards compliance.
CSS Bugs and Workarounds from the CSS Pointers Group Now, imagine a world where you no longer have to deal with this. You might even regain a social life. What better reason for pushing for standards support?