W3cubDocs

/CSS

CSS Conditional Rules

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 compatibilityUpdate compatibility data on GitHubUpdate compatibility data on GitHubUpdate compatibility data on GitHubUpdate compatibility data on GitHub

@document rule

Desktop
Chrome Edge Firefox Internet Explorer Opera Safari
Basic support No ? 61
Prefixed Disabled
61
Prefixed Disabled
Prefixed Requires the vendor prefix: -moz-
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.
1.5 — 61
Prefixed
Prefixed Requires the vendor prefix: -moz-
 No No No
regexp() No ? 6 No No No
Mobile
Android webview Chrome for Android Edge Mobile Firefox for Android Opera for Android iOS Safari Samsung Internet
Basic support ? ? ? ? ? ? No
regexp() No No ? ? No No No

@import rule

Desktop
Chrome Edge Firefox Internet Explorer Opera Safari
Basic support Yes Yes Yes 5.5 Yes Yes
Mobile
Android webview Chrome for Android Edge Mobile Firefox for Android Opera for Android iOS Safari Samsung Internet
Basic support Yes Yes Yes Yes Yes Yes Yes

@media rule

Desktop
Chrome Edge Firefox Internet Explorer Opera Safari
Basic support 1 Yes 1 6 9.2 1.3
speech media type No No No No 9.2 No
Media feature expressions 1 Yes 1 9 9.2 1.3
any-hover media feature 41 16 No
No
See bug 1035774.
 No 28 9
any-pointer media feature 41 12 No
No
See bug 1035774.
 No 28 9
aspect-ratio media feature 4 ? 3.5 9 53 Yes
color media feature Yes ? Yes ? Yes Yes
color-gamut media feature 58 ? No No 45 Yes
color-index media feature Yes ? No No ? ?
device-aspect-ratio media feature Yes ? Yes ? ? ?
device-height media feature Yes ? Yes ? ? ?
device-width media feature Yes ? Yes ? ? ?
display-mode media feature 46 No 47
47
Firefox 47 and later support display-mode values fullscreen and browser. Firefox 57 added support for minimal-ui and standalone values.
 ? ? ?
grid media feature Yes ? Yes ? Yes Yes
height media feature ? ? ? 9 ? ?
inverted-colors media feature No ? No No No Yes
hover media feature 38
38
Before Chrome 41, the implementation was buggy and reported (hover: none) on non-touch-based computers with a mouse/trackpad. See bug 441613.
 12 64 No 28 9
light-level media feature No ? No No No No
monochrome media feature Yes ? Yes No Yes Yes
orientation media feature Yes ? Yes ? Yes Yes
overflow-block media feature No ? No
No
See bug 1422235.
 ? ? ?
overflow-inline media feature No ? No
No
See bug 1422235.
 ? ? ?
pointer media feature 41 12 64 ? 28 9
prefers-reduced-motion media feature No No 63 No No 10.1
resolution media feature 29 ? 8
8
3.5
Supports <integer> values only.
 ? Yes ?
scan media feature No ? No No No No
scripting media feature No
No
See bug 489957.
 ? No
No
See bug 1166581.
 No No No
update media feature No ? No No No No
width media feature Yes ? Yes 9 Yes Yes
-moz-device-pixel-ratio media feature No ? 4 ? ? ?
-webkit-animation media feature Yes ? ? ? ? ?
-webkit-device-pixel-ratio media feature Yes ? 49
Disabled
49
Disabled
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.
45
Disabled
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.
 No Yes ?
-webkit-max-device-pixel-ratio media feature Yes ? 49
Disabled
49
Disabled
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.
45
Disabled
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.
 No Yes ?
-webkit-min-device-pixel-ratio media feature Yes ? 63
63
Implemented as an alias for for -moz-device-pixel-ratio.
49
Disabled
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.
45
Disabled
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.
 No Yes ?
-webkit-transform-2d media feature No No No No Yes 1
-webkit-transform-3d media feature Yes ? 49
49
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.
 ? Yes 1
-webkit-transition media feature No ? No ? Yes 1
Mobile
Android webview Chrome for Android Edge Mobile Firefox for Android Opera for Android iOS Safari Samsung Internet
Basic support 1 ? Yes 4 9 3.1 ?
speech media type No ? No No 9 No No
Media feature expressions 1 ? Yes 4 9 3.1 ?
any-hover media feature 41 41 16 No
No
See bug 1035774.
 28 9.2 5.0
any-pointer media feature 41 41 12 No
No
See bug 1035774.
 28 9.2 ?
aspect-ratio media feature Yes ? ? ? ? No Yes
color media feature ? ? ? ? ? ? ?
color-gamut media feature ? 58 ? No 45 ? ?
color-index media feature ? ? ? ? ? ? ?
device-aspect-ratio media feature ? Yes ? Yes ? ? ?
device-height media feature ? Yes ? Yes ? ? ?
device-width media feature ? Yes ? Yes ? ? ?
display-mode media feature ? 46 No 47
47
Firefox 47 and later support display-mode values fullscreen and browser. Firefox 57 added support for minimal-ui and standalone values.
 ? ? ?
grid media feature ? ? ? ? ? ? ?
height media feature ? ? ? ? ? ? ?
inverted-colors media feature ? No ? No No Yes ?
hover media feature ? 50 12 64 28 9.2 ?
light-level media feature No No ? No No No ?
monochrome media feature ? ? ? ? ? ? ?
orientation media feature Yes ? ? ? ? ? ?
overflow-block media feature ? No ? No
No
See bug 1422235.
 ? ? ?
overflow-inline media feature ? No ? No
No
See bug 1422235.
 ? ? ?
pointer media feature ? 50 12 64 28 9.2 ?
prefers-reduced-motion media feature No No No No No 10.3 ?
resolution media feature ? ? ? ? ? ? ?
scan media feature ? ? ? No ? ? ?
scripting media feature No
No
See bug 489957.
 No
No
See bug 489957.
 ? No
No
See bug 1166581.
 No No ?
update media feature ? ? ? ? ? ? ?
width media feature ? ? ? ? ? ? ?
-moz-device-pixel-ratio media feature ? ? ? ? ? ? ?
-webkit-animation media feature ? ? ? ? ? ? ?
-webkit-device-pixel-ratio media feature ? ? ? ? ? ? ?
-webkit-max-device-pixel-ratio media feature ? ? ? ? ? ? ?
-webkit-min-device-pixel-ratio media feature ? ? ? ? ? ? ?
-webkit-transform-2d media feature ? ? No No ? ? ?
-webkit-transform-3d media feature ? ? ? ? ? ? ?
-webkit-transition media feature ? ? ? ? ? ? ?

Legend

Full support
No support
Compatibility unknown
Compatibility unknown
Experimental. Expect behavior to change in the future.
Non-standard. Expect poor cross-browser support.
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

Desktop
Chrome Edge Firefox Internet Explorer Opera Safari
Basic support 28 12 22
22
17 — ?
Disabled
Disabled From version 17: 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.
 No 12.1 9
selector() No No 64
Disabled
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.
 No No No
Mobile
Android webview Chrome for Android Edge Mobile Firefox for Android Opera for Android iOS Safari Samsung Internet
Basic support Yes 28 Yes 22
22
17 — ?
Disabled
Disabled From version 17: 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.
 12.1 9 Yes
selector() No No No 64
Disabled
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.
 No No No

Legend

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

Edit this page on MDN

© 2005–2018 Mozilla Developer Network and individual contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Conditional_Rules