CSS error checking: an impossible dream?

Topic

New Reply

One of the most frustrating parts of web development is debugging CSS files. When a browser encounters an error in a CSS file, it doesn’t say anything; it just ignores the erroneous code and proceeds without giving any indication that something is wrong.

Some development tools include editors that encourage correct CSS coding with code completion dialogs, and/or mark apparent errors. But their usefulness is limited because they only deal with constructions that they consider errors. If I use a legal construction that my browser happens not to recognize, I’m on my own.

Here’s another example of a problem which the tools I know do not address. I recently tried a rather obscure technique for the first time, and it didn’t work. I spent hours comparing my code to the example I was following, trying to figure out what I’d done wrong. Finally I realized that I’d misspelled a file name in a style definition. I was using a smart editor, but as far as it knew there was no problem. The CSS file was syntactically and semantically perfect… it just happened to refer to a pathname that, at runtime, did not exist.

What I need is a way to make the browser tell me when and where the CSS file has a problem.

Reply | Quote

Replies

For Firefox, I’m not aware of an all-in-one tool for this… I use the Firebug extension’s Net tab to keep an eye on file load problems (missing images, 500 errors).

I use the standard Error Console for CSS warnings. Those should include rules dropped because the selector or property are not recognized (e.g., browser specific to another browser). Sometimes the CSS warnings make no sense, which often indicates a missing closing brace } somewhere.

When those check out but my CSS is being ignored, I look at the CSS tab of the DOM Inspector to try to figure out why other rules might be overriding mine, e.g., as a result of greater specificity or use of !important.

That’s definitely not very efficient. And I don’t know how to access this information in other browsers. Hopefully others with more expertise will chime in.

Reply | Quote

In Firefox I use two extensions HTML Validator 0.8.6.1 and Web Developer 1.1.9. The latter has tools for viewing and checking the CSS being used in any Webpage.

Also as well as the HTML Validation – W3C Markup Validation Service at http://validator.w3.org/check – there is a CSS Validation Service at http://jigsaw.w3.org/css-validator/

HTH

Reply | Quote

For Firefox, I’m not aware of an all-in-one tool for this… I use the Firebug extension’s Net tab to keep an eye on file load problems (missing images, 500 errors).

I use the standard Error Console for CSS warnings. Those should include rules dropped because the selector or property are not recognized (e.g., browser specific to another browser). Sometimes the CSS warnings make no sense, which often indicates a missing closing brace } somewhere.

When those check out but my CSS is being ignored, I look at the CSS tab of the DOM Inspector to try to figure out why other rules might be overriding mine, e.g., as a result of greater specificity or use of !important.

That’s definitely not very efficient. And I don’t know how to access this information in other browsers. Hopefully others with more expertise will chime in.

In IE8 or 9 Developer Tools (F12 or the tools dropdown menu), in Chrome Tools>Developer Tools have tools for viewing the html tree and the corresponding CSS cascade. I also use Beyond Compare which will compare two files, highlighting the differences. It may help reduce the time comparing your code to example code, especially if the example is available as a file or could be copy and pasted into one for comparison.

Reply | Quote