Web Systems Design and Online Consumer Behavior [Electronic resources] نسخه متنی

Gemination: Two designs but one style sheet

Egor Kloos, Designer

www.csszengarden.com/062

[View full size image]

[View full size image]

THE LACK OF RESTRICTIONS in the CSS Zen Garden led Egor Kloos to showcase CSS as a viable tool for creating any idea one could dream up. With a strong interest in CSS hacks that can be used to send enhanced styles to browsers that support them, Kloos stumbled upon an idea that serves as ultimate proof that clever coding can produce surprising results. And so we have Gemination, which consists of two entirely different designs delivered by the same style sheet.

MOSe

Discussions about enhancing designs for browsers with more thorough CSS support had been ongoing for some time prior to Gemination. The idea is simple: Exploit the lack of support for certain CSS selectors in less capable browsers, and use those selectors to create the enhancements that will get picked up by the browsers that can manage themnamely, Mozilla and variants like Firefox, Opera, and Safari.

NoteThe term MOSe stands for Mozilla Opera Safari enhancement. See www.mezzoblue.com/archives/2003/06/25/mose for details.

Specifically, MOSe taps into a range of selector types that are unsupported by Microsoft Internet Explorer. Some of the most commonly used for enhancement are child selectors, adjacent sibling selectors, and attribute selectors.

NoteA child selector allows you to be more specific by choosing only the child elements within the specific element, and not those within other, nested structures within the parent element.

Child Selectors

Child selectors, as the name implies, select the child of a given element. They're somewhat like descendant selectors, but descendant selectors select every descendent element from a parenteven those that are nested in other elements within the parent.

To create a child selector, you would first list the parent element, then use the > combinator (a combinator is the term for the symbol used to combine selector types), then define the child and finish up the rule:

div#content>p {color: orange;}

Now, all paragraphs that are direct children of the #content division will be orange, as demonstrated in FIGURE 1.

Adjacent Selectors

An adjacent selector selects the sibling elements of an initial child element. This is accomplished by defining the first element, then using the + combinator, defining the sibling element, and finishing up the rule:

div#warning p + p {color: red;}

This would make sibling paragraphs of an initial child paragraph within the #warning division red. If you apply the CSS adjacent selector rule to the same markup as above, the results will match FIGURE 2.

Attribute Selectors And Pattern Matching

Here's where the fun really begins! Readers might not be familiar with attribute selectors, largely due to the fact that they aren't supported in Internet Explorer; most working Web designers don't find themselves in a position to consider using them. But attribute selectors are extremely powerful, and the control they offer is downright cool.

NoteSee The OPAL Group's Web site (http://gallery.theopalgroup.com/selectoracle) for an excellent resource that explains CSS selectors in detail.

An attribute selector enables you to select elements based on which attributes are set and, even more usefully, what the values of those attributes are. So if you have a link with a specific URL, you can select it based not only on the fact that it has an href attribute, but also on its value, the URL itself. Every instance of that URL will then have a corresponding style.

Consider the following CSS:

[id] {color: teal;}
[id="warning"] {color: red;}
[href~="http://www.molly.com/"] {text-decoration: none;}

FIGURE 3 shows how these selectors modify elements based on the attributes of each and their values.

This is the primary selector type that Kloos used within Gemination to pass one design to compliant browsers and a completely different design to Internet Explorer.

CSS Signatures

CSS "signatures" are becoming more and more prevalent. The idea is that assigning an ID to the body element of a Web site provides a unique styling signature that can be tapped into for cross-site styling, user style sheets, and multiple CSS files.

The real benefit of a CSS Signature is for the power user who wishes to tweak an individual site. For example, if a site you frequently visit makes use of 9-pixel, light-gray-on-white text that you simply can't read, you don't have to bother the site author with a "fix it or else" email if he or she has implemented a CSS signature; you can override the font size by adding a user style sheet to your browser.

The Zen Garden's use of a CSS Signature is demonstrated by Kloos's implementation:

<body id="css-zen-garden">

