Is there a way of testing CSS?

Question

I know that this idea has come up before - notably here and here - but no solution seems to have been given. It was largely seen as either a 'nice-to-have-but-impossible' or 'stupid idea'.

My thoughts were using jQuery to calculate computed values and compare them to expected values. For example, I could have <h1>This is a header</h1> and in theory, I should know it's font-size, colour, font-weight, etc. I can use jQuery to check that it is actually that font-size, and if not, return an error.

The advantage of this is that I don't have to sit with a checklist going through each browser - 'Is this header bold? Are these links underlined? Is this column 110px wide?' - every time I make a CSS change.

My question - is that a feasible idea? What are the major problems in implementing something like that? Has anyone done something like that before?

EDIT: Any thoughts on how to actual render the errors are welcome too. I thought of using a JavaScript file in the header of the relevant page and then adding content to the page, kind of like Firebug's on-page version. However, I'm worried that could then affect the rendering of the page. Alternatively, I could log it to the console, but I don't think IE6 has a proper console, and opening every console of every browser for every page-under-test seems a bit annoying as well.

Answer 1

Even if there was a way to do this, I would still feel the need to check manually.

The examples you gave aren't the types of things to typically worry about, but mostly positioning and box-model stuff. If I say h1{color:red} I feel pretty confident that it's going to be red in IE.

Getting the computed values isn't really going to help with finding out how they are rendered, it actually sounds like more work overall than just firing up IEtester. With a bit of experience you quickly learn the types of things you need to check for cross browser compatibility, and with browsers getting better and better, it's becoming less and less of an issue.

One technique that can help: Design in IE. Yes it sucks for sure, but you'll usually find that when you get it working in IE7 and then test in FF, IE8 or IE6 - it's pretty close or the differences are an easy fix compared to testing in say Chrome, and then double checking in IE7. I know that "cross browser" encapsulates more than just IE, but let's not kid ourselves; IE is the problem browser and the most widely used.

In conclusion: If there were a tool for this, it would have to be REALLY AMAZING to keep me from checking in a real browser. I think that's why people are pointing to Selenium as the solution to this.

Answer 2

hmmm... Let the audience dictate what you test, and make that part of your client relationship.

What are your traffic sources? View the Logs, Analytics, etc. I honestly don't care what it looks like in Opera (for example), if traditionally, Opera equates to 1% of overall traffic - unless that's the client's fav browser, but you get the point - sweat the few that matter, not every single one that's available.

On one hand, I think the idea is pretty cool, but I wouldn't trust it - it'd be obsolete 2 months after each update (that's a little sarcastic, but still)...I'd end up looking with my own eyes. The whole idea kind of sounds like an automatic shoe-lacer, or something - rather moot to me. Besides, "I tested it with 'Kick@cSS'!!" will never get you out of hot water with a client.

If you're following standards, testing and debugging is generally pretty quick (as long as you're testing as you go). Don't wrap your block elements with in-line elements, etc. will help keep things moving smoothly, and everyone happy and compliant as well.