After reading JavaScript Will Save Us ALl by Eric Meyer, I though yeah, we can do that.

We can fix a bunch of browser inconsistencies with JavaScript and make our life easier. But it already been done before. The most successful attempt is probably Dean Edwards' IE7.js, which manage to leverage different IE version's inconsistencies and bugs.

I think Dean's approach is really good, but has some drawbacks.

For example, I've tried it to see it in action. So I created a ul element with some li and applied a ui li:first-child style on it. It worked in IE6, cool.

Then I tried to insert a HTML comment before the first li. Oops.

I think there is to many bugs to fix to fix them all.

There is also the notion that it remains monkey patching. If you fix it why should they update their damn browsers ?

I don't really like the idea of helping people o stay in the comfort of their old outdated browsers. But sometime, in real life, you need to get thing fixed and fast. Sadly, most of the time, we [coders] end up paying the price.

I was curious to see if I could come up with a different approach, something more extensible.

Personally, I didn't want to patch JavaScript like Dean did in his library. Most of the time I don't have to deal much with cross-browsers JavaScript inconsistencies simply because I use jQuery.

CSS inconsistencies is where I spend most of my time, that's what I want to fix. So what if we could ease the fixing processus and make it more transparent ?

My personal pet peeve is the inability in Internet Explorer to :hover other element than a links.

I really really like to use :first-child to.

So I tried to create a jQuery plugin that would let me extend browser CSS capabilities.

With it, transparently fix the :hover and :first-child behavior in IE6 is simple as this:

$.extendCSSif(($.browser.msie 
    && parseInt($.browser.version, 10) < 7),
    'pseudo-class', {
        'hover': function(selector) {
            var selector2 = selector.replace(':hover', '');
            // new styles
            var styles2 = this.getStyles(selector); 
            // original styles
            var styles1 = this.getInitialStyles(selector2, styles2); 
            $(selector2).hover(function(){
                $(this).css(styles2); // apply :hover styles
            }, function(){
                $(this).css(styles1); // restore original styles
            });
        },
        'first-child': function(selector) {
            var sel = selector.replace(':first-child', '');
            $(sel).filter(':first').css(this.getStyles(sel));
        }
});

Not bad isn't it ?

As now it can only extend pseudo-classes, but I'll try to also extend selectors, properties and values.

I think it could be interesting to be able to do something like this:

$extendCSSif(($.fn.corner && !$.browser.mozilla), 'property', {
    '-moz-border-radius': 
      function(selector, value) { $(selector).corner(value); },
    '-moz-border-radius-topLeft': 
      function(selector, value) { $(selector).corner('tl '+ value); },
    '-moz-border-radius-bottomLeft': 
      function(selector, value) { $(selector).corner('bl '+ value); },
    '-moz-border-radius-topRight': 
      function(selector, value) { $(selector).corner('tr '+value); },
    '-moz-border-radius-topRight': 
      function(selector, value) { $(selector).corner('br '+value); }
});

There is still a drawback to my approach, it uses Ajax.

After hours of digging I've came to the conclusion that it was impossible to achieve without re-fetching the stylesheet with a Ajax request.

Even worst, if a style tag is present in the page, the script must refetch whole the page (with Ajax) to parse the style tag.

By chance it's only with IE6 (so far).

The reason is simple, some brilliant programmer at MS though it would be useful to replace unsupported pseudo-selectors by :unknown.. which thwarts any attempt to fix their mess.

Dean Edwards also use Ajax to work around this issue.

But beside this annoyance, there is a really bright side. Thanks to jQuery's awesome selector engine, it's pretty easy to implement a good range of new CSS3 selectors.

As today it works in Firefox 3.0.3 (Linux) and MSIE6 (probably 7 too)

I still don't know if this will be an official plugin, it was mostly an idea I decided to try. For now I will probably concentrate my efforts on ui.timepickr.js before working on this plugin.

If it draws the same attention and entusiasm than ui.timepicker.js, I will probably make an official release, if not chances are that it will stay a working proof of concept.

To see it in action load this link in Internet Explorer 6.