User:Bartlett/03

Hour 3. Browser Support for CSS

What You'll Learn in This Hour

• How web browsers fail to support CSS correctly
• The consequences of browser failure
• What the Acid2 test is and what it measures
• What a layout engine is and how it affects your web page
• How current browsers implement Cascading Style Sheets
• How screen readers work with browsers to speak web pages to blind users

CSS rules are always interpreted by web browsers, just as the HTML pages those rules style are interpreted. The HTML and CSS standards give specifics on how browsers should display those rules—but they're not always followed. To design pages with CSS, you not only need to know the standards, as presented in the CSS specification, but also understand how browsers' quirks and flaws will affect your web design results.

Modern Browsers and CSS

From the perspective of a CSS designer, the most important part of the web browser is not the menu bar, the tabbed window interface, or even the security and privacy features. The true heart of a web browser is its layout engine.

The layout engine is the part of the browser program that reads an HTML page and applies the browser's default style rules, the user's personal style sheet (if any), and the style sheets associated with the page being displayed. The colors, fonts, page layout, and other properties controlled by HTML and CSS are all applied by the layout engine, which presents the page content to the user.

This is also where you find browser bugs and quirks that affect CSS usage. The layout engine is the primary determinant of whether a browser is broken, quirky, or compliant.

In modern web browsers, the layout engine is modular and can be used by other applications. For example, the layout engine used in Firefox is known by the code-name Gecko. (All layout engines have code-names which are, essentially, arbitrarily chosen and don't really mean anything in particular.) Gecko is an open-source layout engine—meaning that the code used to create the program is available on the Web for anyone to readand it has been used in other programs, such as the browsers Camino, K-Meleon, and Epiphany, as well as the email program Thunderbird. From a CSS designer's perspective, these browsers are all effectively the same as Firefox; they display CSS in the same way, and share any quirks and bugs found in Gecko.

The rest of this hour is a snapshot of the major browsers in the first part of 2006 (and some minor browsers), grouped by layout engine. Older versions of these browsers are listed as well, with advice on how these browsers will affect your web design practices.

Internet Explorer

Microsoft's Internet Explorer 6 is currently the most popular web browser; recent browser statistics show that more people use IE than all other browsers combined.

On the other hand, Internet Explorer is probably the least favorite current browser among designers who use CSS extensively. There are a number of bugs and other problems in Internet Explorer, which force it into the category of "quirky browsers." You're going to need to make special provisions for Internet Explorer if you use more complex CSS, such as advanced selectors or CSS for layout.

Did you Know?

You can download Internet Explorer 6 from http://www.microsoft.com/windows/ie/. It's available on the Windows platform only; see later this hour for details on the now-defunct Internet Explorer for Mac.

The layout engine used in Internet Explorer is code-named Trident. As the part of the web browser responsible for the display of web content, including HTML tags and CSS rules, Trident is also the source of the bugs and quirks in IE. These include problems calculating the dimensions of sized content (the "box model bug"), lack of support for advanced CSS selectors, and a number of display quirks ranging in importance from trivial to serious. You can get a list of CSS bugs from the website Position Is Everything (http://www.positioniseverything.net/).

By the Way

At the time of this book's writing, a preview version of Internet Explorer 7 is available for testing. Some, but not all, known CSS bugs in Internet Explorer 6 are being fixed in the new version. Because of the unstable nature of pre-release software, this book doesn't cover any Internet Explorer 7 CSS quirks or bugs.

Internet Explorer Shells

An Internet Explorer shell is a browser which uses the Trident layout engine from Internet Explorer but provides its own user interface frameworkthe buttons, bars and menus that drive the program. This means that the look of the browser may not resemble Internet Explorer at all, but under the hood, it displays websites just as Internet Explorer would. Early IE shells were created for corporate branding purposes, but recent browsers based on Trident have focused on providing a better browsing experience for the user.

Maxthon from MySoft (http://www.maxthon.com/) is an example of such a shell. It adds features from other browsers such as tabbed browsing and ad blocking, while using the Trident layout engine for HTML and CSS display. This means that Maxthon inherits all of Internet Explorer 6's CSS quirks and bugs.

Fortunately, you don't need to do anything else to support users of Internet Explorer shells than you're already doing for IE 6 itself. Maxthon users don't need special attention beyond any browser hacks you might put in place anyway.

Other examples of Internet Explorer shells include America Online's AOL Explorer (http://downloads.channel.aol.com/browser) and Avant Browser (http://www.avantbrowser.com/).

Older Versions of Internet Explorer

Internet Explorer 3 was the first major browser to implement cascading style sheetsor rather, it was the first to attempt to do so. By all measures it failed horribly in the attempt, producing nightmares for many early adopter web designers who tried to use CSS. Internet Explorer 4 was almost as bad, but things started slowly getting better in IE 5 and 5.5.

The early, buggy versions of Internet Explorer are all but gone from the Web, but you may still have to deal with Internet Explorer 5 and 5.5. These versions had decent CSS support but a number of serious problems related to page layout. In [ch24.html#ch24 Hour 24], you'll learn several ways to selectively hide or target CSS rules for those versions of Internet Explorer.

Firefox

One of the earliest graphical browsers was called Netscape. Netscape was the top dog of browsers until Microsoft threw its market dominance around and knocked Netscape out of the competition. The Netscape browser eventually became part of the open source movement, in a project code-named Mozilla.

Mozilla Firefox is an open-source browser developed by the Mozilla Foundation and is available on a wide variety of platforms, including Microsoft Windows, Mac OS X, and Linux and other Unix-like operating systems. The most recent version, as this book is being written, is Firefox 1.5. Firefox provides standard features found on most browsers such as tabbed browsing, pop-up blocking, and good support for user style sheets.

Did you Know?

You can download Firefox for a wide variety of platforms from http://www.mozilla.com/firefox/.

Firefox has very good overall CSS 2.1 support, which is one reason why it's used for the screenshots in this book. (The other reason is that it's one of the few current browsers available on all major operating systems, meaning it's very likely that anyone who picks up this book will be able to run Firefox.) There are a few quirks and bugs in Firefox, but in general you won't make big changes to your CSS or HTML to support Firefox users.

By the Way

At the time of this book's writing, a preview version of Firefox 2 is available for testing. Because of the unstable nature of pre-release software, this book doesn't cover any Firefox 2 CSS quirks or bugs.

Other Gecko-Based Browsers

The layout engine used in Firefox is called Gecko, and it has been incorporated into a number of other browsers, some of them open source, and others that are closed but use the layout engine. Because Gecko provides a solid base for CSS implementation, you don't have any extra worries from Gecko-based browsersno more than those you have for Firefox bugs.

Netscape Browser version 8.1 (http://browser.netscape.com/ns8/, Windows only) is an example of a browser that is Gecko-basedit is proprietary software developed by Netscape Communications (part of America Online), the current owners of the "Netscape" trade name. The user interface shell is closed source, but it uses the Gecko engine. Interestingly, it also can use Internet Explorer's Trident layout engine as well on certain pages.

Making the Gecko family tree even more complicated is the Mozilla browser (http://www.mozilla.org/products/mozilla1.x/), part of the Mozilla Application Suite, which is different from Mozilla Firefox and is currently at version 1.7. Mozilla-thebrowser is now giving way to the open-source project codenamed SeaMonkey, which released version 1.0 (http://www.mozilla.org/projects/seamonkey/) in January 2006.

The Gecko layout engine is also used on several projects that give a "native" user interface environment, rather than Firefox's more generic, cross-platform user interface. Camino (http://www.caminobrowser.org/) is an open-source browser for Mac OS X that feels more like a native Macintosh application, with the Gecko engine doing the HTML and CSS display. K-Meleon (http://kmeleon.sourceforge.net/) does the same for the Microsoft Windows operating system, and Epiphany (http://www.gnome.org/projects/epiphany/) is the native Linux and Unix-like browser with a Gecko layout engine foundation.

Other examples of Gecko-based browsers include Flock (http://flock.com/) and Galeon (http://galeon.sourceforge.net/).

Older Versions of Netscape

Ancient versions of Netscapesometimes also called Netscape Navigator and Netscape Communicator, depending on the corporate policy of any given timehad no CSS support; Netscape 3 wouldn't recognize CSS rules or related attributes and elements. This actually made it a good test case for web developers who wanted to see how their sites would work without style sheets. These days, however, nobody uses Netscape 3 or earlier versions.

Netscape 4 was released in June 1997 and had notoriously bad CSS support. Version 4.02 contained a bug that would cause the entire browser to crash upon reading certain perfectly valid CSS rules. Later versions of Netscape in the 4.x series gradually improved their support for CSS, but even by the release of Netscape 4.8, it was still a very buggy browser that required major work-arounds to do complex CSS layouts.

Fortunately for web developers, Netscape 4 is all but dead. These days it is used by so few people that there's really little point in using the classic work-arounds and browser hacks for Netscape 4. Unless you are very conscientious, or somehow dealing with a group of primitive users who run Netscape 4 on stone computers, you won't have to make changes to your CSS or HTML to deal with Netscape 4.

Netscape 5 actually wasn't released; the browser developers skipped the numbering to "catch up" to Internet Explorer 6. Netscape 6 was the first Mozilla release, using the new Gecko engine developed by open source developers. The Gecko support for CSS started out strong and has gotten stronger since. In general, there are very few times in which you'll need to use browser hacks to deal with bugs in Netscape 6.2 or later.

Did you Know?

The Netscape website has an incomplete archive of old versions of Netscape for testing. As of early 2006, this appears to be unavailable, but you can find archived versions of Netscape browsers at http://browsers.evolt.org/.

Opera

The Opera browser was developed by Opera Software of Oslo, Norway, and runs on Microsoft Windows, Mac OS X, and Linux and Unix-like operating systems. The current version is Opera 8.5, and it uses a layout engine named Presto. Presto has good support for CSS, which isn't that surprising considering that Håkon Wium Lie, one of the creators of the CSS specification, is a long-time Opera employee. Opera is also very customizable, and has good support for user-defined style sheets and user configuration options.

Did you Know?

You can download Opera for a wide variety of platforms from http://www.opera.com/.

In general, there are very few situations in which you will need to provide special code for Opera only. Opera's CSS 2.1 support is generally quite solid and it does CSS-based layout without major problems.

By the Way

At the time of this book's writing, a preview version of Opera 9 is available for testing. The new version of Opera promises even better support for CSS; in late March, 2006, the Web Standards Project announced that Opera 9 passed the Acid2 test. Because of the unstable nature of pre-release software, this book doesn't cover any Opera 9 CSS quirks or bugs.

Early versions of Opera quickly gained a reputation for excellent CSS supportrelative to the existing browsers in the market. The 5.0 and 6.0 versions have seen Opera drop back into the middle of the pack for CSS support; there are some serious CSS limitations and bugs in Opera versions before Opera 7.

Fortunately, Opera users tend to be well informed about new browser releases and transition relatively quickly to newer, less buggy versions. For this reason, the older versions of Opera are not a serious problem at this time and rarely need any special attention.

Safari

Safari is Apple Computer's web browser for the Mac OS X operating system. The layout engine in Safari is called WebCore and is based on the KHTML layout engine from Konqueror (which you'll learn about in just a moment). There are two current versions of SafariSafari 2 runs on Mac OS X version 10.4, and Safari 1.3 is for Mac OS X version 10.3. The layout engine is almost the same between the two versions, so for CSS purposes they're effectively the same browser.

Safari supports nearly all of CSS 2.1, including advanced selectors and CSS-based layout. You won't have many problems from Safari when you write standard CSS. In April 2005, it was reported that Safari 2 had successfully passed the Acid2 test.

Older versions of Safari had numerous CSS bugs, but Apple's software developers have been diligently rooting them out. The Safari browser is included with the Mac OS X operating system, and is automatically updated by Apple's software update program. This means very few users will have-out-of date versions of Safari; you won't have to worry about older, buggy versions.

Did you Know?

Apple's website for Safari is http://www.apple.com/safari/, and you can also install the most recent version through Software Update.

Konqueror

Konqueror is an open-source browser developed as part of the K Desktop Environment (KDE) by volunteers for Linux, BSD, and other Unix-like operating systems. In addition to being a web browser, it also functions as a file manager and file viewer.

Konqueror uses a layout engine called KHTML, which was incorporated into Apple's WebCore layout engine. Konqueror also can operate in a mode where it uses Mozilla's Gecko layout engine.

In general, Konqueror's support for CSS is good, thanks in part to the contributions of Apple's WebCore developers back into the KHTML project, and in part because of the efforts of KDE's volunteers. In June 2005, Konqueror passed the Acid2 test from the Web Standards Project. Because of this high level of CSS support and Konqueror's small user base, you likely will never have to pay any special attention to Konqueror.

Did you Know?

You can download Konqueror from the KDE website at http://konqueror.kde.org/.

WebCore

WebCore is the name of Apple's KHTML-derived layout engine for Mac OS X, which has been incorporated into other applications that need HTML rendering functions. Such applications have no more and no fewer problems than does Safari when it comes to CSS display; whatever you do for Safari will benefit these browsers as well.

The OmniWeb browser is one of the older small browsers still around, originally written in 1995 for the NeXTSTEP platform. Created by the Omni Group, OmniWeb first used its own proprietary layout engine, but in 2003 switched to using Apple's WebCore.

Did you Know?

OmniWeb is available for Mac OS X from http://www.omnigroup.com/applications/omniweb/.

Other Browsers

In addition to the major browsers listed here, there are a number of smaller, less frequently used browsers you should be aware of. A huge list of many browsers can be found at the Evolt browser archive, http://browsers.evolt.org/. It's also important for you to understand screen readers, a type of assistive technology employed by users who are blind.

Lynx

Lynx is an old classic browser, which is most commonly used at a shell window or command prompt. Versions of Lynx can run on any system, although it is most commonly used on Unix-like operating systems, such as Linux or Mac OS X.

Lynx doesn't display images. It doesn't display colors. It doesn't do tables. It's the prototypical text-only browserand it definitely doesn't do CSS. This actually makes it ideal for testing your CSS-based designs to ensure that the underlying page can be used even if the style sheets are not understood.

[ch.htm#ch03fig03 Figure 3.3] is an example of how Lynx displays the author's websiteby ignoring the style sheet. You can compare this with [ch01lev1sec3.html#ch01fig02 Figure 1.2] in [ch01.html#ch01 Hour 1], which shows the same site in Firefox.

Figure 3.3. Lynx displays the author's personal website. [images/03fig03_alt.jpg [View full size image]]File:03fig03.jpg

Did you Know?

The download site for Lynx is http://lynx.isc.org/, and the browser runs on many operating systems.

Many people use Lynx because it provides a faster and simpler interface to the Web, without the extra download time of a graphical browser. Other examples of similar text-based browsers include Links (http://links.sourceforge.net/) and w3m (http://w3m.sourceforge.net/).

iCab

iCab is a web browser created by Alexander Clauss of Germany, and is available for both Mac OS X and for earlier versions of Mac OS, making it the primary browser for Macintosh users who have not upgraded beyond Mac OS 9. The CSS support in iCab is good, and in June 2005 it was reported that iCab was the second browser to pass the Acid2 test. This high level of CSS support plus the small user base of iCab mean that you are not likely to need to make special considerations for iCab.

Did you Know?

You can download iCab for Mac OS X (or earlier versions of Mac OS) from http://www.icab.de/.

Internet Explorer for Macintosh

Even though they both originated at Microsoft around the same time, Internet Explorer for Windows and Internet Explorer for Macintosh are literally different pieces of software that confusingly share the same name. Internet Explorer for Mac was bundled with new Apple computers for years, and for a while was the best browser for Macs. In fact, it was probably the best browser for any operating system in 2000.

Internet Explorer for Mac was developed separately from the Windows version, and had a number of features that its Windows counterpart didn't have. From a CSS perspective, the most important of these was the layout engine, code-named Tasman, which provided superior (but quirky) CSS support, especially when compared with Trident, the equivalent in Internet Explorer on Windows.

You'd have to worry about providing support for Internet Explorer for Mac, except for one thing: It's officially dead. The last version for Mac OS X was 5.2.3, and 5.1.7 for Mac OS 8 and 9both released in June 2003. Microsoft no longer has programmers working on it, Apple no longer bundles it with new computers, and as of January 2006 you can't even download it from Microsoft's site. They tell you to use Safari instead.

That's kind of a shame, really, but it makes your job easier as a web developervery few people are using Internet Explorer for Mac, and so you probably won't need to use the Mac IE workarounds from [ch24.html#ch24 Hour 24].

Screen Readers

A screen reader is a specialized piece of software that works between the operating system and applications to read out a program's output to a user who is blind or visually impaired. This allows someone to access and use your website even if she is unable to see it.

The term "screen reader" is descriptive; most screen readers literally read only whatever they see on the screen. A screen reader needs to work with a browser to access the Web. The most common screen readers, such as JAWS or WindowEyes, are available only for Microsoft Windows, and work primarily with Internet Explorer.

This means that someone using a screen reader not only has to deal with the quirks of the screen reader and possible inaccessible web design techniques in the HTML, but also the CSS quirks of the browser. [ch24.html#ch24 Hour 24] has advice on how to make specific sections of your site available only to users with screen readers.

By the Way

You'll learn more about access by people with disabilities in [ch22.html#ch22 Hour 22], "Accessibility and Print Media."

Try it Yourself: Test Drive a New Browser The more browsers you use for testing, the better you'll be able to understand how your CSS works with those browsers. To get some hands-on experience with new browsers, follow these directions: > 1. Choose one or more browsers from earlier in this hour that will work on your operating system. If you've already used them all, download an older version or an alternate browser from the Evolt browser archive. 2. Install the browser and fire it up for surfing the Web. 3. Visit several websites that use CSS, including the site for this book, and the Web Standards Project, home of the Acid 2 test (http://www.webstandards.org/action/acid2). 4. How does your experience using these browsers differ from your experience using your normal browser-of-choice? Note whether the CSS support is better or worse, and rank the browser you're using as "ancient," "broken," "quirky," or "compliant."

Summary

Browser support is the key issue to understanding how to use Cascading Style Sheets effectively. Older browsers ignore CSS, compliant browsers support CSS, and other browsers provide either broken or quirky support for the standards. Knowing how to deal with the different types of browsers makes your style sheets more effective across a variety of platforms and browser versions.

The layout engine is the most important part of the browser, from a CSS perspective, as it determines how a web page is displayedand thus how web designers deal with that browser. The Acid2 test was developed as one benchmark to measure a browser's conformance with CSS.

Internet Explorer (for Windows) is an example of a quirky browserone that requires special attention from the web designer. Firefox, Opera, Safari, and related browsers are generally compliant with the web standards. Web designers need to be aware of these browsers and others when using CSS.

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

Q.	Which browsers should I use?
A.	For your own personal use, you're free to use any you prefer! I like Safari and Firefox, myself. For testing purposes, as described in [ch02.html#ch02 Hour 2], "Getting Started with CSS," a good minimal set of browsers consists of Internet Explorer, Lynx, Firefox, Opera, and/or Safari. If you have access to additional platforms, you'll want to get appropriate browsers for those. In short, testing on as many browsers and platforms as possible will always be to your advantage.
Q.	Are there more browsers out there than just those you've listed? What about older versions?
A.	It turns out there are dozens and dozens of browsers that run on a wide variety of operating systems and configurations. You can find these alternate browsers, as well as older versions of more popular browsers, at the Evolt browser archive at http://browsers.evolt.org/.
Q.	What do I look for when testing a web page with a browser?
A.	Well, the most obvious thing to check for is simple access to information. Are you able to read what's on the screen and get at the content of the HTML? Next, check for functionality. You may find that some browsers make it impossible to follow links or submit forms if your style sheet is not understood. Finally, check for aesthetics: Does the page look as you want it to look, or a reasonable approximation? If so, you're in luck; if not, you may want to change your style sheet by adding or removing properties. The workarounds in subsequent hours of this book can help you figure out how to make effects work in specific browsers.
Q.	I don't have access to every browser ever created, and I certainly don't have multiple computers with a variety of operating systems. What can I do, short of spending a fortune on new hardware?
A.	For starters, you can join any number of web forums or mailing lists that support web developers. Experienced designers are usually more than happy to help out new folks learning CSS. Another resource is BrowserCam (http://www.browsercam.com/) which, for a fee, offers screenshots and even remote access on a wide variety of computer and browser combinations.

Quiz

1.	What will an older browser do if it encounters Cascading Style Sheets? Is this a good thing or a bad thing?
>	>
2.	Which browsers are the closest to being fully compliant with the CSS specifications?
3.	Why is it important to test in Internet Explorer 6?

Answers

1.	An older browserone written before the CSS recommendation was issuedwon't understand anything about Cascading Style Sheets. This is not great, but it's not bad either because CSS is designed so that if you design your style sheets correctly, your web pages will still function even with CSS unavailable. The presentation may look dull or even awful, but your message will still shine through.
2.	The best browsers for CSS support currently are Firefox 1.5 (and derivatives), Opera 8.5, and Safari. Internet Explorer 7 and Opera 9 are very promising, but were not yet officially released as of the time this book was written.
3.	It's important to test your designs in Internet Explorer 6 because it's still used by a sizable number of web surfers, and because it contains serious problems that can render your designs unusable because of quirks and bugs.

Exercise

This would be an excellent time to assemble your test suite of browsers. Using the information provided in this chapter, assemble your own set of programs that you'll use to check your designs. A variety of browsersancient, broken, quirky, and compliantis a good approach. Will you include minor browsers in your test suite? How will you deal with programs that don't run on your primary computer? If you use Microsoft Windows, you can't easily test on Safari. Write down your testing decisions and procedures.