Browser Support for CSS | Page 8 | WebReference

Browser Support for CSS | Page 8


[previous]

Browser Support for CSS

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 displayed—and 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 browser—one 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

  1. Which browsers should I use?

    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 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.

  2. Are there more browsers out there than just those you've listed? What about older versions?

    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/.

  3. What do I look for when testing a Web page with a browser?

    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.

  4. 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?

    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 browser—one written before the CSS recommendation was issued—won'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 browsers—ancient, broken, quirky, and compliant—is 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.

Sams Teach Yourself CSS in 24 Hours, 2nd Edition


This content is excerpted from, Sams Teach Yourself CSS in 24 Hours, 2nd Edition, authored by Kynn Bartlett. The content represents Hour 3 from the book. The book is published by Sams, © copyright 2006. All rights reserved. Reprinted with permission. ISBN 0672329069).



[previous]

URL: