Testing CSS - HTML5 - page 29

5

Testing CSS

In my experience, CSS errors make up the vast majority of problems with websites. If you fol-
low web standards, once you've got the content on the page in a website, you'll spend most of
your time trying to get it to look right in one browser or another. Unfortunately, the disparate
state of browsers heightens the likelihood that you're going to have to make adjustments to
your CSS. The good news is that browsers, on a whole, are moving closer together in how they
render web pages. In this lesson, you learn a few techniques for uncovering issues with your
site's CSS before your client does.

ida inG your css VaLidaT idaT

Before you start testing your pages in browsers, you want to make sure all of your CSS prover-
bial i's are dotted and t's are crossed. To assure your CSS syntax is error-free, you validate it.
CSS is based on a specification, known as a recommendation, developed by the W3C. The CSS
specification is used by online applications called validators to check your files for accuracy
and make sure there are no unsupported selectors, properties, or values.

The most frequently used CSS validator is hosted by the W3C itself. The W3C CSS Validation
Service (Figure 5-1) is located at http://jigsaw.w3.org/css-validator an d can check CSS
in a variety of formats:

➤ ➤

By URI: URI, short for Uniform Resource Identifier, is the parent term of the more

frequently used URL (Uniform Resource Locator). A URI can refer to a web address or
a local file path. For the CSS Validation Service, the URI may be an HTML page with
CSS linked or embedded or an external CSS file.

➤ ➤

By file upload: If the file you want to check is not already online, you can upload it.

Again, the service will validate HTML with CSS or CSS alone.

➤ ➤

By direct input: Paste any copied CSS into the supplied text area and click Check to

validate selections of CSS code.