jQuery to re-apply natively unsupported CSS rules (in IE, for instance)

IE8 doesn't support (for instance, but not exclusive to) :last-child, so often I find myself doing something like:

/* CSS */
element:last-child,
element.last-child{
    /* properties */
}

/* jQuery */
$('element:last-child').addClass('last-child');

Since jQuery provides support for natively unsupported CSS selectors, is there a way to simply evaluate a CSS stylesheet, and have jQuery (re-) apply the styles without having to resort such frivolous element classing?

Something like:

$('link[rel="stylesheet"]').each(functio开发者_如何学Gon(){
    $.reapplyStylesheet($(this).attr('href'));
});

Note: Given the plethora of ways to implement browser-specific CSS, there is with certainty another (perhaps better) way to do this, however I'm still curious.

http://selectivizr.com/

selectivizr is a JavaScript utility that emulates CSS3 pseudo-classes and attribute selectors in Internet Explorer 6-8. Simply include the script in your pages and selectivizr will do the rest.

Easiest way is to use a shim library like IE7-js

Here's a list of the supported (shimmed) selectors in IE7-js.

Any solution would have to do something like you're already doing behind the scenes. jQuery supports the natively unsupported selectors by pulling them apart, and using each part of the selector to perform some DOM traversal - it doesn't do anything to make the browser more able to 'understand' :last-child etc.

This DOM traversal is necessarily much slower than having the CSS engine parse and apply an extra class, particularly in the browsers you care about in this case. New browsers would have fast enough JS engines that you wouldn't notice the penalty in a lot of cases - but those browsers also support CSS3 selectors anyway.

The other sticking point is that browsers are build to ignore (not even try to parse) CSS rules for selectors they don't understand. So you have to do all your analysis and re-application by working with the stylesheet as a big blob of text - you won't have access to the 'broken' rules via the normal mechanisms.

Imagine you have a system which:

1. Looks at all your selectors
2. Figures out which ones can't be used by the current browser
3. Then reconstructs those selectors to a format the browser can use
4. Then re-writes the parts of the stylesheet to add the new selectors
5. Then applies whatever hooks are required to the HTML (probably adding classes, just like you normally would)

That's, I think, the basis of what you need to do what you want. It'll be slow - really slow - in old browsers. A better way of looking at it would be to approach from the DOM angle - something to automatically add the classes (.last-child) etc that you currently do by hand.

Modernizr is one of the best options. Quoting the website:

"Taking advantage of the new capabilities of HTML5 and CSS3 can mean sacrificing control over the experience in older browsers. Modernizr 2 is your starting point for making the best websites and applications that work exactly right no matter what browser or device your visitors use."

Used by: twitter, Google, Microsoft, etc...

Microsoft even ships a version with MVC 3 I believe.