Testing Support for CSS Pseudo-classes & Pseudo-elements

pseudo-css-support.js

/**
 * Checks if the given CSS pseudo-selector is supported by the browser.
 *
 * @param {string} selector - The CSS pseudo-selector to check.
 * @returns {boolean} - True if the selector is supported, false otherwise.
 */
export const isPseudoSelectorSupported = (selector) => {
  const style = document.createElement('style');
  let isSupported;

  try {
    document.head.appendChild(style);
    style.sheet.insertRule(`${selector} {}`);
    isSupported = true;
  } catch {
    isSupported = false;
  } finally {
    style.remove();
  }

  return isSupported;
};


/*
  console.log(isPseudoSelectorSupported(':focus-visible'));
  console.log(isPseudoSelectorSupported('::part(foo)'));
  console.log(isPseudoSelectorSupported(':host-context(foo)'));
  console.log(isPseudoSelectorSupported(':has(foo)'));
*/