coderef

@supportsBaseline · Widely available

The @supports at-rule applies styles based on a browser's support for CSS features, such as a CSS property and value. Also known as feature queries.

Supported in all major browsers for at least 30 months — safe to use without fallbacks. Baseline since Sep 30, 2015. Widely available since Mar 30, 2018.

How to use ↓Compare browsers

Browser support

DesktopChrome
1–27Not supported
28+Supportedsince Jul 9, 2013
Current: 155
Edge
12+Supportedsince Jul 29, 2015
Current: 154
Firefox
1–21Not supported
22+Supportedsince Jun 25, 2013
Current: 157
Safari
1–8Not supported
9+Supportedsince Sep 30, 2015
Current: 27
MobileChrome Android
18–27Not supported
28+Supportedsince Jul 10, 2013
Current: 155
Firefox Android
4–21Not supported
22+Supportedsince Jun 25, 2013
Current: 157
Safari iOS
1–8Not supported
9+Supportedsince Sep 16, 2015
Current: 27

How to use

This feature is Baseline widely available — use it freely, no fallback needed.

Example

Full syntax and examples are on MDN: supportsText.

Feature detection

JS · check before using
if ("CSSSupportsRule" in globalThis) {
  // CSSSupportsRule is available
} else {
  // load a polyfill or use a fallback
}

Documentation (MDN)

Specification

Usage share

Sub-features

Support for each part of the feature (7). The overall table above shows when the whole feature works.

Sub-featureChromeEdgeFirefoxSafariChrome AndroidFirefox AndroidSafari iOS
CSSImportRule.supportsText12112111417.512111417.5
CSSSupportsRule281222928229
@import.supports12212211517.512211517.5
@supports281222928229
@supports.font-format1081081061710810617
@supports.font-tech1081081061710810617
@supports.selector83836914.1837914.5