csscheck

CSS Syntax Checking.
author: jim.cerny@unh.edu

One CSS problem is incompleteness and incompatibility of browser support. The answer is to check with Webreview.com's browser compatibility charts. Look at the "safe list" and then look at the "danger list". Notice that many useful box properties remain on the danger list.

Another CSS problem is when you make a syntax mistake, something that is very easy to do. That's when a syntax checker is invaluable and, fortunately, there are two available. Ideally you'd check all your styled documents; more realistically you can use it to debug difficult problems when all else fails (RTFM -- Read the Friendly Manual -- syndrome!).

CSSCheck.

Let's first try CSSCheck at the Web Design Group. Notice that you can either have it check a fragment of code that you type-in or cut-and-paste, or, you can give the URL for an external style sheet.

Direct input of good code.

So, looking at the CSSCheck form, let's first enter some CSS code. Here's the style we used earlier to turn off underlining (decoration) of hyperlinks. Cut and paste it, to check it.

A.hide {
  text-decoration: none;
}

Direct input of bad code.

Now, to see what an error message would look like, let's deliberately make a mistake. Omit the colon delimiter at the end of "text-decoration" and change "none" to "foobar" on that style declaration and present it to CSSCheck. This shows that debugging may be a multi-step process as one problem masks another. When the checker sees the colon problem it doesn't look at the rest of the declaration. When you fix the colon, it then sees that "foobar" is an invalid value.

URL for an external style sheet.

Now let's clear the form and enter the URL for an external style sheet. We can use one of those stored in the CSS Library on UNHINFO. Let's try the "js.css" example. Look it over first and then see how it is applied in the JSS examples, such as the Bad Hemingway or the Dog Years. Then clear the CSSCheck form and enter the URL for "js.css"

   http://www.unh.edu/CSS/js.css

It doesn't report any errors but it flags two usage practices. It warns about use of abolute length units ("pts") and that the "background" and "color" properties should be used together.

W3C CSS Validation.

Next, as time permits, you can repeat these steps with the W3C CSS Validation service. Notice that you can choose among several levels of information. If you choose "all" then it gives warnings, similar to CSSCheck, about the combined use of the "color" and "background-color" properties, plus it recommends use of a generic font family alternative when specifying a font (Times).