CSS Conditional Rules is a CSS module that allows to define a set of rules that will only apply based on the capabilities of the processor or the document the style sheet is being applied to.

Reference

At-rules

Specifications

Specification Status Comment
CSS Conditional Rules Module Level 3 Candidate Recommendation Initial definition

Browser compatibility

@document rule

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidEdge MobileFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
@document
ExperimentalNon-standard
Chrome No support NoEdge No support NoFirefox Full support 61
Prefixed Notes Disabled
Full support 61
Prefixed Notes Disabled
Prefixed Implemented with the vendor prefix: -moz-
Notes Disabled by default in web pages, except for an empty url-prefix() value, which is supported due to its use in Firefox browser detection. Still supported in user stylesheets.
Disabled From version 61: this feature is behind the layout.css.moz-document.content.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
No support 1.5 — 61
Prefixed
Prefixed Implemented with the vendor prefix: -moz-
IE No support NoOpera No support NoSafari No support NoWebView Android No support NoChrome Android No support NoEdge Mobile No support NoFirefox Android Full support 61
Prefixed Notes Disabled
Full support 61
Prefixed Notes Disabled
Prefixed Implemented with the vendor prefix: -moz-
Notes Disabled by default in web pages, except for an empty url-prefix() value, which is supported due to its use in Firefox browser detection. Still supported in user stylesheets.
Disabled From version 61: this feature is behind the layout.css.moz-document.content.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
No support 4 — 61
Prefixed
Prefixed Implemented with the vendor prefix: -moz-
Opera Android ? Safari iOS ? Samsung Internet Android No support No
regexp()
ExperimentalNon-standard
Chrome No support NoEdge No support NoFirefox Full support 6IE No support NoOpera No support NoSafari No support NoWebView Android No support NoChrome Android No support NoEdge Mobile No support NoFirefox Android Full support 6Opera Android No support NoSafari iOS No support NoSamsung Internet Android No support No

Legend

Full support  
Full support
No support  
No support
Compatibility unknown  
Compatibility unknown
Experimental. Expect behavior to change in the future.
Experimental. Expect behavior to change in the future.
Non-standard. Expect poor cross-browser support.
Non-standard. Expect poor cross-browser support.
See implementation notes.
See implementation notes.
User must explicitly enable this feature.
User must explicitly enable this feature.
Requires a vendor prefix or different name for use.
Requires a vendor prefix or different name for use.

@import rule

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidEdge MobileFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
@importChrome Full support YesEdge Full support 12Firefox Full support 1IE Full support 5.5Opera Full support YesSafari Full support YesWebView Android Full support YesChrome Android Full support YesEdge Mobile Full support 12Firefox Android Full support 4Opera Android Full support YesSafari iOS Full support YesSamsung Internet Android Full support Yes

Legend

Full support  
Full support

