Skip to content

Commit 57565b9

Browse files
jamesnwjamesnw
authored
Add media queries (#1673)
1 parent a1c1086 commit 57565b9

32 files changed

+582
-4
lines changed

‎features/color-gamut.yml

+6
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
name: color-gamut media query
2+
description: The `color-gamut` media query sets styles based on the colors a device can display.
3+
spec: https://drafts.csswg.org/mediaqueries-5/#color-gamut
4+
group: media-queries
5+
compat_features:
6+
- css.at-rules.media.color-gamut

‎features/color-gamut.yml.dist

+16
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
# Generated from: color-gamut.yml
2+
# Do not edit this file by hand. Edit the source file instead!
3+
4+
status:
5+
baseline: low
6+
baseline_low_date: 2023-02-14
7+
support:
8+
chrome: "58"
9+
chrome_android: "58"
10+
edge: "79"
11+
firefox: "110"
12+
firefox_android: "110"
13+
safari: "10"
14+
safari_ios: "10"
15+
compat_features:
16+
- css.at-rules.media.color-gamut

‎features/display-mode.yml

+7
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
name: display-mode media query
2+
description: The `display-mode` CSS media query sets styles based on whether the web page is in `fullscreen`, `standalone`, `minimal-ui,` `browser`, or `picture-in-picture` mode.
3+
spec: https://drafts.csswg.org/mediaqueries-5/#display-modes
4+
group: media-queries
5+
compat_features:
6+
- css.at-rules.media.display-mode
7+
- css.at-rules.media.display-mode.picture-in-picture

‎features/display-mode.yml.dist

+25
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
# Generated from: display-mode.yml
2+
# Do not edit this file by hand. Edit the source file instead!
3+
4+
status:
5+
baseline: false
6+
support:
7+
chrome: "123"
8+
edge: "123"
9+
compat_features:
10+
# baseline: false
11+
# support:
12+
# chrome: "42"
13+
# chrome_android: "42"
14+
# edge: "79"
15+
# firefox: "47"
16+
# safari: "13"
17+
# safari_ios: "12.2"
18+
- css.at-rules.media.display-mode
19+
20+
# ⬇️ Same status as overall feature ⬇️
21+
# baseline: false
22+
# support:
23+
# chrome: "123"
24+
# edge: "123"
25+
- css.at-rules.media.display-mode.picture-in-picture

‎features/dynamic-range.yml

+6
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
name: dynamic-range media query
2+
description: The `dynamic-range` CSS media query sets styles based on whether a device can display at least `standard` range colors or at least `high` range colors. Non-visual devices will match neither.
3+
spec: https://drafts.csswg.org/mediaqueries-5/#dynamic-range
4+
group: media-queries
5+
compat_features:
6+
- css.at-rules.media.dynamic-range

‎features/dynamic-range.yml.dist

+16
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
# Generated from: dynamic-range.yml
2+
# Do not edit this file by hand. Edit the source file instead!
3+
4+
status:
5+
baseline: low
6+
baseline_low_date: 2022-05-03
7+
support:
8+
chrome: "98"
9+
chrome_android: "98"
10+
edge: "98"
11+
firefox: "100"
12+
firefox_android: "100"
13+
safari: "13.1"
14+
safari_ios: "13.4"
15+
compat_features:
16+
- css.at-rules.media.dynamic-range

‎features/interaction.yml

+12
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
name: Interaction media queries
2+
description: "The `pointer`, `any-pointer`, `hover`, and `any-hover` CSS media queries set styles based on the presence of pointing devices and their ability to hover over elements. For example, most smartphones match the `(hover: none) and (pointer: coarse)` media query."
3+
spec: https://drafts.csswg.org/mediaqueries-5/#mf-interaction
4+
caniuse: css-media-interaction
5+
group: media-queries
6+
status:
7+
compute_from: css.at-rules.media.any-pointer
8+
compat_features:
9+
- css.at-rules.media.hover
10+
- css.at-rules.media.any-hover
11+
- css.at-rules.media.any-pointer
12+
- css.at-rules.media.pointer

‎features/interaction.yml.dist

+68
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,68 @@
1+
# Generated from: interaction.yml
2+
# Do not edit this file by hand. Edit the source file instead!
3+
4+
status:
5+
baseline: high
6+
baseline_low_date: 2018-12-11
7+
baseline_high_date: 2021-06-11
8+
support:
9+
chrome: "41"
10+
chrome_android: "41"
11+
edge: "12"
12+
firefox: "64"
13+
firefox_android: "64"
14+
safari: "9"
15+
safari_ios: "9"
16+
compat_features:
17+
# baseline: high
18+
# baseline_low_date: 2018-12-11
19+
# baseline_high_date: 2021-06-11
20+
# support:
21+
# chrome: "38"
22+
# chrome_android: "50"
23+
# edge: "12"
24+
# firefox: "64"
25+
# firefox_android: "64"
26+
# safari: "9"
27+
# safari_ios: "9"
28+
- css.at-rules.media.hover
29+
30+
# ⬇️ Same status as overall feature ⬇️
31+
# baseline: high
32+
# baseline_low_date: 2018-12-11
33+
# baseline_high_date: 2021-06-11
34+
# support:
35+
# chrome: "41"
36+
# chrome_android: "41"
37+
# edge: "12"
38+
# firefox: "64"
39+
# firefox_android: "64"
40+
# safari: "9"
41+
# safari_ios: "9"
42+
- css.at-rules.media.any-pointer
43+
44+
# baseline: high
45+
# baseline_low_date: 2018-12-11
46+
# baseline_high_date: 2021-06-11
47+
# support:
48+
# chrome: "41"
49+
# chrome_android: "41"
50+
# edge: "16"
51+
# firefox: "64"
52+
# firefox_android: "64"
53+
# safari: "9"
54+
# safari_ios: "9"
55+
- css.at-rules.media.any-hover
56+
57+
# baseline: high
58+
# baseline_low_date: 2018-12-11
59+
# baseline_high_date: 2021-06-11
60+
# support:
61+
# chrome: "41"
62+
# chrome_android: "50"
63+
# edge: "12"
64+
# firefox: "64"
65+
# firefox_android: "64"
66+
# safari: "9"
67+
# safari_ios: "9"
68+
- css.at-rules.media.pointer

‎features/inverted-colors.yml

+6
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
name: inverted-colors media query
2+
description: The `inverted-colors` CSS media query sets styles based on whether the user has inverted all colors, such as with mobile accessibility settings.
3+
spec: https://drafts.csswg.org/mediaqueries-5/#inverted
4+
group: media-queries
5+
compat_features:
6+
- css.at-rules.media.inverted-colors

‎features/inverted-colors.yml.dist

+10
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
# Generated from: inverted-colors.yml
2+
# Do not edit this file by hand. Edit the source file instead!
3+
4+
status:
5+
baseline: false
6+
support:
7+
safari: "9.1"
8+
safari_ios: "10"
9+
compat_features:
10+
- css.at-rules.media.inverted-colors

‎features/media-queries.yml

+23
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
name: Media queries
2+
description: The `@media` CSS rule conditionally applies styles based on the output device type, its capabilities, and the user's preferences. Media queries are composed of an optional media type such as `screen` or `print`, and one or more mandatory media features, such as `prefers-reduced-animations`.
3+
spec: https://drafts.csswg.org/mediaqueries-5/
4+
caniuse: css-mediaqueries
5+
group: media-queries
6+
status:
7+
compute_from: css.at-rules.media
8+
compat_features:
9+
- css.at-rules.media
10+
- css.at-rules.media.color
11+
- css.at-rules.media.grid
12+
- css.at-rules.media.height
13+
- css.at-rules.media.width
14+
- css.at-rules.media.monochrome
15+
- css.at-rules.media.orientation
16+
- css.at-rules.media.aspect-ratio
17+
- css.types.ratio
18+
- css.at-rules.media.color-index
19+
- css.at-rules.media.calc
20+
- css.at-rules.media.media_features
21+
- css.at-rules.media.media_query_values
22+
- css.at-rules.media.nested-queries
23+
- css.at-rules.media.or_syntax

‎features/media-queries.yml.dist

+142
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,142 @@
1+
# Generated from: media-queries.yml
2+
# Do not edit this file by hand. Edit the source file instead!
3+
4+
status:
5+
baseline: high
6+
baseline_low_date: 2015-07-29
7+
baseline_high_date: 2018-01-29
8+
support:
9+
chrome: "1"
10+
chrome_android: "18"
11+
edge: "12"
12+
firefox: "1"
13+
firefox_android: "4"
14+
safari: "3"
15+
safari_ios: "1"
16+
compat_features:
17+
# ⬇️ Same status as overall feature ⬇️
18+
# baseline: high
19+
# baseline_low_date: 2015-07-29
20+
# baseline_high_date: 2018-01-29
21+
# support:
22+
# chrome: "1"
23+
# chrome_android: "18"
24+
# edge: "12"
25+
# firefox: "1"
26+
# firefox_android: "4"
27+
# safari: "3"
28+
# safari_ios: "1"
29+
- css.at-rules.media
30+
- css.at-rules.media.media_features
31+
32+
# baseline: high
33+
# baseline_low_date: 2015-07-29
34+
# baseline_high_date: 2018-01-29
35+
# support:
36+
# chrome: "1"
37+
# chrome_android: "18"
38+
# edge: "12"
39+
# firefox: "2"
40+
# firefox_android: "4"
41+
# safari: "3"
42+
# safari_ios: "1"
43+
- css.at-rules.media.color
44+
- css.at-rules.media.grid
45+
- css.at-rules.media.height
46+
- css.at-rules.media.width
47+
48+
# baseline: high
49+
# baseline_low_date: 2015-07-29
50+
# baseline_high_date: 2018-01-29
51+
# support:
52+
# chrome: "3"
53+
# chrome_android: "18"
54+
# edge: "12"
55+
# firefox: "2"
56+
# firefox_android: "4"
57+
# safari: "5"
58+
# safari_ios: "4.2"
59+
- css.at-rules.media.orientation
60+
61+
# baseline: high
62+
# baseline_low_date: 2015-07-29
63+
# baseline_high_date: 2018-01-29
64+
# support:
65+
# chrome: "3"
66+
# chrome_android: "18"
67+
# edge: "12"
68+
# firefox: "3.5"
69+
# firefox_android: "4"
70+
# safari: "5"
71+
# safari_ios: "4.2"
72+
- css.at-rules.media.aspect-ratio
73+
- css.types.ratio
74+
75+
# baseline: high
76+
# baseline_low_date: 2015-07-29
77+
# baseline_high_date: 2018-01-29
78+
# support:
79+
# chrome: "26"
80+
# chrome_android: "26"
81+
# edge: "12"
82+
# firefox: "11"
83+
# firefox_android: "14"
84+
# safari: "7"
85+
# safari_ios: "7"
86+
- css.at-rules.media.nested-queries
87+
88+
# baseline: high
89+
# baseline_low_date: 2020-01-15
90+
# baseline_high_date: 2022-07-15
91+
# support:
92+
# chrome: "1"
93+
# chrome_android: "18"
94+
# edge: "79"
95+
# firefox: "2"
96+
# firefox_android: "4"
97+
# safari: "3"
98+
# safari_ios: "1"
99+
- css.at-rules.media.monochrome
100+
101+
# baseline: high
102+
# baseline_low_date: 2020-01-15
103+
# baseline_high_date: 2022-07-15
104+
# support:
105+
# chrome: "66"
106+
# chrome_android: "66"
107+
# edge: "79"
108+
# firefox: "59"
109+
# firefox_android: "59"
110+
# safari: "12"
111+
# safari_ios: "12"
112+
- css.at-rules.media.calc
113+
114+
# baseline: low
115+
# baseline_low_date: 2023-03-27
116+
# support:
117+
# chrome: "104"
118+
# chrome_android: "104"
119+
# edge: "104"
120+
# firefox: "64"
121+
# firefox_android: "64"
122+
# safari: "16.4"
123+
# safari_ios: "16.4"
124+
- css.at-rules.media.or_syntax
125+
126+
# baseline: false
127+
# support:
128+
# chrome: "29"
129+
# chrome_android: "29"
130+
# edge: "79"
131+
# safari: "8"
132+
# safari_ios: "8"
133+
- css.at-rules.media.color-index
134+
135+
# baseline: false
136+
# support:
137+
# chrome: "66"
138+
# chrome_android: "66"
139+
# edge: "79"
140+
# firefox: "59"
141+
# firefox_android: "59"
142+
- css.at-rules.media.media_query_values

‎features/media-query-range-syntax.yml

+2-1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
name: Media query range syntax
2-
description: "The range syntax of CSS media queries allows you to use mathematical comparison operators such as `<`, `>`, `<=`, and `>=` to define a range of values for a media feature. For example, `(400px < width < 1000px)` returns true if the viewport width is between 400px and 1000px."
2+
description: "The range syntax of CSS media queries allows you to use mathematical comparison operators such as `<`, `>`, `<=`, and `>=` to define a range of values for a media query. For example, `(400px < width < 1000px)` returns true if the viewport width is between 400px and 1000px."
33
caniuse: css-media-range-syntax
4+
group: media-queries
45
spec: https://drafts.csswg.org/mediaqueries-4/#mq-range-context

‎features/overflow.yml

+9
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
name: Overflow media queries
2+
description: The `overflow-block` and `overflow-inline` CSS media queries set styles based on the way a device displays content that's larger than the viewport or page area. For example, a laptop lets users scroll to reveal content, while a printer displays overflowing content on additional pages.
3+
spec:
4+
- https://drafts.csswg.org/mediaqueries-5/#mf-overflow-block
5+
- https://drafts.csswg.org/mediaqueries-5/#mf-overflow-inline
6+
group: media-queries
7+
compat_features:
8+
- css.at-rules.media.overflow-block
9+
- css.at-rules.media.overflow-inline

‎features/overflow.yml.dist

+17
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
# Generated from: overflow.yml
2+
# Do not edit this file by hand. Edit the source file instead!
3+
4+
status:
5+
baseline: low
6+
baseline_low_date: 2023-09-18
7+
support:
8+
chrome: "113"
9+
chrome_android: "113"
10+
edge: "113"
11+
firefox: "66"
12+
firefox_android: "66"
13+
safari: "17"
14+
safari_ios: "17"
15+
compat_features:
16+
- css.at-rules.media.overflow-block
17+
- css.at-rules.media.overflow-inline

‎features/prefers-color-scheme.yml

+10-3
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,11 @@
1-
name: prefers-color-scheme
2-
description: The `prefers-color-scheme` CSS media query detects the requested color scheme, light or dark.
1+
name: prefers-color-scheme media query
2+
description: The `prefers-color-scheme` CSS media query sets styles based on the requested color scheme, light or dark.
33
spec: https://drafts.csswg.org/mediaqueries-5/#prefers-color-scheme
4-
group: css
4+
group: media-queries
5+
status:
6+
compute_from: css.at-rules.media.prefers-color-scheme
7+
compat_features:
8+
- css.at-rules.media.prefers-color-scheme
9+
- css.at-rules.media.prefers-color-scheme.respects-inherited-scheme
10+
- css.at-rules.media.prefers-color-scheme.no-preference
11+
- http.headers.Sec-CH-Prefers-Color-Scheme

0 commit comments

Comments
 (0)