Test if a browser supports a CSS selector

// 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>