CSS3

Some of you might have noticed that this site is not valid CSS, which is of course a tid bit weird for a site as this… There’s a reason for this though. New CSS3 features are often “tested” by browser manufacturers by implementing them as vendor specific extensions. These are allowed by both CSS2.1 and CSS3, yet, the validator does error on them, even when it’s validation profile is set to CSS3.

So what is a vendor specific extension?

A vendor specific extensions can start with a “-” (dash) or a “_” (underscore), usually followed by an abbreviation of the company or the browser project the extension is specific for, f.i. “-moz-” for Mozilla browsers, or “-webkit-” for WebKit based browsers. This vendor specific prefix is followed by the property name. A good example of this is -webkit-border-radius, or -moz-border-radius.

Why is it important to test new properties like this?

For a specification to leave the CR phase and become a final recommendation, it has to have two complete implementations. Without testing it like this, a specification would almost never reach the final recommendation phase. Which is why I think the validator should allow these properties. I have mailed the CSS validator mailing list to ask why this is not happening at the moment.

The two specifications, 2.1 and 3, both have an informative section on the subject as well, listing the known prefixes. These two lists are the same, and, typically enough, miss a few extensions, among which -webkit- and -khtml-.