@media rule

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidEdge MobileFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
@mediaChrome Full support 1Edge Full support 12Firefox Full support 1IE Full support 6Opera Full support 9.2Safari Full support 1.3WebView Android Full support 1Chrome Android Full support 18Edge Mobile Full support 12Firefox Android Full support 4Opera Android Full support 10.1Safari iOS Full support 3.1Samsung Internet Android ?
any-hover media featureChrome Full support 41Edge Full support 16Firefox Full support 64IE No support NoOpera Full support 28Safari Full support 9WebView Android Full support 41Chrome Android Full support 41Edge Mobile No support NoFirefox Android Full support 64Opera Android Full support 28Safari iOS Full support 9.2Samsung Internet Android Full support 5.0
any-pointer media featureChrome Full support 41Edge Full support 12Firefox Full support 64IE No support NoOpera Full support 28Safari Full support 9WebView Android Full support 41Chrome Android Full support 41Edge Mobile Full support 12Firefox Android Full support 64Opera Android Full support 28Safari iOS Full support 9.2Samsung Internet Android ?
aspect-ratio media featureChrome Full support 4Edge Full support 12Firefox Full support 3.5IE Full support 9Opera Full support 53Safari Full support YesWebView Android Full support YesChrome Android Full support 18Edge Mobile Full support 12Firefox Android Full support 4Opera Android ? Safari iOS Full support YesSamsung Internet Android Full support Yes
calc() expressionsChrome Full support 66Edge No support NoFirefox Full support 59IE No support NoOpera Full support 53Safari Full support 12WebView Android Full support 66Chrome Android Full support 66Edge Mobile No support NoFirefox Android Full support 59Opera Android Full support 47Safari iOS Full support 12Samsung Internet Android Full support Yes
color media featureChrome Full support YesEdge Full support 12Firefox Full support 2IE Full support 9Opera Full support YesSafari Full support YesWebView Android Full support YesChrome Android Full support YesEdge Mobile Full support 12Firefox Android Full support 4Opera Android ? Safari iOS ? Samsung Internet Android ?
color-gamut media featureChrome Full support 58Edge No support NoFirefox No support NoIE No support NoOpera Full support 45Safari Full support YesWebView Android Full support 58Chrome Android Full support 58Edge Mobile No support NoFirefox Android No support NoOpera Android Full support 43Safari iOS ? Samsung Internet Android ?
color-index media feature
Non-standard
Chrome No support NoEdge No support NoFirefox No support NoIE No support NoOpera No support NoSafari ? WebView Android No support NoChrome Android No support NoEdge Mobile No support NoFirefox Android No support NoOpera Android No support NoSafari iOS ? Samsung Internet Android No support No
device-aspect-ratio media feature
DeprecatedNon-standard
Chrome Full support YesEdge Full support 12Firefox Full support 2IE Full support 9Opera Full support YesSafari ? WebView Android Full support YesChrome Android Full support YesEdge Mobile Full support 12Firefox Android Full support 4Opera Android ? Safari iOS ? Samsung Internet Android ?
device-height media feature
DeprecatedNon-standard
Chrome Full support YesEdge Full support 12Firefox Full support 2IE Full support 9Opera Full support YesSafari ? WebView Android Full support YesChrome Android Full support YesEdge Mobile Full support 12Firefox Android Full support 4Opera Android ? Safari iOS ? Samsung Internet Android ?
device-width media feature
DeprecatedNon-standard
Chrome Full support YesEdge Full support 12Firefox Full support 2IE Full support 9Opera Full support YesSafari ? WebView Android Full support YesChrome Android Full support YesEdge Mobile Full support 12Firefox Android Full support 4Opera Android ? Safari iOS ? Samsung Internet Android ?
display-mode media featureChrome Full support 46Edge No support NoFirefox Full support 47
Notes
Full support 47
Notes
Notes Firefox 47 and later support display-mode values fullscreen and browser. Firefox 57 added support for minimal-ui and standalone values.
IE No support NoOpera Full support 33Safari ? WebView Android Full support 46Chrome Android Full support 46Edge Mobile No support NoFirefox Android Full support 47
Notes
Full support 47
Notes
Notes Firefox 47 and later support display-mode values fullscreen and browser. Firefox 57 added support for minimal-ui and standalone values.
Opera Android ? Safari iOS ? Samsung Internet Android No support No
grid media featureChrome Full support YesEdge Full support 12Firefox Full support 2IE Full support 10Opera Full support YesSafari Full support YesWebView Android Full support YesChrome Android Full support YesEdge Mobile Full support 12Firefox Android Full support 4Opera Android ? Safari iOS ? Samsung Internet Android ?
height media featureChrome ? Edge Full support 12Firefox Full support 2IE Full support 9Opera ? Safari ? WebView Android ? Chrome Android ? Edge Mobile Full support 12Firefox Android Full support 4Opera Android ? Safari iOS ? Samsung Internet Android ?
hover media featureChrome Full support 38
Notes
Full support 38
Notes
Notes Before Chrome 41, the implementation was buggy and reported (hover: none) on non-touch-based computers with a mouse/trackpad. See bug 441613.
Edge Full support 12Firefox Full support 64IE No support NoOpera Full support 28Safari Full support 9WebView Android Full support 38
Notes
Full support 38
Notes
Notes Before Chrome 41, the implementation was buggy and reported (hover: none) on non-touch-based computers with a mouse/trackpad. See bug 441613.
Chrome Android Full support 50Edge Mobile Full support 12Firefox Android Full support 64Opera Android Full support 28Safari iOS Full support 9.2Samsung Internet Android ?
inverted-colors media feature
ExperimentalNon-standard
Chrome No support NoEdge No support NoFirefox No support NoIE No support NoOpera No support NoSafari Full support YesWebView Android No support NoChrome Android No support NoEdge Mobile No support NoFirefox Android No support NoOpera Android No support NoSafari iOS Full support YesSamsung Internet Android ?
light-level media feature
ExperimentalNon-standard
Chrome No support NoEdge No support NoFirefox No support NoIE No support NoOpera No support NoSafari No support NoWebView Android No support NoChrome Android No support NoEdge Mobile No support NoFirefox Android No support NoOpera Android No support NoSafari iOS No support NoSamsung Internet Android ?
Media feature expressionsChrome Full support 1Edge Full support 12Firefox Full support 1IE Full support 9Opera Full support 9.2Safari Full support 1.3WebView Android Full support 1Chrome Android Full support 18Edge Mobile Full support 12Firefox Android Full support 4Opera Android Full support 10.1Safari iOS Full support 3.1Samsung Internet Android ?
Media query value supportChrome Full support 66Edge No support NoFirefox Full support 59IE No support NoOpera Full support 53Safari No support NoWebView Android No support NoChrome Android Full support 66Edge Mobile No support NoFirefox Android No support NoOpera Android Full support 47Safari iOS No support NoSamsung Internet Android No support No
monochrome media featureChrome Full support YesEdge No support NoFirefox Full support 2IE No support NoOpera Full support YesSafari Full support YesWebView Android Full support YesChrome Android Full support YesEdge Mobile No support NoFirefox Android Full support 4Opera Android ? Safari iOS ? Samsung Internet Android ?
orientation media featureChrome Full support YesEdge Full support 12Firefox Full support 2IE Full support 9Opera Full support YesSafari Full support YesWebView Android Full support YesChrome Android Full support YesEdge Mobile Full support 12Firefox Android Full support 4Opera Android ? Safari iOS ? Samsung Internet Android ?
overflow-block media feature
Experimental
Chrome No support NoEdge No support NoFirefox Full support 66IE No support NoOpera No support NoSafari No support NoWebView Android No support NoChrome Android No support NoEdge Mobile No support NoFirefox Android Full support 66Opera Android No support NoSafari iOS No support NoSamsung Internet Android No support No
overflow-inline media feature
Experimental
Chrome No support NoEdge No support NoFirefox Full support 66IE No support NoOpera No support NoSafari No support NoWebView Android No support NoChrome Android No support NoEdge Mobile No support NoFirefox Android Full support 66Opera Android No support NoSafari iOS No support NoSamsung Internet Android No support No
pointer media featureChrome Full support 41Edge Full support 12Firefox Full support 64IE No support NoOpera Full support 28Safari Full support 9WebView Android Full support 41Chrome Android Full support 50Edge Mobile Full support 12Firefox Android Full support 64Opera Android Full support 28Safari iOS Full support 9.2Samsung Internet Android ?
prefers-color-scheme media feature
Experimental
Chrome Full support 76Edge No support NoFirefox Full support 67IE No support NoOpera No support NoSafari Full support 12.1WebView Android Full support 76Chrome Android Full support 76Edge Mobile No support NoFirefox Android Full support 67Opera Android No support NoSafari iOS No support NoSamsung Internet Android ?
prefers-reduced-motion media feature
Experimental
Chrome Full support 74Edge No support NoFirefox Full support 63IE No support NoOpera No support NoSafari Full support 10.1WebView Android Full support 74Chrome Android Full support 74Edge Mobile No support NoFirefox Android Full support 64Opera Android No support NoSafari iOS Full support 10.3Samsung Internet Android ?
resolution media featureChrome Full support 29Edge Full support 12Firefox Full support 8
Full support 8
Partial support 3.5
Notes
Notes Supports <integer> values only.
IE Full support 9Opera Full support YesSafari ? WebView Android Full support 37Chrome Android Full support 29Edge Mobile Full support 12Firefox Android Full support 8
Full support 8
Partial support 4
Notes
Notes Supports <integer> values only.
Opera Android ? Safari iOS ? Samsung Internet Android ?
scan media featureChrome No support NoEdge No support NoFirefox No support NoIE No support NoOpera No support NoSafari No support NoWebView Android No support NoChrome Android No support NoEdge Mobile No support NoFirefox Android No support NoOpera Android ? Safari iOS ? Samsung Internet Android ?
scripting media feature
ExperimentalNon-standard
Chrome No support No
Notes
No support No
Notes
Notes See bug 489957.
Edge No support NoFirefox No support No
Notes
No support No
Notes
Notes See bug 1166581.
IE No support NoOpera No support NoSafari No support NoWebView Android No support No
Notes
No support No
Notes
Notes See bug 489957.
Chrome Android No support No
Notes
No support No
Notes
Notes See bug 489957.
Edge Mobile No support NoFirefox Android No support No
Notes
No support No
Notes
Notes See bug 1166581.
Opera Android No support NoSafari iOS No support NoSamsung Internet Android ?
speech media typeChrome No support NoEdge No support NoFirefox No support NoIE No support NoOpera Full support 9.2Safari No support NoWebView Android No support NoChrome Android No support NoEdge Mobile No support NoFirefox Android No support NoOpera Android Full support 10.1Safari iOS No support NoSamsung Internet Android No support No
update media feature
Experimental
Chrome No support NoEdge No support NoFirefox No support NoIE No support NoOpera No support NoSafari No support NoWebView Android No support NoChrome Android No support NoEdge Mobile No support NoFirefox Android No support NoOpera Android ? Safari iOS ? Samsung Internet Android ?
width media featureChrome Full support YesEdge Full support 12Firefox Full support 2IE Full support 9Opera Full support YesSafari Full support YesWebView Android Full support YesChrome Android Full support YesEdge Mobile Full support 12Firefox Android Full support 4Opera Android ? Safari iOS ? Samsung Internet Android ?
-moz-device-pixel-ratio media feature
DeprecatedNon-standard
Chrome No support NoEdge No support NoFirefox Full support 4IE No support NoOpera No support NoSafari ? WebView Android No support NoChrome Android No support NoEdge Mobile No support NoFirefox Android Full support 4Opera Android ? Safari iOS ? Samsung Internet Android ?
-webkit-animation media feature
Non-standard
Chrome No support ? — 36Edge No support NoFirefox No support NoIE No support NoOpera No support ? — 23Safari ? WebView Android No support ? — 37Chrome Android No support ? — 36Edge Mobile No support NoFirefox Android No support NoOpera Android No support ? — 24Safari iOS ? Samsung Internet Android No support ? — ?
-webkit-device-pixel-ratio media feature
Non-standard
Chrome Full support YesEdge Full support 12Firefox Full support 49
Notes Disabled
Full support 49
Notes Disabled
Notes Implemented as an alias for for -moz-device-pixel-ratio.
Disabled From version 49: this feature is behind the layout.css.prefixes.device-pixel-ratio-webkit preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Full support 45
Notes Disabled
Notes Implemented as an alias for for -moz-device-pixel-ratio.
Disabled From version 45: this feature is behind the layout.css.prefixes.webkit preference (needs to be set to true) and the layout.css.prefixes.device-pixel-ratio-webkit preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE No support NoOpera Full support YesSafari ? WebView Android Full support YesChrome Android Full support YesEdge Mobile Full support 12Firefox Android Full support 49
Notes Disabled
Full support 49
Notes Disabled
Notes Implemented as an alias for for -moz-device-pixel-ratio.
Disabled From version 49: this feature is behind the layout.css.prefixes.device-pixel-ratio-webkit preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Full support 45
Notes Disabled
Notes Implemented as an alias for for -moz-device-pixel-ratio.
Disabled From version 45: this feature is behind the layout.css.prefixes.webkit preference (needs to be set to true) and the layout.css.prefixes.device-pixel-ratio-webkit preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android ? Safari iOS ? Samsung Internet Android ?
-webkit-max-device-pixel-ratio media feature
Non-standard
Chrome Full support YesEdge Full support 12Firefox Full support 49
Notes Disabled
Full support 49
Notes Disabled
Notes Implemented as an alias for for max--moz-device-pixel-ratio.
Disabled From version 49: this feature is behind the layout.css.prefixes.device-pixel-ratio-webkit preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Full support 45
Notes Disabled
Notes Implemented as an alias for for max--moz-device-pixel-ratio.
Disabled From version 45: this feature is behind the layout.css.prefixes.webkit preference (needs to be set to true) and the layout.css.prefixes.device-pixel-ratio-webkit preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE No support NoOpera Full support YesSafari ? WebView Android Full support YesChrome Android Full support YesEdge Mobile Full support 12Firefox Android Full support 49
Notes Disabled
Full support 49
Notes Disabled
Notes Implemented as an alias for for max--moz-device-pixel-ratio.
Disabled From version 49: this feature is behind the layout.css.prefixes.device-pixel-ratio-webkit preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Full support 45
Notes Disabled
Notes Implemented as an alias for for max--moz-device-pixel-ratio.
Disabled From version 45: this feature is behind the layout.css.prefixes.webkit preference (needs to be set to true) and the layout.css.prefixes.device-pixel-ratio-webkit preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android ? Safari iOS ? Samsung Internet Android ?
-webkit-min-device-pixel-ratio media feature
Non-standard
Chrome Full support YesEdge Full support 12Firefox Full support 63
Notes
Full support 63
Notes
Notes Implemented as an alias for for -moz-device-pixel-ratio.
Full support 49
Notes Disabled
Notes Implemented as an alias for for min--moz-device-pixel-ratio.
Disabled From version 49: this feature is behind the layout.css.prefixes.device-pixel-ratio-webkit preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Full support 45
Notes Disabled
Notes Implemented as an alias for for min--moz-device-pixel-ratio.
Disabled From version 45: this feature is behind the layout.css.prefixes.webkit preference (needs to be set to true) and the layout.css.prefixes.device-pixel-ratio-webkit preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE No support NoOpera Full support YesSafari ? WebView Android Full support YesChrome Android Full support YesEdge Mobile Full support 12Firefox Android Full support 63
Notes
Full support 63
Notes
Notes Implemented as an alias for for -moz-device-pixel-ratio.
Full support 49
Notes Disabled
Notes Implemented as an alias for for min--moz-device-pixel-ratio.
Disabled From version 49: this feature is behind the layout.css.prefixes.device-pixel-ratio-webkit preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Full support 45
Notes Disabled
Notes Implemented as an alias for for min--moz-device-pixel-ratio.
Disabled From version 45: this feature is behind the layout.css.prefixes.webkit preference (needs to be set to true) and the layout.css.prefixes.device-pixel-ratio-webkit preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android ? Safari iOS ? Samsung Internet Android ?
-webkit-transform-2d media feature
Non-standard
Chrome No support NoEdge No support NoFirefox No support NoIE No support NoOpera Full support YesSafari Full support 1.3WebView Android No support NoChrome Android No support NoEdge Mobile No support NoFirefox Android No support NoOpera Android ? Safari iOS ? Samsung Internet Android ?
-webkit-transform-3d media feature
Non-standard
Chrome Full support YesEdge Full support 12Firefox Full support 49
Full support 49
Full support 46
Disabled
Disabled From version 46: this feature is behind the layout.css.prefixes.webkit preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE No support NoOpera Full support YesSafari Full support 1.3WebView Android Full support YesChrome Android Full support YesEdge Mobile Full support 12Firefox Android Full support 49
Full support 49
Full support 46
Disabled
Disabled From version 46: this feature is behind the layout.css.prefixes.webkit preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android ? Safari iOS ? Samsung Internet Android ?
-webkit-transition media feature
DeprecatedNon-standard
Chrome No support NoEdge No support NoFirefox No support NoIE No support NoOpera Full support YesSafari Full support 1.3WebView Android No support NoChrome Android No support NoEdge Mobile No support NoFirefox Android No support NoOpera Android ? Safari iOS ? Samsung Internet Android ?

