Ian Hickson wrote a poignant and seminal article on writing test cases for web browsers. Though its depth and accuracy, this article is not very useful when it comes to CSS testing. Since I have already made some tests (also included in the W3C CSS Test suite), I think it's time now to explain some guidelines for creating your own CSS tests.
Read tutorials, not specifications
CSS specifications are useful to two kinds of users: implementors and programmers. They're written in a manner that is virtually incomprehensible for a web developer. Even the W3C CSS Test suite is not very useful to a web developer: if you take a tour of these tests with IE6, you'll probably end up with thinking that this browser is not so buggy as many people think.
That's because this kind of tests doesn't encompass the real-world scenario of developing a web site. They're atomic and simple and, as many of you have already noticed, completely useless if you want to learn something from them.
If you're a web developer who doesn't want to waste his time with deciphering the specs, then my first advice is this: if you want to learn the theory of CSS, find a good tutorial on the web. Do not read the specs.
Browser testing order
When testing on web browsers, you should first decide what your level of support will be. It doesn't make any sense to test your CSS in IE6 when your target audience uses IE8. Once established your target browsers, test your styles in the following order:
- Chrome / Firefox
- Internet Explorer (version)
You have only to choose which version of IE you have to test your pages on. Analyze the stats of your web site and the average use percentage and then test on the most used version.
What about Safari and Opera? If you're a best-viewed-with-any-browser stickler, then you can use them as your additional target browsers. Bear in mind, however, that they have a market share of 2% or so. I think you don't deserve to bang your head on the desk if your layout looks slightly different on these browsers.
And the mobile?
You don't have to spend a lot of money to buy an iPhone or an iPad. Use an emulator instead.
Start with a clean slate
Choose a CSS feature you want to test and create a new HTML page like the following:
<!DOCTYPE html> <html> <head> <title>Test</title> <meta charset="utf-8" /> <style type="text/css"> <!-- CSS code here --> </style> </head> <body> <!-- markup here --> </body> </html>
Browsers always go into standard mode with the HTML5 DOCTYPE, so you're on the safe side. Besides, the HTML5 DOCTYPE is also the easiest DOCTYPE to remember.
JavaScript and CSS
There's a lack in the CSS Test Suite when it comes to the interaction of JavaScript with CSS. In fact, with JavaScript you can set your styles on the fly. It's not clear how browsers handle cascade and specificity when a CSS rule is dynamic.
I saw many weird behaviors happening in IE with dynamic styles and specificity. As a rule of thumb, a JavaScript routine like this:
var test = document.getElementById('test');
test.style.color = 'green';
is equivalent to:
<div id="test" style="color: green">...</div>
Since inline styles have a greater priority on other styles, sometimes you have to reset this behavior by augmenting your rule specificity with !important:
#test {
color: blue !important;
}