In this article we will discuss the online CSS validator provided by the W3C at http://jigsaw.w3.org/css-validator/ and discover how to successfully validate our CSS files also by customizing the URL to be sent to the validator.
The validator and CSS syntax
By default, the W3C CSS validator will validate our CSS against the CSS 2.1 specifications. This means that:
- Browser-specific extensions (such as
-moz-border-radius) are not valid (this is also true for other CSS specifications). - CSS3 properties and selectors are not valid , although in the case of selectors often the validator does not detect it due to the backward compatibility of CSS3 specifications.
- Color values shall comply with the CSS 2.1 specifications, which means that the RGBA notation and nominal values different from the defaults are not valid.
Validator's URL
The URLs of the validator all have this form:
http://jigsaw.w3.org/css-validator/validator/parameters
where parameters is a list of one or more pairs of keywords / values listed by the W3C here. A few examples follow. Suppose that I want to validate my style sheet with the CSS3 specifications. I can then use the keyword profile combined with the value css3 in my URL:
http://jigsaw.w3.org/css-validator/validator/?uri=http://yoursite.com/&profile=css3
As you can see, the uri keyword must always use the URI of your site. Then we use a conventional separator (&) and add the keyword profile with css3 as its value. In this way the validator will use the CSS3 specification as a reference.
However, if we wanted to validate our style sheet against a target media other than the screen (such as print), we can use the keyword usermedium followed by one of the values accepted by the CSS specifications. Example:
http://jigsaw.w3.org/css-validator/validator/?uri=http://yoursite.com/&usermedium=print
As you can see, it's all very simple. I refer to the W3C page mentioned above for more details.
Writing correct URLs
To avoid validation errors in the markup, the URL of the validator should be coded following the formal rules for URL encoding. For example, the & character should be encoded in the markup with the corresponding entity & to avoid validation errors. The rest of the URL, in theory, could be left unchanged, even if we could optimize it by following the encoding rules expressed on the W3Schools web site.