Compared to the freedom which print and multimedia designers enjoy, those of us who work with HTML and CSS suffered from factors beyond our control which impact our designs. Since the first CSS specification was published, our potential’s been hampered by browsers—unless we’re prepared to sacrifice semantics by using presentational HTML. Browsers improved their support for web standards—particularly CSS and the W3C DOM (Document Object Model)—but Microsoft’s decision to allow Internet Explorer to stagnate at version 6, led to designers being hesitant about using more advanced aspects of CSS.
| Year | IE7 (beta) | IE6 | IE5 | Firefox | Mozilla | Netscape | Opera |
|---|---|---|---|---|---|---|---|
| 2006 | 1.9% | 57.8% | 4.2% | 25.0% | 2.2% | 0.4% | 1.4% |
| 2005 | — | 67.9% | 5.9% | 19.8% | 2.6% | 0.5% | 1.2% |
| 2004 | — | 67.2% | 13.2% | — | 12.6% | 1.8% | 2.0% |
Source: W3 Schools August 2006
MOSe enhancements
Way back in 2003, Dave Shea—the Canadian designer, author, and creator of the CSS Zen Garden—wrote about a compelling new approach to creating designs for web browsers with different capabilities. He named his approach MOSe (Mozilla, Opera, Safari enhancement).
With MOSe, Dave suggested we exploit Internet Explorer 6’s lack of support for child, adjacent sibling, and attribute selectors, to provide people using modern browsers with enhanced designs. MOSe layered this extra finesse on top of a standard design which was visible to all.
In theory, Dave’s suggestion was no more complicated than the @import at-rule technique. This popular technique exploited the fact Netscape 4 couldn’t interpret @import and prevented that browser from seeing CSS it couldn’t understand or bungled. But this technique had one crucial difference. When Dave wrote his article, Internet Explorer 6 was—despite its many flaws—a browser capable of supporting most of the CSS specification. It was the most widely used browser in circulation, so any attempt to design away from it had to be a subtle one.
Working around Netscape 4
Netscape 4 had basic CSS support. In an attempt to shield CSS styles that Netscape couldn’t interpret, some designers chose to hide all but basic styles using the @import at-rule. This first stylesheet was visible to all browsers, including Netscape 4:
<link rel="stylesheet" href="simple.css">A second stylesheet was available to browsers which supported the @import at-rule and more modern CSS:
@import "modern.css";All browsers loaded simple.css; however, only browsers which understood the @import at-rule loaded modern.css. modern.css overrode simple.css unless its rules had higher specificity.
The key to the MOSe method is somewhat similar to how NN4 (Netscape Navigator 4.x) page design developed as CSS became more prevalent. After creating a basic, functioning page in IE, you add extra functionality with these selectors.
Dave Shea, “MOSe”
CSS Zen Garden
Building on the MOSe approach, This Is Cereal—Shaun Inman’s CSS Zen Garden design—used CSS selectors not supported by Internet Explorer to provide a better experience for people using modern browsers. Shaun transformed unordered lists of links into subtle drop-down menus with alpha-transparent PNG images. Although he was not the first designer to use this technique, his results were inspirational.
People using older browsers saw plainer unordered lists and weren’t aware an alternative version existed. Subtle MOSe enhancements subsequently became common among many CSS Zen Garden designs.
My Invasion of the Body Switchers design also made into the CSS Zen Garden.
For my website, I created two distinct designs—one full-colour design inspired by the British mod(ernist) music movement of the 1960s, and one black-and-white 2Old design. I was inspired by the two-tone imagery made famous by the British ska record label 2Tone.
Because ska music came before mod, I made the ska design available only to legacy versions of Internet Explorer. I implemented the mod design using CSS2.1 selectors that were understood only by mod(ern) browsers, which was a fun way to highlight different browser capabilities.
Note: My decision to “punish” visitors using Internet Explorer 6 by depriving them of the full design wasn’t altogether well received.
Progressive enhancement
Several months after Dave’s MOSe article appeared, Triangle TechJournal published another which explained the concept of progressive enhancement:
Progressive Enhancement presents a viable approach by enabling the delivery of information as demanded by the users while embracing accessibility, future compatibility, and determining user experience based on the capabilities of new devices.
Debra Chandra and Steve Champeon,
Progressive Enhancement: Paving the Way for Future Web Design
Designers use MOSe and progressive enhancement on personal portfolios and blogs, but you rarely find them on mainstream, commercial projects. This was mainly due to Internet Explorer 6’s dominant market share and a belief in setting a design benchmark based on the most popular browser, even when it was less capable than its competitors. As a result, progressive web design stalled.
The web is still a young medium, so the notion we shouldn’t push boundaries because of only one browser—even when that browser is a market leader—is still incompatible with progress.
Both MOSe and progressive enhancement were intended to encourage us to use all the tools available in the CSS2.1 specification and browsers which supported its properties and selectors. Those properties are often still described as “advanced” or “cutting edge” despite being invented only a few years after the birth of the commercial web. Can progressive enhancement be called “progressive” years after Steve Champeon coined the term? The answer must be “no,” so it’s time to move forward.