How to verify that your site is CSS3 compliant

by Chenxi on March 6, 2010

Although HTML5 is still in labs and shall not be released in the near future, CSS3 has been widely adopted by modern browsers such like IE8, FireFox3+, Opera and Safari for a long time already. To prove that your website is CSS3 compliant is very important to nowadays web designers/developers and thus should be considered a must-have. In this short post you can find a simple and practical way to achieve that.

As a web designer/developer, you must have already paid quite some visits to the online CSS validator servicealready. To make an self-proven validation test is not hard at all, simply by making the following code as one of the links’ href attribute on your website then anyone who clicks on it can see whether or not your site can pass the test:

1
http://jigsaw.w3.org/css-validator/check/referer

However, that default online CSS validator still checks everything against the aged CSS 2.1 specification, which seems not to be all right in these days. Many of the cool features such as rounded-corners and powerful selecters cannot be recognized as valid, although they are actually 100% compliant to the CSS3 rules.

So the big questions is, how to go around this problem, to have a trusted online CSS3 validator that can use CSS3 instead of CSS2.1? This was mission impossible, sort of, in last year; however, thanks to dwight.stegall’s brilliant work : the CSS 3 Validator Bookmarklet , now you can enjoy a free service online that is up to date. Finger crossed, finally.

To use the new service could not be simpler, just append an extra url attribute to the aforementioned code:

1
http://jigsaw.w3.org/css-validator/check/referer?profile=css3

, and all is done!Hip Hip Hooray!

I have already put such a link in the footer so that you can give it a try – and please bear with me if you happen to see some ugly red crosses appear in the validation page. People do make mistakes now and then, right?

Comments on this entry are closed.

Previous post:

Next post: