Test if a browser supports a CSS selector

Question

Really simple: how do I most accurately test if a browser has support for a certain CSS selector?

I currently have some CSS code that makes the page a little more interactive by using the :checked selector in CSS, but I want to create a fallback script that does the same thing with JavaScript, but only if the user's browser has no support for the :checked selector.

My question is, how do I most accurately test if the user's browser supports a certain CSS selector?

Here is the code I'd like to use it on:

HTML:

<label class="coolbox">
    <input type="checkbox"/>
    <span>I want to eat some caek.</span>
</label>

CSS:

.coolbox input {display:none;}
.coolbox span::before {
    content: "";
    display:inline-block;
    width:10px;
    height:10px;
    margin-right:5px;
    border:1px solid black;
}
.coolbox:hover span::before {border:1px solid #555;}
.coolbox:active span::before {border:1px solid #999;}

.coolbox span::before {background-color:#F77;}
.coolbox input:checked + span::before {background-color:#4A4;}

Demo

PS: I'd prefer not to just use conditional comments, because I'd like to follow the standard of detecting features instead of browsers.

Answer 1

You could use querySelector:

function testSelector(selector, node){
  var scope = document.createElement("div");
  scope.appendChild(node);

  try {
    return scope.querySelector(selector) !== null;
  } catch(e) { return false; }
}

You can test it like this:

var node = document.createElement("input");
node.type = 'checkbox';
node.checked = 'checked';

testSelector("input:checked", node); // === true

See this other question for more info on querySelector.

Answer 2

Workaround for your case:

<input type=checkbox checked=checked>

css:

input{
  font-family:'arial';
}
input:checked{
  font-family:'sans-serif';
}

checking procedure: js

alert($('input').css('font-family')=='sans-serif'?'supported':'not supported');

Answer 3

From some research I was able to find various websites that can test your browser to see the support.

This website is helpful to find what supports what but does not test your current browser.

• CSS Selectors

This website will test your browser and if you don't want to use modernizr you can learn from their script.

• CSS Test

This last website seems to do a great job and is very accurate of the support. I also am pretty sure I found the script that is doing this so like I said you can learn from how other website are doing this.

• CSS3Test

• Source Code (add view-source: to view source, unable to link according to SO)

• Support.js

To figure how they are making this work you will need to understand how their scripts are working. The bottom three seem to be the most critical to the function.

<script src="utopia.js"></script>
<script src="supports.js"></script>
<script src="csstest.js"></script>
<script src="tests.js"></script>

These are just some options that I found and it is up to your needs. Best of luck and hopefully this has been helpful.

Answer 4

A shorter way to do it would be to simply try the query selector, if it produces an error, return false, else true, like this:

function testSelector(selector) {
  document.querySelector('*');  //checks if querySelector is implemented and raises an error if not
  try {document.querySelector(selector)} catch (e) {return false}
  return true;
}

I checked it on IE9 Windows and Chrome Mac (V43.0.2357.130), Win(V39.0.2171.95m), FireFox Win (V38.0.5), and it works fine with testSelector("form:invalid"), which is not implemented by IE9, but by everybody else.

Answer 5

While this is, admittedly, a very late answer to a rather old question it seemed worth adding another answer.

One approach, using JavaScript to test for selector support, is below with explanatory comments in the code:

// some DOM utilities and helpers,
// caching document as I don't enjoy typing that much:
const D = document,
  // aliasing document.querySelector() and element.querySelector()
  // again, because I don't enjoy typing; here the function takes
  // two arguments 'sel' and 'context',
  // 'sel' is a String, and is the selector for the element we're
  // trying to retrieve;
  // 'context' is the element/node we wish to search within; if
  // no context is passed we default to document.querySelector()
  // otherwise we use Element.querySelector():
  get = (sel, context = D) => context.querySelector(sel),
  // as above, except it's an alias for querySelectorAll(), and
  // here we return an Array of nodes instead of a NodeList in
  // order to use Array methods when/if required:
  getAll = (sel, context = D) => [...context.querySelectorAll(sel)],
  // alias for document.createElement(), which also allows properties
  // to be set on the created element:
  create = (tag, prop) => document.createElement(tag),
  // simple function to allow for more elaborate templates, and
  // arguments if required later:
  templatedResult = (text) => `<code>${text}</code>`,
  // named function to assess whether the browser supports/implements
  // a given selector; this takes a reference to the Event Object
  // passed automatically from EventTarget.addEventListener():
  verifySelectorCompatibility = (evt) => {
    // preventing default actions (as one of the events to which
    // bind the function is form.submit):
    evt.preventDefault();

    // gathering variables/data
    // here we retrieve the first/only <input> element within
    // the document:
    const input = get('#testSelector'),
      // we retrieve the value from the <input> and trim that
      // value of it's leading/trailing white-space:
      selector = input.value.trim(),
      // we retrieve the element with id=results:
      output = get('#results'),
      // we use the CSS.supports() function to assess whether
      // the browser supports the supplied selector, which
      // we pass to the function in a template string
      // concatenating the selector within the string
      // 'selector(...)' as required by the function:
      result = CSS.supports(`selector(${selector})`),
      // creating an <li>:
      listElement = create('li');

    // if the event-type is 'submit' and the user-entered selector
    // - once trimmed of leading/trailing white-space - is zero-
    // length we return at this point:
    if (evt.type === 'submit' && selector.trim().length === 0) {
      return false;
    }

    // here we add the class of 'supported' or 'unsupported' based on
    // the 'result' variable being exactly equal to (Boolean) true
    // or not:
    listElement.classList.add(result === true ? 'supported' : 'unsupported');

    // here we set the innerHTML of the <li> element to the template string
    // from the defined function (above):
    listElement.innerHTML = templatedResult(selector);

    // we then use Element.prepend() to insert the new <li>
    // as the first child of the 'output' element:
    output.prepend(listElement);

  },
  // here we return the first/only <button> and <form> elements:
  button = get('button'),
  form = get('form');

// and we then bind the verifySelectorCompatibility() function
// to the 'click' event of the <button> and the 'submit' event
// of the <form>:
button.addEventListener('click', verifySelectorCompatibility);
form.addEventListener('submit', verifySelectorCompatibility);

*,
 ::before,
::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

form {
  margin-block: 1em;
  margin-inline: auto;
  width: clamp(30rem, 60vw, 1000px);
}

fieldset {
  display: grid;
  gap: 1em;
  grid-auto-rows: min-content;
  grid-template-columns: repeat(4, 1fr);
  padding-block: 0.25em;
  padding-inline: 0.5em;
}

label {
  display: flex;
  flex-flow: row nowrap;
  gap: 1em;
  grid-column: 1 / -1;
  margin-block: 1em;
  margin-inline: 0.5em;
  padding: 0.25em;
}

label span {
  align-self: center;
}

label span::after {
  content: ': ';
}

label input {
  flex-grow: 1;
  object-fit: cover;
  padding: 0.25em;
}

button {
  grid-column: -2 / span 2;
}

#results li {
  border-block-end-width: 3px;
  border-block-end-style: solid;
  font-family: monospace;
  font-size: 1.5em;
  padding-block: 0.25em;
  padding-inline: 0.5em;
}

.supported {
  border-block-end-color: lime;
}

.supported::marker {
  content: '\2713';
}

.unsupported {
  border-block-end-color: red;
}

.unsupported::marker {
  content: '\2717';
}

<form action="#" method="post">
  <fieldset>
    <legend>Does your browser support..?</legend>
    <label>
      <span>Enter a selector to test</span>
      <input type="text" id="testSelector">
    </label>
    <button type="button">Check your browser</button>
  </fieldset>
  <ul id="results"></ul>
</form>

JS Fiddle demo.

References:

• Arrow functions.
• CSS.supports().
• document.create().
• document.querySelector().
• document.querySelectorAll().
• Element.classList API.
• Element.prepend().
• Element.querySelector().
• Element.querySelectorAll().
• Event.preventDefault().
• EventTarget.addEventListener().
• Template literals.