Results 1 to 4 of 4
  1. #1
    4 Star Lounger
    Join Date
    Mar 2002
    Location
    Sacramento, California, USA
    Posts
    509
    Thanks
    4
    Thanked 1 Time in 1 Post

    CSS error checking: an impossible dream?

    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.

  2. #2
    Super Moderator jscher2000's Avatar
    Join Date
    Feb 2001
    Location
    Silicon Valley, USA
    Posts
    23,112
    Thanks
    5
    Thanked 93 Times in 89 Posts
    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.

  3. #3
    3 Star Lounger
    Join Date
    May 2003
    Location
    Mid-Cheshire, England
    Posts
    275
    Thanks
    1
    Thanked 3 Times in 3 Posts
    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

  4. #4
    Star Lounger
    Join Date
    Dec 2009
    Location
    Minneapolis MN USA
    Posts
    75
    Thanks
    0
    Thanked 1 Time in 1 Post
    Quote Originally Posted by jscher2000 View Post
    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.
    Don
    Windows 10 64bit, Intel Core i5-490K 3.5GHz, Intel HD Graphics, 8GBRAM, 350GB SSD

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •