Discover CSS features with Javascript

Question

Is it possible to determine CSS support using Javascript?

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

input[type='text'] { }

Answer 1

Modernizr is designed to detect browser features and may help in this case. http://www.modernizr.com/

Answer 2

This is a little speculative since I did not test it, but I believe that through JS you can add an element style, followed by the element it affects, and then check the values:

(jQuery ):

$('<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();

Answer 3

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

, .

Other than that, you can simply use the property styleto check if a specific CSS property has been applied.

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

and

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