- Lovely to Look At, Repulsive to Code
- 2000: The Year That Browsers Came of Age
- Too Little, Too Late?
- Bad Browsers Lead to Bad Practices
- Confusing Sites, Bewildering Labels
- The F Word
- Compliance Is a Dirty Word
This chapter is from the book
This chapter is from the book
This chapter is from the book
2000: The Year That Browsers Came of Age
With the release in March 2000 of IE5 Macintosh Edition, the world (or at least that portion of the world that uses Macs) finally got more than a teasing taste of web standards. IE5/Mac supported XHTML, ECMAScript, nearly all of the CSS1 specification, much of CSS2, and most of the DOM. IE5/Mac was also able to display raw XML, although it's not clear why anyone would want to do so. (See Chapter 5 for more about this, or visit Bugzilla at http://bugzilla.mozilla.org/show_bug.cgi?id=64945 to see some of the approaches that uber-geeks have taken to the problem of displaying raw XML in browsers.)
IE5/Mac: Switching and Zooming
IE5/Mac was so attuned to standards that it varied its display and performance according to the <!DOCTYPE> listed at the top of a web page's markup—a technique called DOCTYPE switching, to be discussed in greater detail in Chapter 11, "Working with Browsers Part I: DOCTYPE Switching and Standards Mode." Put simply, with the right DOCTYPE, a page would display and function as web standards said it should. With an old or partial DOCTYPE (or none), the page would render in backward-compatible "Quirks" mode, to avoid breaking nonstandards-compliant sites—that is, to be kind to 99.9% of commercial sites on the web, at least for now [3.5].
)
none 3.5 Hello, world, it's IE5 Macintosh Edition, the first browser to get most web standards mostly right, and one whose innovations found their MicrosoftIE5/MacwebsitesMicrosoftway into competitive products (www.microsoft.com). Some of those innovations eventually even made their way into IE for Windows. But not all of them, unfortunately.
IE5/Mac also included a feature called Text Zoom [3.6] that enabled users to magnify or shrink any web text, including text set in pixels via CSS, thus solving a long-standing accessibility problem. Prior to IE5/Mac, only Opera Software's Opera browser allowed users to shrink or magnify all web text, including text set in pixels. Opera did this by "zooming" the entire page, graphics and all—an innovative approach to the occasionally epic conflict between what a designer desires and what a user might need [3.7 , 3.8 , 3.9].
)
none 3.6 IE5/Mac's Text Zoom at work. At the touch of a command key or the click of a drop-down menu, users can enlarge (or reduce) the text on any web page, whether that text is set in pixels, points, centimeters, or any other relative or absolute unit. Images on the page are unaffected—only the text size is changed. Text Zoom soon found its way into Netscape, Mozilla, Chimera, and other leading standards-compliant browsers. Alas, maddeningly, three years after IE for Macintosh introduced Text Zoom, IE for Windows still does not offer this IE5/MacText ZoombrowsersIE5/MacText ZoomText ZoomIE5/Macessential accessibility feature.
)
none 3.7 PixelSurgeon (www.pixelsurgeon.com/news/), a leading design portal and sister site to K10k [3.4], as viewed in PixelSurgeonwebsitesPixelSurgeonOpera Software's Opera 7 browser at actual size.
)
none 3.8 The same site magnified by 200% via Opera's innovative Page Zoom feature. ForOperaPage ZoomPage Zoom visually impaired users, Page Zoom provides a way to read OperaPage ZoomPage Zoomsmall graphic buttons and any other text gifs whose minuscule fonts might otherwise pose an accessibility problem.
)
none 3.9 The same site again, this time magnified by 500% via Opera's Page Zoom. For designers, OperaPage ZoomPage Zoomthis Opera feature provides a way to more closely study a site's visual elements without the hassle of first saving them IE5/MacText ZoombrowsersIE5/MacText ZoomText ZoomIE5/Macas screen captures and then opening them in Photoshop.
Netscape's Bold Move
A flood of standards-compliant browsers followed the release of IE5/Mac. Netscape 6 and its open source code parent Mozilla supported XML, XHTML, CSS, ECMAScript, and the DOM across all computing platforms. It, too, used DOCTYPE switching and offered Text Zoom, and it was designed from the ground up to be a fully compliant browser.
To achieve full standards compliance, at WaSP's urging, Netscape had boldly junked its existing Navigator/Communicator 4.0 browser and every scrap of legacy code that had gone into it, restarting from a clean slate. Building a new browser from scratch took far longer than upgrading an existing browser. Netscape lost considerable market share during the years of Mozilla/ Netscape 6 development—which began in 1998 but did not produce a commercial product until late 2000 (and arguably, did not produce a viable commercial product until 2002).
These managers and engineers were not crazy. They obviously believed, as WaSP did, that the new browser would be finished in about a year. When one year became two and then three, the managers and engineers hung in there with a heroic, if increasingly baffling, determination to see the job through to the end.
Many companies would have abandoned such a project, shrugged their shoulders, and released a nonstandard 5.0 browser built on legacy code rather than sacrifice additional time and market share to a fiercely single-minded competitor like Microsoft. Although shareholders might disagree, Netscape's management and engineers deserve thanks and credit for placing interoperability and the future health of the web ahead of short-term benefits and their own self interest.
The Floodgates Open
Opera 6 came next—no DOCTYPE switching and no DOM, but fine support for most other standards. Opera eschewed DOCTYPE switching because, alone among commercial browsers, Opera had always sought to display pages according to W3C spec. Therefore, Opera's makers saw no reason to offer a backward-compatible "quirks" mode. (Opera 5 and 6 did not support the standard W3C DOM, but Opera 7, released in 2002, does.)
Finally, Microsoft released IE6 for Windows, a browser that mostly caught up with its Macintosh product's accurate CSS rendering, that offered strong support for XML, ECMAScript, and the DOM, and joined IE5/Mac, Mozilla, and Netscape 6+ in providing DOCTYPE switching. (On the browser's release, the Windows-centric trade press finally noticed DOCTYPE switching and gave IE6/Windows the credit for it.)
IE6/Windows failed to implement Text Zoom, but Text Zoom, although highly desirable from the point of view of accessibility and user friendliness, is an innovation, not a standard. IE6/Windows got CSS fixed-attachment backgrounds wrong, and it also suffered (and still does) from a bug that can break CSS layouts that use the float property (see Chapter 16, "A CSS Redesign"). Even so, IE6/Windows was a highly compliant, well-made browser, and its IE5.x/Windows predecessor came close enough to be worked with—or around.
None of these browsers was perfect (no software is), but each was a major achievement that demonstrated genuine commitment to interoperability via standards. No one, least of all The Web Standards Project, had believed these companies would come so far or do so much. With leading browsers finally attaining a kind of parity in their standards compliance, designers and developers were free to use CSS layout and other standards-based techniques.