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
The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
@document | Chrome No support No | Edge No support No | Firefox
Full support
61
| IE No support No | Opera No support No | Safari No support No | WebView Android No support No | Chrome Android No support No | Firefox Android
Full support
61
| Opera Android No support No | Safari iOS No support No | Samsung Internet Android No support No |
regexp() | Chrome No support No | Edge No support No | Firefox Full support 6 | IE No support No | Opera No support No | Safari No support No | WebView Android No support No | Chrome Android No support No | Firefox Android Full support 6 | Opera Android No support No | Safari iOS No support No | Samsung 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.
- 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
The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
@import | Chrome Full support 1 | Edge Full support 12 | Firefox Full support 1 | IE Full support 5.5 | Opera Full support 3.5 | Safari Full support 1 | WebView Android Full support ≤37 | Chrome Android Full support 18 | Firefox Android Full support 4 | Opera Android Full support 10.1 | Safari iOS Full support 1 | Samsung Internet Android Full support 1.0 |
Legend
- Full support
- Full support
@media
rule
The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
@media | Chrome Full support 1 | Edge Full support 12 | Firefox Full support 1 | IE Full support 6 | Opera Full support 9.2 | Safari Full support 1.3 | WebView Android Full support 1 | Chrome Android Full support 18 | Firefox Android Full support 4 | Opera Android Full support 10.1 | Safari iOS Full support 1 | Samsung Internet Android Full support 1.0 |
any-hover media feature | Chrome Full support 41 | Edge Full support 16 | Firefox Full support 64 | IE No support No | Opera Full support 28 | Safari Full support 9 | WebView Android Full support 41 | Chrome Android Full support 41 | Firefox Android Full support 64 | Opera Android Full support 28 | Safari iOS Full support 9 | Samsung Internet Android Full support 5.0 |
any-pointer media feature | Chrome Full support 41 | Edge Full support 12 | Firefox Full support 64 | IE No support No | Opera Full support 28 | Safari Full support 9 | WebView Android Full support 41 | Chrome Android Full support 41 | Firefox Android Full support 64 | Opera Android Full support 28 | Safari iOS Full support 9 | Samsung Internet Android Full support 4.0 |
aspect-ratio media feature | Chrome Full support 3 | Edge Full support 12 | Firefox Full support 3.5 | IE Full support 9 | Opera Full support 10 | Safari Full support 5 | WebView Android Full support ≤37 | Chrome Android Full support 18 | Firefox Android Full support 4 | Opera Android Full support 10.1 | Safari iOS Full support 4.2 | Samsung Internet Android Full support 1.0 |
calc() expressions | Chrome Full support 66 | Edge Full support 79 | Firefox Full support 59 | IE No support No | Opera Full support 53 | Safari Full support 12 | WebView Android Full support 66 | Chrome Android Full support 66 | Firefox Android Full support 59 | Opera Android Full support 47 | Safari iOS Full support 12 | Samsung Internet Android Full support 9.0 |
color media feature | Chrome Full support 1 | Edge Full support 12 | Firefox Full support 2 | IE Full support 9 | Opera Full support 10 | Safari Full support 3 | WebView Android Full support ≤37 | Chrome Android Full support 18 | Firefox Android Full support 4 | Opera Android Full support 10.1 | Safari iOS Full support 1 | Samsung Internet Android Full support 1.0 |
color-gamut media feature | Chrome Full support 58 | Edge Full support 79 | Firefox No support No | IE No support No | Opera Full support 45 | Safari Full support 10 | WebView Android Full support 58 | Chrome Android Full support 58 | Firefox Android No support No | Opera Android Full support 43 | Safari iOS Full support 10 | Samsung Internet Android Full support 7.0 |
color-index media feature | Chrome Full support 29 | Edge Full support 79 | Firefox No support No | IE No support No | Opera Full support 16 | Safari Full support 8 | WebView Android Full support ≤37 | Chrome Android Full support 29 | Firefox Android No support No | Opera Android Full support 16 | Safari iOS Full support 8 | Samsung Internet Android Full support 2.0 |
device-aspect-ratio media feature | Chrome Full support 1 | Edge Full support 12 | Firefox Full support 2 | IE Full support 9 | Opera Full support 10 | Safari Full support 3 | WebView Android Full support ≤37 | Chrome Android Full support 18 | Firefox Android Full support 4 | Opera Android Full support 10.1 | Safari iOS Full support 1 | Samsung Internet Android Full support 1.0 |
device-height media feature | Chrome Full support 1 | Edge Full support 12 | Firefox Full support 2 | IE Full support 9 | Opera Full support 10 | Safari Full support 3 | WebView Android Full support ≤37 | Chrome Android Full support 18 | Firefox Android Full support 4 | Opera Android Full support 10.1 | Safari iOS Full support 1 | Samsung Internet Android Full support 1.0 |
device-width media feature | Chrome Full support 1 | Edge Full support 12 | Firefox Full support 2 | IE Full support 9 | Opera Full support 10 | Safari Full support 3 | WebView Android Full support ≤37 | Chrome Android Full support 18 | Firefox Android Full support 4 | Opera Android Full support 10.1 | Safari iOS Full support 1 | Samsung Internet Android Full support 1.0 |
display-mode media feature | Chrome Full support 45 | Edge Full support 79 | Firefox
Full support
47
| IE No support No | Opera Full support 32 | Safari Full support 13 | WebView Android Full support 45 | Chrome Android Full support 45 | Firefox Android
Full support
47
| Opera Android Full support 32 | Safari iOS Full support 13 | Samsung Internet Android Full support 5.0 |
forced-colors media feature | Chrome
No support
No
| Edge
No support
No
| Firefox No support No | IE No support No | Opera No support No | Safari No support No | WebView Android
No support
No
| Chrome Android
No support
No
| Firefox Android No support No | Opera Android No support No | Safari iOS No support No | Samsung Internet Android No support No |
grid media feature | Chrome Full support 1 | Edge Full support 12 | Firefox Full support 2 | IE Full support 10 | Opera Full support 10 | Safari Full support 3 | WebView Android Full support ≤37 | Chrome Android Full support 18 | Firefox Android Full support 4 | Opera Android Full support 10.1 | Safari iOS Full support 1 | Samsung Internet Android Full support 1.0 |
height media feature | Chrome Full support 1 | Edge Full support 12 | Firefox Full support 2 | IE Full support 9 | Opera Full support 10 | Safari Full support 3 | WebView Android Full support ≤37 | Chrome Android Full support 18 | Firefox Android Full support 4 | Opera Android Full support 10.1 | Safari iOS Full support 1 | Samsung Internet Android Full support 1.0 |
hover media feature | Chrome
Full support
38
| Edge Full support 12 | Firefox Full support 64 | IE No support No | Opera Full support 28 | Safari Full support 9 | WebView Android
Full support
38
| Chrome Android Full support 50 | Firefox Android Full support 64 | Opera Android Full support 28 | Safari iOS Full support 9 | Samsung Internet Android Full support 5.0 |
inverted-colors media feature | Chrome No support No | Edge No support No | Firefox No support No | IE No support No | Opera No support No | Safari Full support 9.1 | WebView Android No support No | Chrome Android No support No | Firefox Android No support No | Opera Android No support No | Safari iOS Full support 10 | Samsung Internet Android No support No |
light-level media feature | Chrome No support No | Edge No support No | Firefox No support No | IE No support No | Opera No support No | Safari No support No | WebView Android No support No | Chrome Android No support No | Firefox Android No support No | Opera Android No support No | Safari iOS No support No | Samsung Internet Android No support No |
Media feature expressions | Chrome Full support 1 | Edge Full support 12 | Firefox Full support 1 | IE Full support 9 | Opera Full support 9.2 | Safari Full support 1.3 | WebView Android Full support 1 | Chrome Android Full support 18 | Firefox Android Full support 4 | Opera Android Full support 10.1 | Safari iOS Full support 3.1 | Samsung Internet Android Full support 1.0 |
Media query value support | Chrome Full support 66 | Edge Full support 79 | Firefox Full support 59 | IE No support No | Opera Full support 53 | Safari No support No | WebView Android Full support 66 | Chrome Android Full support 66 | Firefox Android Full support 59 | Opera Android Full support 47 | Safari iOS No support No | Samsung Internet Android Full support 9.0 |
monochrome media feature | Chrome Full support 1 | Edge Full support 79 | Firefox Full support 2 | IE No support No | Opera Full support 10 | Safari Full support 3 | WebView Android Full support ≤37 | Chrome Android Full support 18 | Firefox Android Full support 4 | Opera Android Full support 10.1 | Safari iOS Full support 1 | Samsung Internet Android Full support 1.0 |
Nested media queries | Chrome Full support 26 | Edge Full support 12 | Firefox Full support 11 | IE No support No | Opera Full support 12.1 | Safari Full support 6.1 | WebView Android Full support ≤37 | Chrome Android Full support 26 | Firefox Android Full support 14 | Opera Android Full support 12.1 | Safari iOS Full support 7 | Samsung Internet Android Full support 1.5 |
orientation media feature | Chrome Full support 3 | Edge Full support 12 | Firefox Full support 2 | IE Full support 9 | Opera Full support 10.6 | Safari Full support 5 | WebView Android Full support ≤37 | Chrome Android Full support 18 | Firefox Android Full support 4 | Opera Android Full support 11 | Safari iOS Full support 4.2 | Samsung Internet Android Full support 1.0 |
overflow-block media feature | Chrome No support No | Edge No support No | Firefox Full support 66 | IE No support No | Opera No support No | Safari No support No | WebView Android No support No | Chrome Android No support No | Firefox Android Full support 66 | Opera Android No support No | Safari iOS No support No | Samsung Internet Android No support No |
overflow-inline media feature | Chrome No support No | Edge No support No | Firefox Full support 66 | IE No support No | Opera No support No | Safari No support No | WebView Android No support No | Chrome Android No support No | Firefox Android Full support 66 | Opera Android No support No | Safari iOS No support No | Samsung Internet Android No support No |
pointer media feature | Chrome Full support 41 | Edge Full support 12 | Firefox Full support 64 | IE No support No | Opera Full support 28 | Safari Full support 9 | WebView Android Full support 41 | Chrome Android Full support 50 | Firefox Android Full support 64 | Opera Android Full support 28 | Safari iOS Full support 9 | Samsung Internet Android Full support 5.0 |
prefers-color-scheme media feature | Chrome Full support 76 | Edge Full support 79 | Firefox Full support 67 | IE No support No | Opera Full support 62 | Safari Full support 12.1 | WebView Android Full support 76 | Chrome Android Full support 76 | Firefox Android No support No | Opera Android Full support 54 | Safari iOS Full support 13 | Samsung Internet Android No support No |
prefers-contrast media feature | Chrome No support No | Edge No support No | Firefox No support No | IE No support No | Opera No support No | Safari No support No | WebView Android No support No | Chrome Android No support No | Firefox Android No support No | Opera Android No support No | Safari iOS No support No | Samsung Internet Android No support No |
prefers-reduced-data media feature | Chrome
Full support
85
| Edge
Full support
85
| Firefox No support No | IE No support No | Opera No support No | Safari No support No | WebView Android
No support
No
| Chrome Android
Full support
85
| Firefox Android No support No | Opera Android No support No | Safari iOS No support No | Samsung Internet Android No support No |
prefers-reduced-motion media feature | Chrome Full support 74 | Edge Full support 79 | Firefox Full support 63 | IE No support No | Opera Full support 62 | Safari Full support 10.1 | WebView Android Full support 74 | Chrome Android Full support 74 | Firefox Android Full support 64 | Opera Android Full support 53 | Safari iOS Full support 10.3 | Samsung Internet Android No support No |
prefers-reduced-transparency media feature | Chrome No support No | Edge No support No | Firefox No support No | IE No support No | Opera No support No | Safari No support No | WebView Android No support No | Chrome Android No support No | Firefox Android No support No | Opera Android No support No | Safari iOS No support No | Samsung Internet Android No support No |
resolution media feature | Chrome Full support 29 | Edge Full support 12 | Firefox
Full support
8
| IE Full support 9 | Opera
Full support
16
| Safari
No support
No
| WebView Android Full support ≤37 | Chrome Android Full support 29 | Firefox Android
Full support
8
| Opera Android
Full support
16
| Safari iOS
No support
No
| Samsung Internet Android Full support 2.0 |
scan media feature | Chrome No support No | Edge No support No | Firefox No support No | IE No support No | Opera No support No | Safari No support No | WebView Android No support No | Chrome Android No support No | Firefox Android No support No | Opera Android No support No | Safari iOS No support No | Samsung Internet Android No support No |
scripting media feature | Chrome
No support
No
| Edge
No support
No
| Firefox
No support
No
| IE No support No | Opera No support No | Safari No support No | WebView Android
No support
No
| Chrome Android
No support
No
| Firefox Android
No support
No
| Opera Android No support No | Safari iOS No support No | Samsung Internet Android
No support
No
|
speech media type | Chrome No support No | Edge No support No | Firefox No support No | IE No support No | Opera Full support 9.2 | Safari No support No | WebView Android No support No | Chrome Android No support No | Firefox Android No support No | Opera Android Full support 10.1 | Safari iOS No support No | Samsung Internet Android No support No |
update media feature | Chrome No support No | Edge No support No | Firefox No support No | IE No support No | Opera No support No | Safari No support No | WebView Android No support No | Chrome Android No support No | Firefox Android No support No | Opera Android No support No | Safari iOS No support No | Samsung Internet Android No support No |
width media feature | Chrome Full support 1 | Edge Full support 12 | Firefox Full support 2 | IE Full support 9 | Opera Full support 10 | Safari Full support 3 | WebView Android Full support ≤37 | Chrome Android Full support 18 | Firefox Android Full support 4 | Opera Android Full support 10.1 | Safari iOS Full support 1 | Samsung Internet Android Full support 1.0 |
-moz-device-pixel-ratio media feature | Chrome No support No | Edge No support No | Firefox Full support 4 | IE No support No | Opera No support No | Safari No support No | WebView Android No support No | Chrome Android No support No | Firefox Android Full support 4 | Opera Android No support No | Safari iOS No support No | Samsung Internet Android No support No |
-webkit-animation media feature | Chrome No support 2 — 36 | Edge No support No | Firefox No support No | IE No support No | Opera No support 15 — 23 | Safari Full support 4 | WebView Android No support ≤37 — ≤37 | Chrome Android No support 18 — 36 | Firefox Android No support No | Opera Android No support 14 — 24 | Safari iOS Full support 3.2 | Samsung Internet Android No support 1.0 — 3.0 |
-webkit-device-pixel-ratio media feature | Chrome Full support 1 | Edge Full support 12 | Firefox
Full support
63
| IE No support No | Opera Full support 15 | Safari Full support 3 | WebView Android Full support ≤37 | Chrome Android Full support 18 | Firefox Android
Full support
63
| Opera Android Full support 14 | Safari iOS Full support 1 | Samsung Internet Android Full support 1.0 |
-webkit-max-device-pixel-ratio media feature | Chrome Full support 1 | Edge Full support 12 | Firefox
Full support
63
| IE No support No | Opera Full support 15 | Safari Full support 3 | WebView Android Full support ≤37 | Chrome Android Full support 18 | Firefox Android
Full support
63
| Opera Android Full support 14 | Safari iOS Full support 1 | Samsung Internet Android Full support 1.0 |
-webkit-min-device-pixel-ratio media feature | Chrome Full support 1 | Edge Full support 12 | Firefox
Full support
63
| IE No support No | Opera Full support 15 | Safari Full support 3 | WebView Android Full support ≤37 | Chrome Android Full support 18 | Firefox Android
Full support
63
| Opera Android Full support 14 | Safari iOS Full support 1 | Samsung Internet Android Full support 1.0 |
-webkit-transform-2d media feature | Chrome No support 2 — 36 | Edge No support No | Firefox No support No | IE No support No | Opera No support 15 — 23 | Safari Full support 4 | WebView Android No support ≤37 — ≤37 | Chrome Android No support 18 — 36 | Firefox Android No support No | Opera Android No support 14 — 24 | Safari iOS Full support 3.2 | Samsung Internet Android No support 1.0 — 3.0 |
-webkit-transform-3d media feature | Chrome No support 2 — 36 | Edge No support 12 — 79 | Firefox
Full support
49
| IE No support No | Opera No support 15 — 23 | Safari Full support 4 | WebView Android No support ≤37 — ≤37 | Chrome Android No support 18 — 36 | Firefox Android
Full support
49
| Opera Android No support 14 — 24 | Safari iOS Full support 3.2 | Samsung Internet Android No support 1.0 — 3.0 |
-webkit-transition media feature | Chrome No support 2 — 36 | Edge No support No | Firefox No support No | IE No support No | Opera No support 15 — 23 | Safari Full support 4 | WebView Android No support ≤37 — ≤37 | Chrome Android No support 18 — 36 | Firefox Android No support No | Opera Android No support 14 — 24 | Safari iOS Full support 3.2 | Samsung Internet Android No support 1.0 — 3.0 |
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.
- 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
The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
@supports | Chrome Full support 28 | Edge Full support 12 | Firefox
Full support
22
| IE No support No | Opera Full support 12.1 | Safari Full support 9 | WebView Android Full support ≤37 | Chrome Android Full support 28 | Firefox Android
Full support
22
| Opera Android Full support 12.1 | Safari iOS Full support 9 | Samsung Internet Android Full support 1.5 |
selector() | Chrome Full support 83 | Edge Full support 83 | Firefox
Full support
69
| IE No support No | Opera Full support 69 | Safari
No support
No
| WebView Android Full support 83 | Chrome Android Full support 83 | Firefox Android
Full support
64
| Opera Android
No support
No
| Safari iOS
No support
No
| Samsung Internet Android
No support
No
|
Legend
- Full support
- Full support
- No support
- No support
- See implementation notes.
- See implementation notes.
- User must explicitly enable this feature.
- User must explicitly enable this feature.