Home > Articles

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.

03fig03.jpg

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.

InformIT Promotional Mailings & Special Offers

I would like to receive exclusive offers and hear about products from InformIT and its family of brands. I can unsubscribe at any time.

Overview


Pearson Education, Inc., 221 River Street, Hoboken, New Jersey 07030, (Pearson) presents this site to provide information about products and services that can be purchased through this site.

This privacy notice provides an overview of our commitment to privacy and describes how we collect, protect, use and share personal information collected through this site. Please note that other Pearson websites and online products and services have their own separate privacy policies.

Collection and Use of Information


To conduct business and deliver products and services, Pearson collects and uses personal information in several ways in connection with this site, including:

Questions and Inquiries

For inquiries and questions, we collect the inquiry or question, together with name, contact details (email address, phone number and mailing address) and any other additional information voluntarily submitted to us through a Contact Us form or an email. We use this information to address the inquiry and respond to the question.

Online Store

For orders and purchases placed through our online store on this site, we collect order details, name, institution name and address (if applicable), email address, phone number, shipping and billing addresses, credit/debit card information, shipping options and any instructions. We use this information to complete transactions, fulfill orders, communicate with individuals placing orders or visiting the online store, and for related purposes.

Surveys

Pearson may offer opportunities to provide feedback or participate in surveys, including surveys evaluating Pearson products, services or sites. Participation is voluntary. Pearson collects information requested in the survey questions and uses the information to evaluate, support, maintain and improve products, services or sites, develop new products and services, conduct educational research and for other purposes specified in the survey.

Contests and Drawings

Occasionally, we may sponsor a contest or drawing. Participation is optional. Pearson collects name, contact information and other information specified on the entry form for the contest or drawing to conduct the contest or drawing. Pearson may collect additional personal information from the winners of a contest or drawing in order to award the prize and for tax reporting purposes, as required by law.

Newsletters

If you have elected to receive email newsletters or promotional mailings and special offers but want to unsubscribe, simply email information@informit.com.

Service Announcements

On rare occasions it is necessary to send out a strictly service related announcement. For instance, if our service is temporarily suspended for maintenance we might send users an email. Generally, users may not opt-out of these communications, though they can deactivate their account information. However, these communications are not promotional in nature.

Customer Service

We communicate with users on a regular basis to provide requested services and in regard to issues relating to their account we reply via email or phone in accordance with the users' wishes when a user submits their information through our Contact Us form.

Other Collection and Use of Information


Application and System Logs

Pearson automatically collects log data to help ensure the delivery, availability and security of this site. Log data may include technical information about how a user or visitor connected to this site, such as browser type, type of computer/device, operating system, internet service provider and IP address. We use this information for support purposes and to monitor the health of the site, identify problems, improve service, detect unauthorized access and fraudulent activity, prevent and respond to security incidents and appropriately scale computing resources.

Web Analytics

Pearson may use third party web trend analytical services, including Google Analytics, to collect visitor information, such as IP addresses, browser types, referring pages, pages visited and time spent on a particular site. While these analytical services collect and report information on an anonymous basis, they may use cookies to gather web trend information. The information gathered may enable Pearson (but not the third party web trend services) to link information with application and system log data. Pearson uses this information for system administration and to identify problems, improve service, detect unauthorized access and fraudulent activity, prevent and respond to security incidents, appropriately scale computing resources and otherwise support and deliver this site and its services.

Cookies and Related Technologies

This site uses cookies and similar technologies to personalize content, measure traffic patterns, control security, track use and access of information on this site, and provide interest-based messages and advertising. Users can manage and block the use of cookies through their browser. Disabling or blocking certain cookies may limit the functionality of this site.

Do Not Track

This site currently does not respond to Do Not Track signals.

Security


Pearson uses appropriate physical, administrative and technical security measures to protect personal information from unauthorized access, use and disclosure.

Children


This site is not directed to children under the age of 13.

Marketing


Pearson may send or direct marketing communications to users, provided that

  • Pearson will not use personal information collected or processed as a K-12 school service provider for the purpose of directed or targeted advertising.
  • Such marketing is consistent with applicable law and Pearson's legal obligations.
  • Pearson will not knowingly direct or send marketing communications to an individual who has expressed a preference not to receive marketing.
  • Where required by applicable law, express or implied consent to marketing exists and has not been withdrawn.

Pearson may provide personal information to a third party service provider on a restricted basis to provide marketing solely on behalf of Pearson or an affiliate or customer for whom Pearson is a service provider. Marketing preferences may be changed at any time.

Correcting/Updating Personal Information


If a user's personally identifiable information changes (such as your postal address or email address), we provide a way to correct or update that user's personal data provided to us. This can be done on the Account page. If a user no longer desires our service and desires to delete his or her account, please contact us at customer-service@informit.com and we will process the deletion of a user's account.

Choice/Opt-out


Users can always make an informed choice as to whether they should proceed with certain services offered by InformIT. If you choose to remove yourself from our mailing list(s) simply visit the following page and uncheck any communication you no longer want to receive: www.informit.com/u.aspx.

Sale of Personal Information


Pearson does not rent or sell personal information in exchange for any payment of money.

While Pearson does not sell personal information, as defined in Nevada law, Nevada residents may email a request for no sale of their personal information to NevadaDesignatedRequest@pearson.com.

Supplemental Privacy Statement for California Residents


California residents should read our Supplemental privacy statement for California residents in conjunction with this Privacy Notice. The Supplemental privacy statement for California residents explains Pearson's commitment to comply with California law and applies to personal information of California residents collected in connection with this site and the Services.

Sharing and Disclosure


Pearson may disclose personal information, as follows:

  • As required by law.
  • With the consent of the individual (or their parent, if the individual is a minor)
  • In response to a subpoena, court order or legal process, to the extent permitted or required by law
  • To protect the security and safety of individuals, data, assets and systems, consistent with applicable law
  • In connection the sale, joint venture or other transfer of some or all of its company or assets, subject to the provisions of this Privacy Notice
  • To investigate or address actual or suspected fraud or other illegal activities
  • To exercise its legal rights, including enforcement of the Terms of Use for this site or another contract
  • To affiliated Pearson companies and other companies and organizations who perform work for Pearson and are obligated to protect the privacy of personal information consistent with this Privacy Notice
  • To a school, organization, company or government agency, where Pearson collects or processes the personal information in a school setting or on behalf of such organization, company or government agency.

Links


This web site contains links to other sites. Please be aware that we are not responsible for the privacy practices of such other sites. We encourage our users to be aware when they leave our site and to read the privacy statements of each and every web site that collects Personal Information. This privacy statement applies solely to information collected by this web site.

Requests and Contact


Please contact us about this Privacy Notice or if you have any requests or questions relating to the privacy of your personal information.

Changes to this Privacy Notice


We may revise this Privacy Notice through an updated posting. We will identify the effective date of the revision in the posting. Often, updates are made to provide greater clarity or to comply with changes in regulatory requirements. If the updates involve material changes to the collection, protection, use or disclosure of Personal Information, Pearson will provide notice of the change through a conspicuous notice on this site or other appropriate way. Continued use of the site after the effective date of a posted revision evidences acceptance. Please contact us if you have questions or concerns about the Privacy Notice or any objection to any revisions.

Last Update: November 17, 2020