A Bulletproof Approach


I'm going to share a strategy that's been successful for me in my own projects, combining absolute-size keywords with percentages. Using keyword values for the font-size property solves the problem we exposed earlier with eyeglasses.com (and millions of other sites). Unlike with pixels, users' browsers will be able to adjust the size of text on the page, regardless of what browser or device they are using. Let's take a look at how keywords work.

KEYWORDS EXPLAINED

As outlined earlier, we can choose from seven possible values when using keywords: xx-small, x-small, small, medium, large, x-large, xx-large. Here's how one value would be used in a declaration for assigning the size of text on the <body> element:

 body {   font-size: small;   } 

The keyword sets the size of text in relation to the browser's current setting. In other words, if the user has adjusted his or her browser to display text larger or smaller than the default, then the keywords scale in relation to that base size. The scaling factor between each keyword value remains constant, no matter how large or small the base is.

For example, Figure 1.3 illustrates each keyword value, with a different scale depending on the browser's default text size. I'm using the Safari browser here to demonstrate.

Figure 1.3. Here's a comparison of the keyword scale in Safari. The base text size has been bumped up a few notches on the right.


You'll notice that, while small will appear a different size depending on the base, the difference between the small value and the next size up or down remains a consistent scale.

LETTING GO OF "PIXEL PRECISION"

The largest obstacle to overcome for any designer using keywords (or any font size unit other than px) is that, depending on the browser, operating system, and settings, the same value may look slightly different when compared side by side.

For instance, the value small that we've just illustrated may look slightly different in size when compared in different browsers and/or operating systems, even if all are set at a default medium setting.

Where a pixel is a pixel could be assumed Web law, a keyword is more of a guideline for how large or small the browser or device should display text. If you can come to terms with a slight variation and embrace the flexibility that's gained when using keywords, then your designs (and users) will benefit.

TWO HURDLES TO JUMP OVER

Later on, I share some strategies for dealing with the slight variations in the way keyword values are displayed between browsers. First, though, I need to address two major discrepancies in the way Netscape 4.x and IE5 for Windows handle those variations.

Netscape 4.x

Even at default medium settings, Netscape 4 has the unfortunate tendency to display text at the small end of the spectrum, too small to be legible on screen. Because of the danger of delivering unreadable text, it's better not to use keywords when using CSS to size text for Netscape 4. (For more on why, check out www.alistapart.com/articles/sizematters.) We're not going to worry too much about Netscape 4, however, since (like with all the examples provided in this book) we'll be hiding all styles from this ancient browser. One hurdle down.

IE5 Windows

The second hurdle is a little more complicated, because it's perhaps too premature to hide styles completely from IE5/Wina browser that still boasts a significant user base at the time of this writing. The discrepancy in IE5/Win is a bit more of an obvious mistake on the part of the browser's developers.

For reasons only known to Microsoft, IE5 displays keywords one full step larger than what other standards-compliant browsers display. For instance, if at default browser settings we declared

 body {   font-size: small;   } 

in IE5/Win text would display at medium instead. Not good, and not what we intend. Figure 1.4 shows the difference between IE5 and IE6 using the small keyword.

Figure 1.4. This comparison shows how the small keyword is rendered a step larger in IE5 than it is in IE6/Win (and other compliant browsers).


To skirt around this issue, and to get all browsers and devices on the same page in terms of a similar size, we'll take advantage of a CSS hack that enables us to declare separate rules for IE5/Win and other browsers. We'll be able to assign a keyword value specifically for IE5/Win that is one step below what we'll assign for everyone else. Consistency awaits.

The IE5/Win hack

In order to assign a font-size in IE5/Win that is one step below our intended size, we use the famous Box Model Hack developed by Tantek Çelik (www.tantek.com/CSS/Examples/boxmodelhack.html), which tricks IE5/Win into thinking a CSS declaration has ended. Thanks to this mystical voodoo, we can assign a smaller value for IE5/Win first, and then override it with our intended size for compliant browsers.

The CSS that's necessary for declaring an intended size of small for the contents of the <body> element goes something like this:

 body {   font-size: x-small; /* for IE5/Win */   voice-family: "\"}\"";    voice-family: inherit;   font-size: small; /* for compliant browsers */   } html>body {/* be nice to Opera */   font-size: small;   } 

You'll notice that we're intending to set a base font-size using the keyword value small, yet we're declaring a step below our intended value for IE5/Win, which we then trick into thinking that the declaration has ended with this rule:

 voice-family: "\"}\""; 

Only IE5/Win recognizes this closing bracket, and it thinks that the declaration has ended. For all other compliant browsers we override x-small with small. In turn, we'll now have a relatively consistent base text size to work from.

You'll also notice a second declaration in the preceding example, with a duplicate rule assigning font-size: small. This rule is referred to as the be nice to Opera rule, which prevents the Opera browser (and others) from potentially ignoring the rule that follows the hack. Whenever the Box Model Hack is used, this declaration should follow it; it essentially ensures that all compliant browsers are caught up and ready to go on to the next declaration in the style sheet.

THE SIMPLIFIED BOX MODEL HACK

Developed by Edwardson Tan, the Simplified Box Model Hack (or SBMH) achieves the same result (the ability to serve IE5/Win and all other browsers differing values) with a bit less code and perhaps an easier-to-understand syntax.

Using the SBMH this time, our previous example would look like this:

 body {   font-size: small;   } * html body {   font-size: x-small; /* for IE5/Win */   f\ont-size: small; /* for other IE versions */   } 

We start with a normal declaration for the <body> element, with our intended value small. Next, using the * html selector exploits a bug in IE, enabling us to serve the declaration to IE browsers only. IE5/Win ignores the backslash in the font-size property, so we're free to set x-small for IE5/Win and then override with small for other versions of IE.

We're accomplishing the same goal as we did with the original Box Model Hack, but this simplified syntax can sometimes be easier to grasp for those just learning the fix. (For more on SBMH, check out www.info.com.ph/~etan/w3pantheon/style/modifiedsbmh.html.)

tips

For more on using keywords and the aforementioned workarounds, check out a detailed article by Todd Fahrner at A List Apart Magazine (www.alistapart.com/articles/sizematters/).

If you don't mind text displaying a step larger in IE5/Win, then by all means skip this hurdle altogether. Don't jump over itjust sort of run around it, or knock it down, or something.


You may be thinking that utilizing the Box Model Hack or SBMH is a bit messy, and a lot of trouble to go to just to correct a text-sizing issue. But if it's relative consistency you want, you have to pay the price.

Methods are available for strategically collecting all CSS hacks and workarounds and keeping them separate from your clean, compliant style sheetsand we'll be going over a few of those concepts in Chapter 9, "Putting It All Together."



Bulletproof Web Design(c) Improving flexibility and protecting against worst-case scenarios with XHTML and CSS
Bulletproof Web Design(c) Improving flexibility and protecting against worst-case scenarios with XHTML and CSS
ISBN: N/A
EAN: N/A
Year: 2006
Pages: 97

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net