As I’ve mentioned before, I’m in the process of redesigning this site. Some of you locals have seen proofs-of-concept, but you ain’t seen the whole package yet. In writing this code, however, I’ve been forced to read up on standards compliance.
The W3 Consortium (site), or World Wide Web Consortium (W3 is definitely easier on the mouth) is in charge of creating standards for interpretation of webpages. At its core, a webpage is nothing more than a text file with the actual textual content of what you see wrapped inside a set of “tags” - special codes placed in greater-than/less-than symbols. Those codes tell a website how to interpret what’s inside those codes. So to show something as bold, I can wrap text inside a set of <strong> tags, and it’ll look like this.
Simple enough, you say. The problem is that not every browser reads those tags the same way. More problematic is this thing we call Cascading Style Sheets, or CSS. The movement is to remove any formatting-related tags from the actual web document that you see on the screen, placing those formatting things inside a style sheet that tells the webpage how to display the content. The strong advantage of this is that I can have multiple style sheets for any given web document, making the same content appear radically different. The downside is that CSS is a new enough technology that not everyone interprets it the same way. The major players on the browser scene are Mozilla Firefox, Internet Explorer, and Opera. Going deeper we see that even within product lines, the standards are different. Firefox 1.0.7 renders a page different from Firefox 1.5.0.3, as I found out this afternoon. Internet Explorer 5.5 renders things different from IE 6, which is again different from IE 7. Opera 4, 5, and 7 are all different, too.
This presents a problem for developers. Specifically, if I use a formatting technique in my browser that eliminates, say, the left margin of a particular piece of HTML, it won’t show up correctly on others. This afternoon I found that IE 6, Opera 8, and Firefox 1.0.7 all have a built-in margin for lists - 15 pixels indented from the rest of the text. If I tell my style sheet that the left margin of a list is 0 pixels, those three will shove the list over so that it lines up on the left with the text above it. But I have to give a margin of -15 pixels to Firefox 1.5+ to accomplish the same task. Oh, and the trick for getting IE and Firefox to do it doesn’t work with Opera, which requires a third declaration to get it to play nice. Otherwise Opera will shove it 15 pixels to the left of the text above it, which puts it in the way of other text beside it.
That’s where the W3C folks come in. Some of the biggest geeks on the planet get together and determine how a properly-formatted and properly-created website should look. Then they write all the browser manufacturers and tell them how to write their browser’s rendering engine. Trouble is you have folks like our friends in Redmond who don’t let anyone tell them what to do. Consequently IE has been a thorn in the side of web developers for eons. Then you have Opera, which apparently is trying to walk the line and please everyone. Consequently Opera may or may not work right, and what may or may not work will probably change between versions. And, yes, the Mozilla Foundation is not immune to my vitriol, because they keep changing to accommodate bleeding-edge technologies…which is nice, but sometimes bleeding-edge stuff interferes with other standard stuff. I’m particularly bugged because they changed their rendering engine to a more IE-like engine between 1.0.x and 1.5.x.
If you want to know more, you can google things like “border box model,” “css hacks,” and “quirks mode.” The explanations you’ll find are in some cases helpful and in some cases very dense reading material that you might not want to wade through. But take comfort that life was not always so hard. I remember the very first website I designed. I was in 10th grade…maybe. It was somewhere around there. I signed up for an email account (I was one of the first in my school!) and shortly thereafter picked up my own Geocities page. Back then, you were assigned a number, and you could choose “neighborhoods” for your page to live in. The neighborhood names were pseudo-clever categories that helped people who might randomly stumble on your site from an AltaVista search (AltaVista being the Google of the mid-90s) figure out what content you had. So I used Geocities’ home page builder, an absolutely stunningly bad HTML-based webpage creator. (Remember - no Java back then.) I was pretty proud of my creation, though I shudder now to think what it must have looked like. I remember I was serving up sound files from various Star Trek shows - mostly sound files that I had downloaded and re-uploaded to my own server. It was wholly unoriginal. I remember a starry background with garish text…not unlike a lot of other Geocities sites. Funny thing was, it displayed correctly on every browser out there. IE or Netscape, Mac of PC. Those were the options, and they all worked the same. Now we have HTML 4.01 - Loose, Strict, or Traditional. We have XHTML 1.0 Strict or Transitional. We have XHTML 1.1, same options. And all of them can be run with or without quirks mode turned on. We have XML namespaces and SGML specifications. We have markup validators, CSS validators, RSS validators, and don’t forget WAI and WCAG 1.0 compliance for people using text browsers or screen readers. And (you’re going to love this) even if my website is using HTML 4.01 Strict (probably the safest bet for conformity), and even if my CSS validates with no errors or warnings, that’s no guarantee that I have a good website or that my website will show up properly on all browsers. Sometimes people may think of website validation as an answer to all their problems. If it’s valid, it’ll display properly, right? Validation merely assures that there are no glaring errors, like forgetting to close a tag, misspelling a tag name, etc. Beyond that, it’s up to the developer to make sure he’s testing everything in six different browsers. Only then can he take a break and have a life.