NoteMOSe taps into other selector types that aren't supported in Internet Explorer including some syntax from CSS 3.0. See www.mezzoblue.com/archives/2003/06/25/mose for a complete look at the various MOSe approaches that people are using to accomplish enhancements.

In order to create the enhanced design for Gemination, Kloos tapped into the use of the body element and its associated attribute signature. If you examine the CSS for this design, you'll note what might at first glance look like unusual syntax:

body[id=css-zen-garden] a:link { color: #f90; }
body[id=css-zen-garden] a:visited { color: #f90; }
body[id=css-zen-garden] a:hover,
body[id=css-zen-garden] a:active { color: #fff; }

In this CSS, Kloos is defining the link behaviors by noting that the given link type is related to the body's id attribute and value. By doing this, he's covering all his basesit's a broad-stroke means of ensuring that all descendents of the specified body will pick up the styles (FIGURE 4).

Comparing MOSe to Internet Explorer Styles

Sending completely different style information to Internet Explorer is easy. You need only make sure that you've written styles that it can interpret.

Here's the CSS for the Internet Explorer-version link styles:

a:link        { color: #f90; }
a:visited     { color: #f90; }
a:hover, a:active      { color: #fff; }

You'll note that these are the exact same styles being used as in the earlier example, but in this case, the syntax is well supported by Internet Explorer, so it picks them up in the un-enhanced version (FIGURE 5).

Enhanced Gemination

The enhanced design has some effects worthy of note. It's built similar to the way layers function in Adobe Photoshopa repeating tile makes up the background, and other elements are layered on top.

First, Kloos used a background tile for the body element (FIGURE 6).

Here's the CSS:

body[id=css-zen-garden]
{ margin: 100px 0 0 0; padding: 0; text-align: center; background:
transparent url(squidback.gif); }

Now another image is added, this time to the #container. This creates the backdrop (FIGURE 7) for the content area of the design.

In the preamble section, a beautiful effect is created by using a light gray background that allows the backdrop graphic to show through (FIGURE 8).

Here's the CSS:

body[id=css-zen-garden] #preamble                 { position:
absolute; top: 30px; left: 20px; display: block; margin: 0; border:
1px dotted #fff; padding: 0; width: 196px; height: 290px; background:
transparent url(blk35.png) repeat; overflow: hidden; }

This effect is also used in the content section, with a scroll bar over the background. Finally, the tabbed navigation to the far right uses the :hover selector to create very nice rollover effects (FIGURE 9). Of course, this effect is limited to browsers that support :hover for all elements and not just links, but we can be reasonably assured that browsers supporting advanced MOSe selectors qualify.

Because a far more traditional CSS design is delivered to Internet Explorer, there's far less to talk about in terms of effects. The strongest aspect of the Internet Explorer design is its humor. It features a pun on the CSS box modela woman trapped inside a box with a rather surprised look on her facewhich is a light-hearted jab at Internet Explorer 5.x's misinterpretation of the standard CSS box model (FIGURE 10). (The box model is the visual model used by browsers to calculate the display of visual presentation. For more information on the box model, see www.w3.org/TR/REC-CSS2/boxl).

Future-Proof Design

An ongoing discussion in Web design is the idea of "future-proof" design. This means that whatever is done today will still work in the context of tomorrow's more advanced technologies.

Of course, the entire approach taken for Geminationand the approach of MOSe in generalrelies on the fact that Internet Explorer has inferior support for what are standard, contemporary selectors within the CSS 2.1 specification. So what happens sometime in the murky future when Microsoft distributes a more modern browserone that supports all of these features? Theoretically nothing, if all selectors and effects are supported equallythis hypothetical version 7 of Internet Explorer for Windows would simply render the page as Mozilla and other browsers currently view it, and the world is a wonderful place. Of course, the potential exists for this to cause a major clash, and trying to imagine the results is practically impossible.

Kloos is of the opinion that the idea of future-proofing is "the figment of someone's overactive imagination," due to the unknowable variability of what the future may bring. Whether or not that's true, what's certain is that, at least for the time being, we can tap into the lack of support in Internet Explorer for contemporary selectors and turn it to our favorsomething that is clearly demonstrated by the brilliant duality of Gemination.