[css3-selectors] Native alternative to modernizr

First, I assume most of you know what modernizr is (if you don't, look 
it up, it's a js library that adds class names to the html node 
describing which features are or are not supported).

My problem with modernizr is that it's a third party library that I'd 
gladly do without (even if I really like that Paul Irish guy).

A library such as modernizr is sometimes essential, for instance I had 
situations in which a font color didn't have enough contrast with the 
background it was on, that was quickly resolved with a text-shadow, but 
whenever I checked that page with a browser that didn't have that 
feature, the text was unreadable.

So what about having a pseudo-class that matches when the browser 
supports a given keyword? If it's necessary it could be limited to the 
root element, but it would really be a relief and spare us the need for 
many current css hacks.

p.fancytext{
/* high contrast between color and background */
}
p.fancytext::supports(text-shadow){
/* lower contrast but with a dropshadow on the text */
}

The keywords should probably be without the vendor prefix, and be either 
rules, selectors or other keywords such as "hsla" or "multiple-backgrounds".

If the divergence was too big to have it all in one file, the same 
approach might be used for a media query, relegating the task to more 
than one file loaded according to what a browser supports.

It's a very quick and raw idea, but it's also very simple, which is a 
good thing I think.

Daniele Grillenzoni.

Received on Monday, 3 May 2010 08:45:02 UTC