Question

I was thinking this morning, my mind was on CSS and creating different style sheets for IE7, IE8, FF, etc.. I started wondering if there was a tool that exists to make this easier. I was thinking something along the lines of this:

1. Build the “core” style sheet.
2. Any time a “broken” rule is entered
   into the “core” style sheet, a fix
   is added to the associated browser
   specific style sheet.
3. If a fix is added it would also be
   noted, so you know that a particular
   style has extras in the browser
   specific sheets.

This could work in two different ways, either automatic, IDE style, or as a tool which you input the core css and output all the different css you need.

Thoughts? Does something like this exist?

Answer 1

The problem with this is that the term “broken” is subjective. No machine is able to tell what you consider to be “broken”. Granted there are some well-known bugs, but even then you’re only really scratching the surface.

Your best bet is to just code using web standards and using a tool like SASS to make coding your CSS easier.

For instance, if you are using HTML5Boilerplate and want to add an IE6 specific rule, all you do is something like this:

#mydiv {
/* mydiv specific styles */
    .ie6 & { 
        /* IE6 specific styles for #mydiv
    }
}