Using jQuery, how to find out if CSS selector "input[type=text]" is natively supported by browser?

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

Why not set some useless css style and check if the style was applied. Only add the workaround class to the elements that don't have this style applied.

Only problem is I can't come up with a "useless" style you can use :-)

Answer 2

This seems to incorporate something like you speak of:

http://www.w3avenue.com/2009/07/02/detect-support-for-css3-html5-with-modernizr/

Answer 3

Have a look at http://www.geocities.com/seanmhall2003/css3/detect.html. You should do this for each property.

Answer 4

There's no easy way to know "does this browser support CSS3 selectors". All you can do is detecting the browser and browser version.

Modernizr will not help you as you can't detect if a particular CSS selector works in a .css file. (Or you have to check if a particular CSS property from your CSS selector is applied and THIS is really ugly !)

BUT! Here the easiest way would be to forget about CSS 2.1 selectors like [attr=] in .css files as it's not widely supported. And if you have to write for browsers that doesn't support them (like Internet Explorer 6), you just can't use them.

So, add a class for everyone. Your code will be easier to understand, otherwise you'll always add unnecessary JavaScript code.

I understand I'm not answering you, but this is b-a-d!

Answer 5

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{}

Answer 6

Why not just have

input.workaround_classname{
  /* css styling goes here */
}

then add workaround_classname to all text inputs in your markup.

The selectors you could use are (I think the second is probably the one that would be easiest to understand what it was selecting for someone else reading the code)

$('input:text')
// or
$('input:text.workaround_classname')
// or
$('input.workaround_classname')

Then no detection is needed and you won't be relying on JavaScript to add the class name.