Detecting CSS capabilities with Javascript

Question

Is it possible to detect CSS support by using Javascript?

For example, is it possible to detect if the browser supports attribute selectors like this?

input[type='text'] { }

How would this be useful? You have to run JavaScript to check, so you might as well just run JavaScript to add support for it. — thirtydot
– thirtydot, Commented Aug 18, 2011 at 15:44
@thirtydot, yeah I know what you're saying, but I guess that the less work the browser has to do in Javascript, the better. If the CSS engine can handle it, why waste precious cycles? ;) — nickf
– nickf, Commented Aug 18, 2011 at 15:53
Because the CSS engine (in IE6-8) can't handle it. Selectivizr immediately quits if the browser is not IE6-8 (the only common browsers that don't support this stuff). Otherwise, it runs and adds support for a bunch of lovely selectors. — thirtydot
– thirtydot, Commented Aug 18, 2011 at 15:58

Mark Robinson · Accepted Answer · 2011-08-18 15:17:08Z

5

Modernizr is designed to detect browser features and may well be able to help in this instance. http://www.modernizr.com/

answered Aug 18, 2011 at 15:17

Mark Robinson

13.3k13 gold badges66 silver badges85 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

gnarf Over a year ago

Only really detects new stuff... [attr] selectors are everywhere (except IE6)

Brian Over a year ago

Modernizr is for HTML4-->5 transitional coding, not a generic toolkit for checking legacy browser capabilities. Bad (and imo, incorrect) use for this library. Use it to make sure that you can work with a "canvas" and other new elements regardless of HTML5 support, not to verify that legacy capabilities still exist in a browser.

zzzzBov · Accepted Answer · 2011-08-18 15:22:24Z

3

This is a bit speculative as I haven't tested it out, but I believe it would be possible via JS to add a style element followed by an element that it has an effect on, and then test the values:

Speculative untested code, may or may not work (jQuery used for brevity):

$('<style type="text/css" id="foo">input[type="text"]{ width: 10px; }</style>').appendTo('head');
$('<input type="text" id="bar">').appendTo('body');
if ($('#bar').width() == 10)
{
  //attr selector supported
}
$('#foo, #bar').remove();

answered Aug 18, 2011 at 15:22

zzzzBov

180k57 gold badges328 silver badges375 bronze badges

2 Comments

gnarf Over a year ago

+1 for the approach, as its probably the only way you will be able to detect it.

Brian Over a year ago

Agree with @gnarf on this one - short of a try catch around querySelector or some other hack...

Tomalak · Accepted Answer · 2011-08-18 15:23:16Z

2

document.querySelectorAll("input[type='text']")

But that fails for older browsers, naturally.

Other than that, you could just use the style property to check if a certain CSS property has been applied or not.

input[type='text'] {
  background-repeat: no-repeat; /* or any other irrelevant, non-default value */
}

and

if (myInputElem.style.backgroundRepeat == "no-repeat") {
  // selector is supported
}

edited Aug 18, 2011 at 15:23

answered Aug 18, 2011 at 15:16

Tomalak

339k68 gold badges547 silver badges635 bronze badges

2 Comments

gnarf Over a year ago

Anything that supports qSA supports [attr] selectors

Tomalak Over a year ago

@gnarf: That's probably true. Checking for the existence of that function might be a hint as well, even though that's not exactly what has been asked for.

Collectives™ on Stack Overflow

Detecting CSS capabilities with Javascript

3 Answers 3

2 Comments

2 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related