css / latest / css_conditional_rules.html /

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
CSS Conditional Rules Module Level 3

Browser compatibility

Desktop Mobile
Chrome Edge Firefox Internet Explorer Opera Safari WebView Android Chrome Android Firefox for Android Opera Android Safari on IOS Samsung Internet
CSS_Conditional_Rules
28
12
22
No
12.1
9
≤37
28
22
12.1
9
1.5
selector
83
83
69
64-69
No
69
14.1
83
83
79
No
See bug 979041.
14.5
13.0
Desktop Mobile
Chrome Edge Firefox Internet Explorer Opera Safari WebView Android Chrome Android Firefox for Android Opera Android Safari on IOS Samsung Internet
CSS_Conditional_Rules
1
12
1
6
9.2
3
1
18
4
10.1
1
1.0
any-hover
41
16
64
No
28
9
41
41
64
28
9
5.0
any-pointer
41
12
64
No
28
9
41
41
64
28
9
4.0
aspect-ratio
3
12
3.5
9
10
5
≤37
18
4
10.1
4.2
1.0
calc
66
79
59
No
53
12
66
66
59
47
12
9.0
color
1
12
2
9
10
3
≤37
18
4
10.1
1
1.0
color-gamut
58
79
No
No
45
10
58
58
No
43
10
7.0
color-index
29
79
No
No
16
8
≤37
29
No
16
8
2.0
device-aspect-ratio
1
12
2
9
10
3
≤37
18
4
10.1
1
1.0
device-height
1
12
2
9
10
3
≤37
18
4
10.1
1
1.0
device-width
1
12
2
9
10
3
≤37
18
4
10.1
1
1.0
display-mode
45
79
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
45
45
47
Firefox 47 and later support display-mode values fullscreen and browser. Firefox 57 added support for minimal-ui and standalone values.
32
12.2
5.0
forced-colors
89
79
See bug 970285.
79
89
81
No
No
No
No
See bug 970285.
No
See bug 970285.
89
No
No
No
See bug 970285.
grid
1
12
2
10
10
3
≤37
18
4
10.1
1
1.0
height
1
12
2
9
10
3
≤37
18
4
10.1
1
1.0
hover
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
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
No
No
No
No
No
9.1
No
No
No
No
10
No
media_features
1
12
1
9
9.2
3
1
18
4
10.1
1
1.0
media_query_values
66
79
59
No
53
No
66
66
59
47
No
9.0
monochrome
1
79
2
No
10
3
≤37
18
4
10.1
1
1.0
nested-queries
26
12
11
No
12.1
7
≤37
26
14
12.1
7
1.5
orientation
3
12
2
9
10.6
5
≤37
18
4
11
4.2
1.0
overflow-block
No
No
66
No
No
No
No
No
66
No
No
No
overflow-inline
No
No
66
No
No
No
No
No
66
No
No
No
pointer
41
12
64
No
28
9
41
50
64
28
9
5.0
prefers-color-scheme
76
79
67
No
62
12.1
76
76
67
54
13
14.2
prefers-contrast
96
96
80
No
82
14.1
96
96
No
No
14.5
17.0
prefers-reduced-data
85
85
No
No
No
No
No
85
No
No
No
No
prefers-reduced-motion
74
79
63
No
62
10.1
74
74
64
53
10.3
11.0
range_syntax
No
No
63
No
No
No
No
No
63
No
No
No
resolution
29
12
8
3.5
Supports <integer> values only.
9
16
10-15
No
See bug 78087.
≤37
29
8
4
Supports <integer> values only.
16
10.1-14
No
See bug 78087.
2.0
scripting
No
See bug 489957.
No
See bug 489957.
No
No
No
No
No
See bug 489957.
No
See bug 489957.
No
No
No
No
See bug 489957.
width
1
12
2
9
10
3
≤37
18
4
10.1
1
1.0
-moz-device-pixel-ratio
No
No
4
No
No
No
No
No
4
No
No
No
-webkit-animation
2-36
No
No
No
15-23
4
2-37
18-36
No
14-24
3.2
1.0-3.0
-webkit-device-pixel-ratio
1
12
63
Implemented as an alias for for -moz-device-pixel-ratio.
No
15
3
≤37
18
63
Implemented as an alias for for -moz-device-pixel-ratio.
14
1
1.0
-webkit-max-device-pixel-ratio
1
12
63
Implemented as an alias for for max--moz-device-pixel-ratio.
No
15
3
≤37
18
63
Implemented as an alias for for max--moz-device-pixel-ratio.
14
1
1.0
-webkit-min-device-pixel-ratio
1
12
63
Implemented as an alias for for min--moz-device-pixel-ratio.
No
15
3
≤37
18
63
Implemented as an alias for for min--moz-device-pixel-ratio.
14
1
1.0
-webkit-transform-2d
2-36
No
No
No
15-23
4
2-37
18-36
No
14-24
3.2
1.0-3.0
-webkit-transform-3d
2-36
12-79
49
No
15-23
4
2-37
18-36
49
14-24
3.2
1.0-3.0
-webkit-transition
2-36
No
No
No
15-23
4
2-37
18-36
No
14-24
3.2
1.0-3.0
Desktop Mobile
Chrome Edge Firefox Internet Explorer Opera Safari WebView Android Chrome Android Firefox for Android Opera Android Safari on IOS Samsung Internet
CSS_Conditional_Rules
1
12
1
5.5
3.5
1
≤37
18
4
10.1
1
1.0
Desktop Mobile
Chrome Edge Firefox Internet Explorer Opera Safari WebView Android Chrome Android Firefox for Android Opera Android Safari on IOS Samsung Internet
CSS_Conditional_Rules
No
No
61
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.
1.5-61
No
No
No
No
No
61
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.
4-61
No
No
No
regexp
No
No
6
No
No
No
No
No
6
No
No
No

@document rule

BCD tables only load in the browser

@import rule

BCD tables only load in the browser

@media rule

BCD tables only load in the browser

@supports rule

BCD tables only load in the browser

© 2005–2021 MDN 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

Name CSS
Version
Badge
Last Updated 2022-04-27T17:24:15Z