@supports in CSS

@supports lets you specify CSS declarations depending on a browser's support for CSS features.

It has support for several operators: and, or, and not.

Note that somewhat ironically, some browsers (e.g. Safari 14.0) don't support @supports. If this is the case, using a strategy like [[20220919110434-focus-visible-defensive]] may be required.

.button {
  margin: 10px;
  border: 2px solid darkgray;
  border-radius: 4px;
}

.button:focus-visible {
  /* Draw the focus when :focus-visible is supported */
  outline: 3px solid deepskyblue;
  outline-offset: 3px;
}

@supports not selector(:focus-visible) {
  .button.with-fallback:focus {
    /* Fallback for browsers without :focus-visible support */
    outline: 3px solid deepskyblue;
    outline-offset: 3px;
  }
}

https://developer.mozilla.org/en-US/docs/Web/CSS/@supports https://moderncss.dev/testing-feature-support-for-modern-css/

[[css]]