Proposal: Hack Free CSS with the @unsupported Directive

I simply can't stand it when someone's solution to a problem is "I know, I'll put the code inside a comment!"<p>Now, as a human looking at a syntax highlighted source file, my parsing is broken. All the differently-colored comments that I <i>should</i> be able to ignore suddenly have to be scanned because they might affect runtime somehow, and certainly any machine-based parser gets unnecessarily more complex.

In the meantime, one could use JavaScript to detect a browser's capabilities, and add a flag via a class on the body or html element.<p>For instance, with jQuery and a getStyleProperty helper[1]:<p><pre><code> if (typeof getStyleProperty('borderRadius') != 'string') { $('body').addClass('unsupported-border-radius'); } </code></pre> ... then in the CSS:<p><pre><code> body.unsupported-border-radius { ... alternate code goes here ... } </code></pre> [1] <a href="http://thinkweb2.com/projects/prototype/feature-testing-css-properties/" rel="nofollow">http://thinkweb2.com/projects/prototype/feature-testing-css-...</a>

I don't know...can we really trust all browser vendors to only claim @supported for a given feature when it's genuinely compliant, including all edge cases?

How many CSS hacks are necessary because a browser acknowledges support for something or doesn't support something versus having a totally broken implementation of something? In otherwords, this wouldn't fix at all being able to conditionnally choose CSS for IE's busted hasLayout oddity, nor would it allow non-hacky CSS to work around different box models, because we didn't even have names for these things when they were discovered and parsing bugs were discovered to allow some browsers to see the rules and others not to.

You can already do this with the Modernizr javascript library, it works just like the blog post described:<p><a href="http://modernizr.com/" rel="nofollow">http://modernizr.com/</a><p>It's a good approach - target only supported features through CSS inheritance. It's what I used to make my first commercial site with HTML5 and CSS3:<p><a href="http://theprbootcamp.com" rel="nofollow">http://theprbootcamp.com</a> (happening this Thursday in SF)<p>It was great, it made certain visual effects completely painless and degrades to a very similar but more square layout in IE6. It's not that you can't do rounded corners, dropshadows, multiple background images, gradients or have an IE6-friendly site design w/o it, it's just a giant time saver - I whipped together that site in less than a day - and the markup came out way cleaner.<p>No need to wait for the W3C to make a proposal or browser makers to integrate it, and you could remove the javascript if they ever come around.

This would be nice, but it's not really feasible since it requires the browser vendor to implement a feature for backwards compatibility (kind of an oxymoron, isn't it?)

This is what I've been doing and it has worked relatively well.<p><pre><code> &#60;!--[if lte IE 7]&#62; &#60;body class="ie67"&#62; &#60;![endif]--&#62; &#60;!--[if !IE]&#62;--&#62; &#60;body&#62; &#60;!--&#60;![endif]--&#62; </code></pre> This allows me to target IE6/7 with the .ie67 class