- The Browser Problem
- Modern Browsers and CSS
- Summary
- Workshop
This chapter is from the book
This chapter is from the book
This chapter is from the book
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 read—and 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.
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/).
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 framework—the 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 sheets—or 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 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.
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.
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 browsers—no 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-based—it 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 Netscape—sometimes also called Netscape Navigator and Netscape Communicator, depending on the corporate policy of any given time—had 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.
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.
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.
Early versions of Opera quickly gained a reputation for excellent CSS support—relative 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 Safari—Safari 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.
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.
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.
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 browser—and 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.
Figure 3.3 is an example of how Lynx displays the author's website—by ignoring the style sheet. You can compare this with Figure 1.2 in Hour 1, which shows the same site in Firefox.
)
Figure 3.3 Lynx displays the author's personal website.
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.
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 9—both 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 developer—very few people are using Internet Explorer for Mac, and so you probably won't need to use the Mac IE workarounds from 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. Hour 24 has advice on how to make specific sections of your site available only to users with screen readers.