- A Short History of Style for the Web
- What Is CSS?
- How Is CSS Used?
- Basic CSS Syntax
- The Basics of Selectors
- Basic Properties: Font Styles
- Inheritance
- Getting Specific: class and id Selectors
- Common Text Layout Properties
- Combinators: Descendant and Child Selectors
- Common Background Properties
- Dynamic Selectors
- Basic Page Layout
- Advanced Page Layout
- Positioning
- Advanced Selectors
- Display Types
- More Properties
- Media Types
- Importing Style Sheets
- Quality Assurance
- Specific Challenges and Techniques
This chapter is from the book
This chapter is from the book
This chapter is from the book
Quality Assurance
In the previous chapter, we looked at the various QA tools that are available for ensuring the quality of your HTML. There are two principle concerns when it comes to the quality of CSS. First, we want to ensure our CSS is valid—that is, it conforms to the rules of the CSS language. We also want to ensure that the CSS we use is supported in as many widely used browsers as possible, and if it isn't, that it doesn't impact the ability of users to use the features and access the information of our site.
Validating Your CSS
Just as we can validate HTML, we can also validate CSS to ensure that it is free from errors. The W3C provides a CSS validator at jigsaw.w3.org/css-validator, and there are others online as well. Note that in order to validate CSS3, you need to change the default settings of the validator, which is set to validate CSS2.1.
Checking Browser Support
Now that CSS support in browsers is far better than it was even a few years ago, checking browser support is far less of a problem than it used to be. Some development tools, like Style Master, which I developed, include a database of browser support information, which can help you identify which selectors and properties are supported, aren't supported, or are buggy in various browsers. There are also a number of online resources that detail browser support problems, which we link to at the end of the book.
Previewing in Browsers
Testing that sites are acceptable across a broad range of browsers, in particular, current and very recent versions of Firefox, Safari, and Opera, as well as versions of Internet Explorer back to at least version 6—which is still as widely used as any of these other browsers at the time of this writing—is an important quality assurance step. There are a number of services online that can make this a much more productive experience than simply running all these browsers locally. It's particularly tricky to run multiple versions of Internet Explorer on the same version of Windows, and for the many Mac-based developers, it involves using a virtualization solution like Parallels or VMWare, and running Windows inside a virtual machine.
Some of the services available include:
- Browsercam (www.browsercam.com) has been around for many years, and it allows you to test your site in dozens of browser versions on various operating systems.
- Browsershots (www.browsershots.org) is a free but less sophisticated service that provides screenshots of your site in dozens of browser versions.
- Adobe's new BrowserLab (browserlab.adobe.com/index.html) doesn't yet provide the same level of browser coverage but looks like it may become an important tool for web developers. It integrates with Dreamweaver.