Question

In my CSS I have a rule that must be applied to all text fields (using the CSS3 selector input[type=text].

I also use jQuery. Some browsers like Internet Explorer 6 does not support that form for CSS selector. So my workaround is to add an extra classname in CSS:

input[type=text], .workaround_classname{
  /* css styling goes here */
}

And via jQuery then add the CSS class:

$('input[type=text]').addClass('workaround_classname');

The Question is: How do I make sure this rule only is invoked when CSS3 selectors are not natively supported?

Answer 1

I ended up using conditional comments in my javascript file. This way I could address IE6 and apply the CSS class

$(function(){
  //add css class to input[type=text] fields if the selector is not natively supported
    // IE6 hack: Since some CSS selectors are not working, we simulate with class names.
    /*@cc_on@if (@_jscript_version <= 5.6)
    $('input[type=text],input[type=password],input[type=radio],input[type=checkbox]').
        each(function() { $(this).addClass('type_' + this.type); });
    @end@*/

});

This way, I end up with added class names for all form fields:

.type_text{}
.type_radio{}
.type_checkbox{}
.type_password{}