User:Bartlett/24
ME=CH24.HTML
Hour 24. Troubleshooting and Browser Hacks
What You'll Learn in This Hour:
Writing style sheets can feel like an arcane art when the style rules don't have quite the effect you want. Sometimes it will be a problem with the way you've written the rules, and other times you've just run into a browser bug or quirk. This hour teaches you how to identify your own mistakes, work around browser quirks, and use certain browser deviations from the standard to benefit rather than break your CSS-based designs. |
./ ADD NAME=CH24LEV1SEC1.HTML
Troubleshooting Style Sheets
When you're writing a style sheet, sometimes the results you get in your browser don't match what you were hoping for. Don't worrythis happens to everyone. To correct these problems, you can follow a strategy of eliminating syntax errors though validation, simplifying the possible sources of errors, and working around browser bugs and quirks.
HTML and CSS Validation
Everyone makes mistakes, even you and I. Mistakes in writing CSS can be benign, producing a minor effect such as putting a block of text in the wrong font, or they can be much more serious and prevent people from using your page at all.
The first step to making sure that your style sheet contains no mistakes is ensuring that your HTML isn't broken. As you learned in [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch04.html#ch04 Hour 4], "Using CSS with HTML," you can validate your HTML by using the World Wide Web Consortium's HTML validator at http://validator.w3.org. [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch24fig01 Figure 24.1] shows the validator inspecting the author's website.
As you can see, the validator discovered a problemthere is an extra closing tag, </a>, that is not matched by an opening tag. This was the result of a simple HTML editing problemI changed the spot at which I wanted my link to end, but forgot to remove the original closing tag. Thanks, validator, for spotting that!
The W3C provides a free CSS validation service, as well, for checking your CSS syntax. This is located at http://jigsaw.w3.org/css-validator/.
To use the W3C CSS validator, you can specify a web page that contains CSS code, give the direct URL of a style sheet, or paste your style rules directly into a text box. The validator analyzes your CSS rules and notifies you of errors. It also gives useful warnings.
An example of CSS validation is shown in [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch24fig02 Figure 24.2], which shows the results of validating the style sheet for the author's website. As you can see, it caught an error and gave a warning about some possible errors.
Validation is a useful strategy for a number of reasons. The biggest benefit is that it enables you to spot errors in your style sheet syntax. For example, in [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch24fig02 Figure 24.2], the CSS validator noticed a problem with the style sheet. The style sheet contained a reference to a pudding CSS property; this was a typo for the padding property.
The warnings issued by the CSS validator are quite useful for spotting accidental omissions, such as setting a foreground color without a contrasting background color. However, you have to interpret those results carefully. The CSS validator can't fully account for inheritance and transparency in your web page, and so you need to determine for yourself whether a warning is an actual problem.
A validator is like a spell-checker or grammar-checker in a word processor. It can spot potential problems and you wouldn't think of submitting a document without checking it first, but blind reliance on an automated checker without using human judgment is just as bad.
| Try it Yourself: Check for Valid HTML and CSS
Get some hands-on experience with the W3C's validators by following these simple steps:
|
Narrowing Your Focus
Validation won't find all your mistakes, just as a spell-checker in a word processing problem won't catch factual errors in a term paper. So just because your page is designated as syntactically valid, that doesn't mean it won't have additional problems that can affect how it appears on the screen.
After you have validated your CSS, it's time to start stripping it out. Save the original version of your HTML and CSS, and work on a copy off it. Remove sections of the CSS step by step, reloading the page in the browser each time. You can remove these rules from the page by editing them out of the source, or you can comment them out.
Your goal in this process is to identify exactly which rules are causing problems for you. Cut away any extraneous style rules that you suspect have nothing to do with your problemsbut be sure to reload after each removal, because it's possible that something that appears completely unrelated might be causing your problems! Style rules sometimes have unintended consequences.
Problems involving the cascade are particularly hard to spot at first glance because the individual rules look right, and the effects of the combination can be tricky to figure out. If you need to, review [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch07.html#ch07 Hour 7], "Cascading and Inheritance," for details on how selectors are given higher specificity based on the types of selectors used. The more selectors of each type used, the more specific the rule; id selectors beat class (and pseudo-class) selectors, and class selectors beat element type selectors.
You should also watch for shorthand properties, such as font, background, border, margin, and so on. These properties not only set the values given, but also reset to the default (by the CSS specification, not by other rules on your page) any of the properties they represent. Consider this rule:
.sidebar { font-weight: bold; font: 12pt Verdana, sans-serif; }
This certainly looks as if it would give you Verdana text, 12 points high and in bold. But it won't. Because the font rule listed here is a shorthand property, it is actually identical to the following:
font-style: normal; font-variant: normal; font-weight: normal; font-size: 12pt; line-height: normal; font-family: Verdana, sans-serif;
Because the font rule follows the font-weight: bold; rule, the weight of the font is effectively set back to normal from bold. The sidebar text would be 12 point Verdana, but it would not be bold.
Narrowing down your rules to a smaller set and checking the cascading, inheritance, and shorthand properties can identify many of these kinds of mistakes in your style sheets.
Ruling Out Browser Bugs
Now, it may be that you've made no mistakes at all in your CSS rules. As discussed throughout this book, especially in [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch03.html#ch03 Hour 3], "Browser Support for CSS," no browser has perfect support for the CSS standards and all have quirks and bugs ranging from minor to serious. So it's possible that a problem just isn't your fault.
To identify whether a CSS problem is the result of a browser quirk or bug, you'll first need to do some browser testing in alternate browsers. This should be part of your normal routine anyway, but you use a slightly different approach when hunting down a problem. Your goal is not to make it appear the same, but to see whether or not you can reproduce the problem on other browsers with different layout engines, including mostly compliant browsers (such as Firefox, Opera, or Safari).
Use the simplified version of the style rules you developed when narrowing down the rules to a smaller subset, and see whether you can confirm what the correct behavior should be. If two or three other browsers agree on the way your CSS code should be presented, they're probably right; however, if there's one browser that's just doing it all wrong, you most likely have stumbled onto a browser bug or quirk.
If you think you've found a bug, you may be rightand you may not be the only person to find it. Check on some of the very valuable websites that document browser bugs, such as Position Is Everything (http://www.positioniseverything.net/), or simply do a web search with keywords such as the name of your browser, the name of the CSS property, and "bug." You'll likely find other people who have encountered the same problems, and advice on how you can use other browser quirks to get yourself out of your difficulties.
./ ADD NAME=CH24LEV1SEC2.HTML Browser Hacks
In a perfect world, you could sit down with this book, a copy of the CSS specification, and your computer, and write style sheets that display properly on every browser in the world. Unfortunately, as discussed in [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch03.html#ch03 Hour 3], we don't live in that perfect world yet. Each browser has its own quirks and bugs, some very minor and some quite serious.
To work around these quirks and bugs, web designers have developed certain techniques for dealing with browsers that don't always behave as they should. Somewhat ironically, these techniques themselves rely on quirks and bugs themselves to get around other quirks and bugs.
A browser hack, therefore, is any technique that uses CSS rules (or sometimes HTML tags) in a quirky way to address a known problem in a browser. If a CSS rule wouldn't be included in that perfect world, but is included because, for example, Internet Explorer 5.5 has a bug, then that rule is the result of a browser hack.
A hack isn't all bad, mind you. The term "hack" has both negative and positive connotations in the English language, depending on the context in which it is used. A hack writer is a bad writer, but in computer programming, a hacker is a deft manipulator of the computer systemas opposed to a cracker, which is someone who maliciously breaks in and steals your data.
In the sense we're using it here, a browser hack is an unfortunate compromise forced upon web designers because of browser limitations. Nobody likes to use a browser hack; we'd rather live in a CSS utopia where rules work correctly. A browser hack is therefore a compromise we live with because we have to.
Browser hacks have several identifying features. First, they are targeted at specific web browsers. One browser hack might be aimed at Internet Explorer 5.5, whereas another works to correct a quirk in Opera 7. Secondly, browser hacks are almost always valid CSS, especially if they're well-written hacks. Thirdly, they exploit bugs or limitations in the targeted browser that deal with how it handles proper CSS.
Some browser hacks use selectors that are not implemented in the target browser, and thus will be ignored. For example, if you want to write a rule that won't be understood by Internet Explorer 6, an easy way to do this is to use one of the selectors from [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch08.html#ch08 Hour 8], "Advanced Selectors," such as an attribute selector. Other browser hacks depend on bugs in the way the layout engine reads through the style sheet and parses out the CSS rules. For example, certain browsers have problems with comments stuck in the middle of property names, and these bugs can be exploited to write rules targeting those browsers.
The vast majority of browser hacks depend on at least two bugs: one in the way the rule is read by the layout engine, and one in the way the layout engine places the content on the page. The combination of these two bugs results in a hack to use the former as a fix for the latter. These double-bug browser hacks are useful only as long as each bug is unique to only that browser.
The examples in this hour use Internet Explorercurrently the most commonly used quirky browser, as described in [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch03.html#ch03 Hour 3]to illustrate how filtering works. You can find specific hacks for specific browsers at Position is Everything (http://www.positioniseverything.net/) and Centricle (http://centricle.com/ref/css/filters/), among other sites.
Filtering Out Specific Browsers
As you learned in [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch18.html#ch18 Hour 18], "Box Sizing and Offset," there is a bug in the way certain versions of Internet Explorer calculate the width (and height) of a box. This is called the IE box model bug. Versions of Internet Explorer prior to 6 (and IE 6 in quirks mode) miscalculate the box dimensions by including the border and padding in the width and height.
If you use CSS to set a box's width to 600 pixels, plus another 300 pixels of border and padding, most browsers correctly display this as 900 pixels wide. Internet Explorer makes the box 600 pixels across. If you set the width to 900 pixels, it displays as desired in Internet Explorer, but is suddenly 1200 pixels wide in compliant browsers. [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch24fig03 Figure 24.3] shows exactly this scenariothe width has been set to 600 pixels, and Internet Explorer displays it incorrectly.
It would be nice if there were a way to feed separate values for width to Internet Explorer and to browsers that respect the standards. This desire has led to the development of browser filters. A filter is a kind of browser hack that targets certain browsers by writing rules that either are ignored by only those browsers, or understood by only those browsers.
You can use browser filters to address the box model bug in Internet Explorer. One way to do this is by using a rule other browsers understand, but that Internet Explorer cannot understand, and will therefore ignore.
The Direct Child Selector Filter
In [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch08.html#ch08 Hour 8], you learned that Internet Explorer (even version 6) does not understand the direct child selector, represented by a > symbol between the parent and child elements. This means that any rule written with a direct child selector will not be understood by current versions of IE. Therefore, you can write two rules: first, a rule setting the width to the Internet Explorer dimension, and then a second rule that updates that width to the "real" value, for browsers that understand direct child selectors. [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch24ex01 Listing 24.1] is an example of this type of filter.
Listing 24.1. Using Child Selectors to Filter Out Internet Explorer
<!-- box-model-24-1.html --><br /><html><br /><head><br /><title>Box Model Woes</title><br /><style type="text/css"><br />body { font-family: Verdana, sans-serif; }<br />.bar { color: white; background: black;<br />text-align: center; margin: 1em 0; }<br />#six { width: 600px; } #nine { width: 900px; }<br />#box { width: 900px; /* The width for IE */<br />background-color: silver;<br />padding: 100px; border: 50px solid #555; }<br />html>body #box { width: 600px; }<br />/* The "real" width value */<br /></style><br /></head><br /><body><br /><div id="six" class="bar">600 pixels</div><br /><div id="box"><br /><p>This is a box displaying the box model<br />bug problem. Namely, we want it to have<br />a width of 600 pixels with a 100 pixel<br />padding on each side, and a 50 px border.<br />According to the W3C box model, the<br />box should be 600 + 100 + 100 + 50 + 50<br />= 900 pixels wide. According to Internet<br />Explorer, it should be 600 pixels wide.</p><br /></div><br /><div id="nine" class="bar">900 pixels</div><br /></body><br /></html><br /> |
The results of displaying this page in Internet Explorer 6 (not in "quirks mode," because there is no <!DOCTYPE> in [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch24ex01 Listing 24.1]) are shown in [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch24fig04 Figure 24.4]. As you can see, the box is now the right size. A browser such as Firefox would also display the box at the same size because it would understand and use the real value of 600px given in the child selector rule.
The embedded style sheet in [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch24ex01 Listing 24.1] first sets the width to the wrong value of 900px, and then corrects it with the subsequent rule, which IE ignores. Another way to use a browser filter is to write a rule that is ignored by all other browsers, but understood by only the targeted browser. This is the opposite approach to the method in [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch24ex01 Listing 24.1].
The Star HTML Filter
Internet Explorer, up to and including version 6, has a minor bug. IE believes that there is an invisible, unknown element that contains the <html> element. No other browser has this quirk, but if you write a rule such as the following, Internet Explorer will apply it:
* html p { color: blue; }
Such a rule will make your paragraph tags blue, but only in IE. Any other browser would look first at the universal selector (*) and then at the html element selector, and conclude that there's no parent element that contains htmlso the rule won't apply to anything. Web designers call this the star HTMLfilter or star HTML hack.
[file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch24ex02 Listing 24.2] is a style sheet that uses this particular quirk to write a style rule just for Internet Explorer; this style sheet is a replacement for the embedded style sheet in [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch24ex01 Listing 24.1].
Listing 24.2. A Style Sheet That Uses the Star HTML Filter
body { font-family: Verdana, sans-serif; }<br />.bar { color: white; background: black;<br />text-align: center; margin: 1em 0; }<br />#six { width: 600px; } #nine { width: 900px; }<br />#box { width: 600px; /* The correct width */<br />background-color: silver;<br />padding: 100px;<br />border: 50px solid #555; }<br />* html #box { width: 900px; }<br />/* The width for only Internet Explorer */<br /> |
Internet Explorer displays the box correctly when this rule is used. IE actually reads both rules in this case, both the width of 600px and the width of 900px. It chooses to use the latter rule because of the specificity calculations that you learned about [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch07.html#ch07 Hour 7]. A rule with more selectors of a given type is more specific.
So which method should you use? There are advantages and disadvantages to both. The technique in [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch24ex01 Listing 24.1] makes the assumption that any browser that understands direct child selectors will not have the Internet Explorer box model bug, and vice versa. So far this is true, but it is somewhat shaky ground. The star HTML hack in [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch24ex02 Listing 24.2] presumes that every browser that recognizes the nonsensical * html selector will also have a broken box model algorithm. Each hack therefore depends upon two unrelated bugs or quirks to function.
What if the next version of Internet Explorer fixes one of the bugs used in a hack but not both? For example, what if Internet Explorer 7 stopped believing in a fictional parent for <html>, but still had the box model bug in quirks mode? What if Internet Explorer suddenly understood child selectors?
In fact, it appears that exactly this situation has come trueas this book is being written, Internet Explorer 7 is available in only a preview release, but Microsoft's developers have warned that the star HTML selector won't be recognized by IE7, and direct child selectors will be understood. However, not all CSS bugs in IE6 will be fixed in IE7. Some web designers are upset by thistheir browser hacks will break in IE7.
Conditional Comments
Microsoft has recommended that web developers stop using filters that target Internet Explorer for inclusion or exclusion, such as the direct child hack or the star HTML hack. Instead, they promote the use of conditional comments.
Conditional comments are HTML markup following the general syntax of normal commentsthey begin with . This means that most browsers ignore anything between those markers, even if it looks like normal HTML tags.
However, Internet Explorer will look inside certain comments if they contain a conditional statement. These conditional statements enable you to embed within the comments some HTML tags that will be read only by Internet Explorer. You can even refine these conditional statements further by requiring that only IE browsers of a certain version read the HTML that is contained.
Here are several examples that illustrate the syntax for conditional comments:
<!--[if IE]> <p>Internet Explorer detected!</p> <![endif]--> <!--[if IE 6]> <p>Congratulations (or condolences), you're using IE 6.</p> <![endif]--> <!--[if lte IE 5.5]> <p>I'm sorry, you're using an earlier version of IE.</p> <![endif]-->
If you viewed this HTML code in a non-Microsoft browser, such as Firefox, you wouldn't see any of these messages, as anything between the is ignored as a comment. But if you view this in Internet Explorer, you will see a message dependent upon your browser version.
Conditional statements can be as simple as [if IE] (to match all versions of Internet Explorer from 5.0 onward, when conditional comments were introduced), or more complex statements with the modifiers lt (less than), gt (greater than), lte (less than or equal to), or gte (greater than or equal to) matching against specific browser version numbers.
HTML-style comments aren't allowed inside style sheets, including embedded style sheets, so you can't use conditional comments mixed directly into your CSS rules. To use conditional comments with CSS, create one or more extra <style> or <link> elements containing style rules for Internet Explorer, and then wrap them in an appropriate conditional comment. [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch24ex03 Listing 24.3] contains an example that illustrates how to use conditional comments instead of the star HTML hack to fix box model problems.
Listing 24.3. An HTML File Containing a Conditional Comment
<!-- box-model-24.3.html --><br /><html><br /><head><br /><title>Box Model Woes</title><br /><style type="text/css"><br />body { font-family: Verdana, sans-serif; }<br />.bar { color: white; background: black;<br />text-align: center; margin: 1em 0; }<br />#six { width: 600px; } #nine { width: 900px; }<br />#box { width: 600px; /* the real width */<br />background-color: silver;<br />padding: 100px; border: 50px solid #555; }<br /></style><br /><!--[if lte IE 6]><br /><style type="text/css"><br />/* the width for Internet Explorer */<br />#box { width: 900px; }<br /></style><br /><![endif]--><br /></head><br /><body><br /><div id="six" class="bar">600 pixels</div><br /><div id="box"><br /><p>This is a box displaying the box model<br />bug problem. Namely, we want it to have<br />a width of 600 pixels with a 100 pixel<br />padding on each side, and a 50 px border.<br />According to the W3C box model, the<br />box should be 600 + 100 + 100 + 50 + 50<br />= 900 pixels wide. According to Internet<br />Explorer, it should be 600 pixels wide.</p><br /></div><br /><div id="nine" class="bar">900 pixels</div><br /></body><br /></html><br /> |
The net result of this style sheet is identical to that in [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch24ex02 Listing 24.2], which used the star HTML filter. Most browsers receive only the first width rule, and Internet Explorer receives both. In this case, both rules have the same selector (#box) and thus the same specificity; therefore, the one defined later in the HTML source code is used. The result of displaying this web page is identical to that shown in [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch24fig04 Figure 24.4].
Hiding Content Meant for Screen Readers
When you are designing a web page, it's important for you to consider the needs of users with disabilities, as you learned in [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch22.html#ch22 Hour 22], "Accessibility and Print Media." Using CSS means you're already off to a good start toward meeting those needs as a natural consequence of good web design techniques.
Sometimes there is a perceived conflict between designing a page that is accessible and designing one that is visually attractive. For example, web accessibility checklists such as the U.S. government's Section 508 requirements (http://www.access-board.gov/sec508/guide/1194.22.htm) require web designers to provide links that skip over navigation lists and go directly to the main content of the page. Such a link might look like this:
<p class="skiplink"><a href="#content">Skip Navigation</a></p> <ul> <!-- navigation links would be listed here --> </ul> <h1><a name="content">Main Content</a></h1>
This provides easy access for users with screen readers, giving them a shortcut to avoid listening to long and possibly repetitive lists of links before getting to the main content of the site. However, this method also presents a problem: The text Skip Navigation is visible onscreen to all users and is a clickable link, but it doesn't actually seem to do anything, and the meaning of the text Skip Navigation is undoubtedly opaque to the average visually dependent web user. A web designer concerned with the visual appearance of the page is likely to want to hide these links.
Another example would be the ubiquitous search box. As you learned in [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch14.html#ch14 Hour 14], "Forms," the <label> tag can be used to provide a text label for an HTML form element. But what about a short form like this?
<form method="post" action="search.php"> <input type="text" id="searchtext"> <input type="submit" value="Search!"> </form>
This type of form can be found around the Web, and for most users it is quite obvious what it does: You type something in the box and press the button and it searches. You know this because you can see the button labeled Search! to the right of the box. Visually impaired users, however, don't hear the search button first because web pages are read in order by screen readers. They hear an announcement of the input box, and don't know what to type because they don't hear the word "Search!"
The obvious solution is to add a <label> element telling the user it it's a search box, like this:
<form method="post" action="search.php"> <label for="searchtext">Search:</label> <input type="text" id="searchtext"> <input type="submit" value="Search!"> </form>
This works great for screen reader users. However, to a web designer focused on the visual appearance, the label takes up extra space and unnecessarily repeats the word "Search."
The most obvious solution is to write a CSS rule to hide the display of the label text. That would be something simple such as
label { display: none; }
This seems straightforward and simple, and many web designers using CSS seem to think this would work. A very famous "image replacement technique" using this method was promoted by the big names in CSS-based web designuntil it was discovered that it does not work. Why not?
Screen readers are a very specific type of technology; they read what is on the screen. If something is not displayed on the screenwhich is what display: none doesthen the screen reader doesn't read it. This is also why it doesn't work to simply add an @media rule; screen readers don't actually use the media type "aural" but instead read out the text as displayed visually by the browser.
A number of alternative methods for hiding material from visual browsers but still making it accessible to screen readers have been proposed over the years, many of them without being tested first in actual screen readers. Bob Easton has compiled a chart testing each of these methods in leading screen readers and makes the results available at http://www.access-matters.com/screen-reader-test-results/.
From those results, it has become clear that the most reliable method to hide content while keeping it accessible to screen readers is called the off-left technique. In short, you use absolute positioning to place the hidden content way off to the left side of the screen, where it can't be seen but is still read out loud by screen readers. [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch24ex04 Listing 24.4] shows how you can use off-left placement to hide the .skiplink and <label> in the example HTML fragments.
Listing 24.4. A Style Sheet That Visually Hides Content but Leaves It Available for Screen Readers
.skiplink, label {<br />position: absolute;<br />left: -999px;<br />width: 90px; }<br /> |
./ ADD NAME=CH24LEV1SEC3.HTML Proprietary CSS
Many web browsers can understand and apply more CSS properties than simply the ones listed in the CSS 2.1 specification. These additional CSS properties can expand your capabilities to style a page, but are usually restricted to only one or two browsers. Such properties are called proprietary CSS styles. Rather than being part of the standards agreed to by all browsers and developed by the World Wide Web Consortium (W3C), these CSS properties were created by the browser companies themselves. As such, they can be rather unreliable; browsers that don't understand these additional properties just ignore them.
Most responsible browser companies give these properties names that make it clear they are not ordinary CSS properties, but something proprietary. The most common way to do this is with a prefix on the property name identifying the browser or browser company. For example, proprietary properties recognized by Mozilla's Gecko layout engine all begin with -moz- (for Mozilla).
In the remainder of this hour, you'll learn about some of the proprietary extensions to the CSS language that can be used in current browsers. This isn't an extensive list; instead it's meant to make you familiar with the concept of proprietary CSS and the limitations involved as well. For more details on which specific proprietary values are supported by the browsers, see each browser's documentation website.
Opacity
One ability web designers greatly desire is to control the opacity of an objecthow opaque or transparent it is. An object that is partially opaque is partially transparentmeaning that anything placed behind it can be seen through that object. Control over the opacity of a content block is not available in CSS 2.1. You can't do it under the current standards.
However, in the proposed drafts for CSS Level 3, there is an opacity property. This property can be assigned values from 0.0 (completely transparent) to 1.0 (completely opaque), with a default value of 1.0.
Some browser companies have implemented opacity in their browsers. However, as the CSS3 specification is still being written, it's not exactly prudent to use the draft as a reference. If the W3C's working group decided to change the definition of the opacity propertyfor example, to change it to a percentage scalethen web pages built with the early implementations would break.
To prevent these types of problems, the programmers working on the Gecko layout engine (used in Firefox and related browsers) chose to call this property -moz-opacity, and the creators of the KHTML layout engine (used in Konqueror) named it -khtml-opacity.
This is both responsible behavior and rather frustrating to web designers, because it means that to create an opaque content block, you need to set three properties: -moz-opacity, -khtml-opacity, and opacity itself, for those browsers such as Safari that jumped the gun and implemented the CSS3 version.
The situation is even more complex, thanks to Internet Explorer. Internet Explorer doesn't attempt to implement an opacity property a la the CSS3 standard. Instead, Internet Explorer provides what it calls the filter property, which lets you define IE-only transformations on any content block. One of those filters is the opacity filter, and that's what you use to get the same effect as the CSS3 opacity property.
The syntax for the filter property is very different from the opacity (and -moz-opacity and -khtml-opacity) property: It uses percentages instead of a decimal number between 0 and 1. The four methods for setting opacity to 65% are shown in [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch24ex05 Listing 24.5]. [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch24fig05 Figure 24.5] demonstrates how this is displayed in a web browser.
File:24fig05.jpg
Listing 24.5. Four Different Rules to Modify Opacity
<!-- opacity-24.5.html --><br /><html><br /><head><br /><title>Tucson Transfer Building</title><br /><style type="text/css"><br />body { margin: 0; padding: 0;<br />background-color: #6666CC;<br />background-position: top center;<br />background-repeat: none;<br />background-image: url("tucson-transfer.jpg");}<br />h1 { margin-top: 50px; margin-left: 5%;<br />width: 40%; text-align: center;<br />font-family: Optima, sans-serif;<br />background: black; color: white; }<br />#caption<br />{ width: 40%; position: absolute;<br />font-family: Optima, sans-serif;<br />top: 50px; right: 5%; padding: 0 0.5em;<br />background: white; color: black; }<br />#footer<br />{ font-size: small; margin: 1em;<br />padding: 0 0.75em;<br />border: 0.5em solid black; }<br />/* opacity rules: */<br />#caption, h1<br />{ opacity: 0.65;<br />-moz-opacity: 0.65;<br />-khtml-opacity: 0.65;<br />filter: alpha(opacity=65); }<br /></style><br /></head><br /><body><br /><h1>Tucson Transfer Building</h1><br /><div id="caption"><br /><p>The Tucson Warehouse and Transfer Company building is<br />located at the corner of 6th Street and 7th Avenue<br />in Tucson.</p><br /><p>The building is currently occupied by a number of<br />businesses, including an architectural firm and a<br />plumbing supply company.</p><br /><p>One of the early African-American pioneers of<br />Tucson, Henry Ransom, worked at the Tucson Transfer<br />Company from 1892 until his retirement in 1931.</p><br /><div id="footer"><br /><p>This page is part of the<br /><a href="http://kynn.com/projects/heritage-tour/"<br />>Tucson Black Heritage Tour</a></p><br /></div><br /></div><br /></body><br /></html><br /> |
Microsoft's filter Property
Microsoft's Internet Explorer understands a proprietary CSS property known as filter; the preceding section of this hour showed you how to use filter to change the opacity of a content box. Additional filters are supported by Internet Explorer versions 4 or later; these include those shown in [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch24table01 Table 24.1].
| Filter Value | Visual Effect |
| alpha(opacity=percent) | Changes the opacity |
| blur(direction=degrees, strength=px) | Applies a motion blur effect |
| chroma(color=rgb) | Sets one color as transparent |
| dropshadow(color=rgb, offX=px, offY=px) | Creates a shadow effect |
| fliph | Flips along the horizontal axis |
| flipv | Flips along the vertical axis |
| glow(color=rgb, strength=px) | Surrounds with a glow effect |
| gray | Converts to 256-color grayscale |
| invert | Displays in "negative" colors |
| light | Shines a light source on an object |
| mask(color=rgb) | Reveals transparent pixels and hides others |
| shadow(color=rgb, direction=degrees, strength=px) | Adds a shadow effect |
| wave(freq=num, phase=percent, strength=px) | Applies a sine wave distortion |
| xray | Displays in stark black-and-white |
You use these filter values with the filter proprietary property, as you did earlier to change opacity. For example, to create a shadow in Internet Explorer, you can write the following CSS rule:
img.shadowed { filter: shadow(color=#808080, direction=135, strength=5); }
This creates a shadow around any <img> that has the shadowed class; the shadow will be gray in color, will be offset 135° (with 0° pointing toward the top of the screen), and will extend for 5 pixels.
Internet Explorer version 5.5 and later versions support additional filters and use a more complex syntax, although they also understand the IE4 versions. As an example, to write a rule using the fliph and glow filters in Internet Explorer 4 syntax, you can write
h3 { filter: fliph glow(color=lime, strength=5); }
The Internet Explorer 5.5 version of this rule is:
h3 { filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2, mirror=1)
progid:DXImageTransform.Microsoft.Glow(color=lime, strength=5); }
For full details on Internet Explorer filters, see the Microsoft Developer Network Site page at http://msdn.microsoft.com/library/default.asp?url=/workshop/author/filter/reference/reference.asp, which has documentation and sample code.
Mozilla Corners
In [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch19.html#ch19 Hour 19], "Absolute and Fixed Positioning," you learned how to create rounded corners on boxes by using images, absolute placement, and trimming. Browsers based on the Gecko layout engine, such as Firefox, Camino, or SeaMonkey, recognize proprietary CSS properties that enable you to create these effects entirely with styles instead of images.
[file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch24table02 Table 24.2] is a listing of these properties. Each property begins with the -moz- prefix to indicate that these are proprietary properties. Other browsers don't recognize these properties; they are ignored silently, and the corners of selected boxes remain square.
| Property Name | Effect |
| -moz-border-radius | Sets the radius for all four corners. |
| -moz-border-radius-bottomleft | Sets the radius for the bottom-left corner. |
| -moz-border-radius-bottomright | Sets the radius for the bottom-right corner. |
| -moz-border-radius-topleft | Sets the radius for the top-left corner. |
| -moz-border-radius-topright | Sets the radius for the top-right corner. |
The -moz-border-radius property is similar to the border, margin, and padding properties in that you can give it one, two, or four values. If one value is given, then the border radius for each corner is set to that value. If two are given, the first value is applied to the top-left and bottom-right corners, and the second value to the top-right and bottom-left. If four values are given, they are assigned to the top-left, top-right, bottom-right, and bottom-left corners respectively.
The values for the properties in [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch24table02 Table 24.2] can be measurements such as 2em or 12px, or percentages based on the height of the box. These measurements indicate how far in from the corner, in both directions, the radius of a circle should be drawn. The edge of the box is then wrapped along that circle, and the border (if any) is drawn on that edge. If there is a background, the background ends at the newly drawn quarter-circle edge rather than continuing to fill out to the corner of the box.
[file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch24ex06 Listing 24.6] gives an example of the corner properties in use. Each box is styled with a different radius for illustrative purposes.
Listing 24.6. Boxes with Curved Corners
<!-- rounded-corners-24.6.html --><br /><html><br /><head><br /><title>Daily Reminder List</title><br /><style type="text/css"><br />body { margin: 0; padding: 2em;<br />font-family: Verdana, sans-serif;<br />color: black; background: white; }<br />h1 { padding: 0.5em; margin: 0;<br />border: 2px solid black;<br />background-color: silver;<br />-moz-border-radius: 0.75em; }<br />#todo { border: 3px solid gray; padding: 25px;<br />width: 40%; position: absolute;<br />left: 2em; top: 8em;<br />-moz-border-radius: 0 10%; }<br />#schedule { border: 3px solid gray;<br />width: 40%; position: absolute;<br />right: 2em; top: 8em; padding: 25px;<br />-moz-border-radius: 20px 300px 65px 0; }<br />#schedule dl { margin-left: 20%; }<br />#schedule dt { float: left; width: 20%;<br />margin-left: -20%; text-align: right;<br />font-weight: bold; font-size: small; }<br />#schedule dd.empty { background-color: silver; }<br />#schedule dd { margin: 3px 0; width: 60%;<br />height: 1.5em; padding: 2px 10px;<br />background-color: gray; color: white;<br />-moz-border-radius: 50%; }<br /></style><br /></head><br /><body><br /><h1>Daily Reminder List</h1><br /><div id="todo"><br /><h2>Things to Do</h2><br /><ul><br /><li>Feed the cat</li><br /><li>Pay bills</li><br /><li>Laundry</li><br /><li>Change the oil</li><br /><li>Call mom and dad</li><br /><li>Go shopping</li><br /></ul><br /></div><br /><div id="schedule"><br /><h2>Today's schedule</h2><br /><dl><br /><dt>9:00</dt><dd class="empty"></dd><br /><dt>10:00</dt><dd>Conference call</dd><br /><dt>11:00</dt><dd class="empty"></dd><br /><dt>12:00</dt><dd>Lunch</dd><br /><dt>1:00</dt><dd>Client Meeting</dd><br /><dt>2:00</dt><dd class="empty"></dt><br /><dt>3:00</dt><dd>Staff Party</dd><br /><dt>4:00</dt><dd class="empty"></dd><br /><dt>5:00</dt><dd class="empty"></dd><br /></dl><br /></div><br /></body><br /></html><br /> |
[file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch24fig06 Figure 24.6] shows how these boxes appear in a Gecko-based browser.
./ ADD NAME=CH24LEV1SEC4.HTML Summary
To properly troubleshoot your style sheet, you need to start with valid HTML and CSS. The W3C's online validators can check for problems in your code and offer warnings about possible problems. After you have eliminated syntax errors, you should simplify your code until you spot the source of your problems.
If it turns out that you're dealing with a browser bug or quirk, you may need to use a browser hack to fix the problem. Most browser hacks rely on using one bug to fix another, including browser filters that exclude or include targeted browsers. Examples include the direct child selector hack and the star HTML hack, which can be used in rules targeting Internet Explorer quirks and bugs. You can also use Microsoft's conditional comments to provide rules that are recognized by only Internet Explorer.
Some browsers have extended the CSS they recognize beyond the specifications written by the W3C; the results are proprietary CSS properties. Examples of proprietary properties include the various versions of opacity, Internet Explorer's visual transformation filters, and Gecko's rounded corners.
./ ADD NAME=CH24LEV1SEC5.HTML Workshop
The workshop contains a Q&A section, quiz questions, and an exercise to help reinforce what you've learned in this hour. If you get stuck, the answers to the quiz can be found after the questions.
Q&A
| [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch24qa1q1a1 Q.] | The HTML and CSS validators provide little buttons saying my code is valid. Should I use those? |
| [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch24qa1q1 A.] | It's really up to you. As a matter of aesthetics, most websites aren't designed to look good with those graphics slapped onto them; the colors, fonts, and designs of the buttons aren't guaranteed to be compatible with any random site you might create. Furthermore, the information conveyed"valid HTML!"will mean nothing to your target audience for your site, unless you are designing a website for web developers.
On my personal sites, I usually use a simple text link to the validators. Keep in mind that by putting up one of these buttons or links, you are obligating yourself to validate your HTML and CSS each and every time you make a change. It's really embarrassing to proudly proclaim your compliance with the standards, then have someone email you that the site isn't really valid CSS because you wrote pudding for padding! |
| [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch24qa1q2a2 Q.] | What should I use to filter for Internet Explorer? |
| [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch24qa1q2 A.] | Before Internet Explorer 7 came on the scene, both of the CSS-based filtering techniques given in this hour would have worked welldirect child selectors and star HTML selectors. With IE7 promising to fix both of these bugs, hacks that rely on them will no longer function for version 7 (but will still work in earlier versions). For this reason, conditional comments seem to be the safest bet. |
Quiz
| [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch24qa2q1a1 1.] | Which of the following is not a benefit of validating your HTML and CSS?
#
You will find typographical errors in the names of CSS properties.
|
| [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch24qa2q2a2 2.] | You want to make an image appear to be 50% transparent. Which set of rules accomplishes this on the widest variety of browsers?
#
img.fade { opacity: 50%; -khtml-opacity: 50%;<br />-moz-opacity: 50%; -ie-opacity: 50%; }<br />
|
| [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch24qa2q3a3 3.] | You want to send a style rule to Internet Explorer only (versions 6 or lower). Can you name at least three ways to do this? |
Answers
| [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch24qa2q1 1.] | (c) is not a benefit of validation; if you try to validate a style sheet with proprietary CSS properties, you will get an error message. |
| [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch24qa2q2 2.] | The correct answer is (c). There is no property named -ie-opacity, and the other opacity values must be written as decimal numbers between 0 and 1, not as percentages. |
| [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch24qa2q3 3.] | The three methods you learned in this hour were the direct child selector browser filter, the star HTML selector browser filter, and conditional comments. |
Exercise
Your ability to test browser filters depends on which browsers and operating systems you have access to. To better understand browser filtering, use the Centricle listing of filters (http://centricle.com/ref/css/filters/) to discover hacks that target your specific browsers, and write rules that apply to those browsers only. Validate your code to see whether the browser filters are producing legitimate CSS. If your browsers support proprietary CSS properties, add those to your style sheet and then validate. What does the validator seem to think of your non-standard CSS?