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
@document No No 61
Prefixed Disabled
61
Prefixed Disabled
Prefixed Implemented with 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 Implemented with the vendor prefix: -moz-
No No No
regexp() No No 6 No No No
Mobile
Android webview Chrome for Android Firefox for Android Opera for Android Safari on iOS Samsung Internet
@document No No 61
Prefixed Disabled
61
Prefixed Disabled
Prefixed Implemented with 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.
4 — 61
Prefixed
Prefixed Implemented with the vendor prefix: -moz-
No No No
regexp() No No 6 No No No

@import rule

Desktop
Chrome Edge Firefox Internet Explorer Opera Safari
@import 1 12 1 5.5 3.5 1
Mobile
Android webview Chrome for Android Firefox for Android Opera for Android Safari on iOS Samsung Internet
@import ≤37 18 4 10.1 1 1.0

@media rule

Desktop
Chrome Edge Firefox Internet Explorer Opera Safari
@media 1 12 1 6 9.2 1.3
any-hover media feature 41 16 64 No 28 9
any-pointer media feature 41 12 64 No 28 9
aspect-ratio media feature 3 12 3.5 9 10 5
calc() expressions 66 79 59 No 53 12
color media feature 1 12 2 9 10 3
color-gamut media feature 58 79 No No 45 10
color-index media feature 29 79 No No 16 8
device-aspect-ratio media feature 1 12 2 9 10 3
device-height media feature 1 12 2 9 10 3
device-width media feature 1 12 2 9 10 3
display-mode media feature 45 79 47
47
Firefox 47 and later support display-mode values fullscreen and browser. Firefox 57 added support for minimal-ui and standalone values.
No 32 13
forced-colors media feature 79
Disabled
79
Disabled
See bug 970285.
Disabled From version 79: this feature is behind the #forced-colors preference (needs to be set to Enabled). To change preferences in Chrome, visit chrome://flags.
79 81
Disabled
81
Disabled
Disabled From version 81: this feature is behind the layout.css.forced-colors.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
No No No
grid media feature 1 12 2 10 10 3
height media feature 1 12 2 9 10 3
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
inverted-colors media feature No No No No No 9.1
Media feature expressions 1 12 1 9 9.2 1.3
Media query value support 66 79 59 No 53 No
monochrome media feature 1 79 2 No 10 3
Nested media queries 26 12 11 No 12.1 6.1
orientation media feature 3 12 2 9 10.6 5
overflow-block media feature No No 66 No No No
overflow-inline media feature No No 66 No No No
pointer media feature 41 12 64 No 28 9
prefers-color-scheme media feature 76 79 67 No 62 12.1
prefers-contrast media feature No No 80
Disabled
80
Disabled
Disabled From version 80: this feature is behind the layout.css.prefers-contrast.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
No No No
prefers-reduced-data media feature 85
Disabled
85
Disabled
See bug 1051189.
Disabled From version 85: this feature is behind the #enable-experimental-web-platform-features preference (needs to be set to Enabled). To change preferences in Chrome, visit chrome://flags.
85
Disabled
85
Disabled
See bug 1051189.
Disabled From version 85: this feature is behind the #enable-experimental-web-platform-features preference (needs to be set to Enabled).
No No No No
prefers-reduced-motion media feature 74 79 63 No 62 10.1
prefers-reduced-transparency media feature No No No No No No
resolution media feature 29 12 8
8
3.5
Supports <integer> values only.
9 16
16
10 — 15
No
No
See bug 78087.
scan media feature No No No No No No
scripting media feature No
No
See bug 489957.
No
No
See bug 489957.
No
No
See bug 1166581.
No No No
speech media type No No No No 9.2 No
update media feature No No No No No No
width media feature 1 12 2 9 10 3
-moz-device-pixel-ratio media feature No No 4 No No No
-webkit-animation media feature 2 — 36 No No No 15 — 23 4
-webkit-device-pixel-ratio media feature 1 12 63
63
Implemented as an alias for for -moz-device-pixel-ratio.
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 15 3
-webkit-max-device-pixel-ratio media feature 1 12 63
63
Implemented as an alias for for max--moz-device-pixel-ratio.
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 15 3
-webkit-min-device-pixel-ratio media feature 1 12 63
63
Implemented as an alias for for min--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 15 3
-webkit-transform-2d media feature 2 — 36 No No No 15 — 23 4
-webkit-transform-3d media feature 2 — 36 12 — 79 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.
No 15 — 23 4
-webkit-transition media feature 2 — 36 No No No 15 — 23 4
Mobile
Android webview Chrome for Android Firefox for Android Opera for Android Safari on iOS Samsung Internet
@media 1 18 4 10.1 1 1.0
any-hover media feature 41 41 64 28 9 5.0
any-pointer media feature 41 41 64 28 9 4.0
aspect-ratio media feature ≤37 18 4 10.1 4.2 1.0
calc() expressions 66 66 59 47 12 9.0
color media feature ≤37 18 4 10.1 1 1.0
color-gamut media feature 58 58 No 43 10 7.0
color-index media feature ≤37 29 No 16 8 2.0
device-aspect-ratio media feature ≤37 18 4 10.1 1 1.0
device-height media feature ≤37 18 4 10.1 1 1.0
device-width media feature ≤37 18 4 10.1 1 1.0
display-mode media feature 45 45 47
47
Firefox 47 and later support display-mode values fullscreen and browser. Firefox 57 added support for minimal-ui and standalone values.
32 13 5.0
forced-colors media feature No
No
See bug 970285.
No
No
See bug 970285.
No No No No
No
See bug 970285.
grid media feature ≤37 18 4 10.1 1 1.0
height media feature ≤37 18 4 10.1 1 1.0
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.
50 64 28 9 5.0
inverted-colors media feature No No No No 10 No
Media feature expressions 1 18 4 10.1 3.1 1.0
Media query value support 66 66 59 47 No 9.0
monochrome media feature ≤37 18 4 10.1 1 1.0
Nested media queries ≤37 26 14 12.1 7 1.5
orientation media feature ≤37 18 4 11 4.2 1.0
overflow-block media feature No No 66 No No No
overflow-inline media feature No No 66 No No No
pointer media feature 41 50 64 28 9 5.0
prefers-color-scheme media feature 76 76 No 54 13 12.0
prefers-contrast media feature No No No No No No
prefers-reduced-data media feature No
No
See bug 1051189.
85
Disabled
85
Disabled
See bug 1051189.
Disabled From version 85: this feature is behind the #enable-experimental-web-platform-features preference (needs to be set to Enabled). To change preferences in Chrome, visit chrome://flags.
No No No No
prefers-reduced-motion media feature 74 74 64 53 10.3 11.0
prefers-reduced-transparency media feature No No No No No No
resolution media feature ≤37 29 8
8
4
Supports <integer> values only.
16
16
10.1 — 14
No
No
See bug 78087.
2.0
scan media feature No No No No No No
scripting media feature No
No
See bug 489957.
No
No
See bug 489957.
No
No
See bug 1166581.
No No No
No
See bug 489957.
speech media type No No No 10.1 No No
update media feature No No No No No No
width media feature ≤37 18 4 10.1 1 1.0
-moz-device-pixel-ratio media feature No No 4 No No No
-webkit-animation media feature ≤37 — ≤37 18 — 36 No 14 — 24 3.2 1.0 — 3.0
-webkit-device-pixel-ratio media feature ≤37 18 63
63
Implemented as an alias for for -moz-device-pixel-ratio.
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.
14 1 1.0
-webkit-max-device-pixel-ratio media feature ≤37 18 63
63
Implemented as an alias for for max--moz-device-pixel-ratio.
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.
14 1 1.0
-webkit-min-device-pixel-ratio media feature ≤37 18 63
63
Implemented as an alias for for min--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.
14 1 1.0
-webkit-transform-2d media feature ≤37 — ≤37 18 — 36 No 14 — 24 3.2 1.0 — 3.0
-webkit-transform-3d media feature ≤37 — ≤37 18 — 36 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.
14 — 24 3.2 1.0 — 3.0
-webkit-transition media feature ≤37 — ≤37 18 — 36 No 14 — 24 3.2 1.0 — 3.0

Legend

Full support
No support
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
@supports 28 12 22
22
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.
No 12.1 9
selector() 83 83 69
69
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 69 No
No
See bug 199237
Mobile
Android webview Chrome for Android Firefox for Android Opera for Android Safari on iOS Samsung Internet
@supports ≤37 28 22
22
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.
12.1 9 1.5
selector() 83 83 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
See bug 979041.
No
No
See bug 199237
13.0

Legend

Full support
No support
See implementation notes.
See implementation notes.
User must explicitly enable this feature.
User must explicitly enable this feature.

© 2005–2020 Mozilla 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