Legend

Full support  
Full support
No support  
No support
Compatibility unknown  
Compatibility unknown
Experimental. Expect behavior to change in the future.
Experimental. Expect behavior to change in the future.
Non-standard. Expect poor cross-browser support.
Non-standard. Expect poor cross-browser support.
Deprecated. Not for use in new websites.
Deprecated. Not for use in new websites.
See implementation notes.
See implementation notes.
User must explicitly enable this feature.
User must explicitly enable this feature.

@supports rule

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidEdge MobileFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
@supportsChrome Full support 28Edge Full support 12Firefox Full support 22
Full support 22
No support 17 — 22
Disabled
Disabled From version 17 until version 22 (exclusive): this feature is behind the layout.css.supports-rule.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE No support NoOpera Full support 12.1Safari Full support 9WebView Android Full support YesChrome Android Full support 28Edge Mobile Full support YesFirefox Android Full support 22
Full support 22
No support 17 — 22
Disabled
Disabled From version 17 until version 22 (exclusive): this feature is behind the layout.css.supports-rule.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android Full support 12.1Safari iOS Full support 9Samsung Internet Android Full support Yes
selector()
Experimental
Chrome No support NoEdge No support NoFirefox Full support 64
Disabled
Full support 64
Disabled
Disabled From version 64: this feature is behind the layout.css.supports-selector.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE No support NoOpera No support NoSafari No support NoWebView Android No support NoChrome Android No support NoEdge Mobile No support NoFirefox Android Full support 64
Disabled
Full support 64
Disabled
Disabled From version 64: this feature is behind the layout.css.supports-selector.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android No support NoSafari iOS No support NoSamsung Internet Android No support No

Legend

Full support  
Full support
No support  
No support
Experimental. Expect behavior to change in the future.
Experimental. Expect behavior to change in the future.
User must explicitly enable this feature.
User must explicitly enable this feature.

Document Tags and Contributors

Contributors to this page: mdnwebdocs-bot, fscholz, arnulfolg, mfluehr, Sebastianz, teoli
Last updated by: mdnwebdocs-bot,