Browser Support for CSS | Page 4

[previous] [next]

Browser Support for CSS

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 (https://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 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 (https://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 (https://downloads.channel.aol.com/browser) and Avant Browser (https://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.

[previous] [next]

URL: