Add Media queries

features/color-gamut.yml

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

features/color-gamut.yml.dist

@@ -0,0 +1,16 @@
+# Generated from: color-gamut.yml
+# Do not edit this file by hand. Edit the source file instead!
+
+status:
+  baseline: low
+  baseline_low_date: 2023-02-14
+  support:
+    chrome: "58"
+    chrome_android: "58"
+    edge: "79"
+    firefox: "110"
+    firefox_android: "110"
+    safari: "10"
+    safari_ios: "10"
+compat_features:
+  - css.at-rules.media.color-gamut

features/display-mode.yml

@@ -0,0 +1,7 @@
+name: display-mode media query
+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.
+spec: https://drafts.csswg.org/mediaqueries-5/#display-modes
+group: media-queries
+compat_features:
+  - css.at-rules.media.display-mode
+  - css.at-rules.media.display-mode.picture-in-picture

features/display-mode.yml.dist

@@ -0,0 +1,25 @@
+# Generated from: display-mode.yml
+# Do not edit this file by hand. Edit the source file instead!
+
+status:
+  baseline: false
+  support:
+    chrome: "123"
+    edge: "123"
+compat_features:
+  # baseline: false
+  # support:
+  #   chrome: "42"
+  #   chrome_android: "42"
+  #   edge: "79"
+  #   firefox: "47"
+  #   safari: "13"
+  #   safari_ios: "12.2"
+  - css.at-rules.media.display-mode
+
+  # ⬇️ Same status as overall feature ⬇️
+  # baseline: false
+  # support:
+  #   chrome: "123"
+  #   edge: "123"
+  - css.at-rules.media.display-mode.picture-in-picture

features/dynamic-range.yml

@@ -0,0 +1,6 @@
+name: dynamic-range media query
+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.
+spec: https://drafts.csswg.org/mediaqueries-5/#dynamic-range
+group: media-queries
+compat_features:
+  - css.at-rules.media.dynamic-range

features/dynamic-range.yml.dist

@@ -0,0 +1,16 @@
+# Generated from: dynamic-range.yml
+# Do not edit this file by hand. Edit the source file instead!
+
+status:
+  baseline: low
+  baseline_low_date: 2022-05-03
+  support:
+    chrome: "98"
+    chrome_android: "98"
+    edge: "98"
+    firefox: "100"
+    firefox_android: "100"
+    safari: "13.1"
+    safari_ios: "13.4"
+compat_features:
+  - css.at-rules.media.dynamic-range

features/interaction.yml

@@ -0,0 +1,12 @@
+name: Interaction media queries
+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."
+spec: https://drafts.csswg.org/mediaqueries-5/#mf-interaction
+caniuse: css-media-interaction
+group: media-queries
+status:
+  compute_from: css.at-rules.media.any-pointer
+compat_features:
+  - css.at-rules.media.hover
+  - css.at-rules.media.any-hover
+  - css.at-rules.media.any-pointer
+  - css.at-rules.media.pointer

features/interaction.yml.dist

@@ -0,0 +1,68 @@
+# Generated from: interaction.yml
+# Do not edit this file by hand. Edit the source file instead!
+
+status:
+  baseline: high
+  baseline_low_date: 2018-12-11
+  baseline_high_date: 2021-06-11
+  support:
+    chrome: "41"
+    chrome_android: "41"
+    edge: "12"
+    firefox: "64"
+    firefox_android: "64"
+    safari: "9"
+    safari_ios: "9"
+compat_features:
+  # baseline: high
+  # baseline_low_date: 2018-12-11
+  # baseline_high_date: 2021-06-11
+  # support:
+  #   chrome: "38"
+  #   chrome_android: "50"
+  #   edge: "12"
+  #   firefox: "64"
+  #   firefox_android: "64"
+  #   safari: "9"
+  #   safari_ios: "9"
+  - css.at-rules.media.hover
+
+  # ⬇️ Same status as overall feature ⬇️
+  # baseline: high
+  # baseline_low_date: 2018-12-11
+  # baseline_high_date: 2021-06-11
+  # support:
+  #   chrome: "41"
+  #   chrome_android: "41"
+  #   edge: "12"
+  #   firefox: "64"
+  #   firefox_android: "64"
+  #   safari: "9"
+  #   safari_ios: "9"
+  - css.at-rules.media.any-pointer
+
+  # baseline: high
+  # baseline_low_date: 2018-12-11
+  # baseline_high_date: 2021-06-11
+  # support:
+  #   chrome: "41"
+  #   chrome_android: "41"
+  #   edge: "16"
+  #   firefox: "64"
+  #   firefox_android: "64"
+  #   safari: "9"
+  #   safari_ios: "9"
+  - css.at-rules.media.any-hover
+
+  # baseline: high
+  # baseline_low_date: 2018-12-11
+  # baseline_high_date: 2021-06-11
+  # support:
+  #   chrome: "41"
+  #   chrome_android: "50"
+  #   edge: "12"
+  #   firefox: "64"
+  #   firefox_android: "64"
+  #   safari: "9"
+  #   safari_ios: "9"
+  - css.at-rules.media.pointer

features/inverted-colors.yml

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

features/inverted-colors.yml.dist

@@ -0,0 +1,10 @@
+# Generated from: inverted-colors.yml
+# Do not edit this file by hand. Edit the source file instead!
+
+status:
+  baseline: false
+  support:
+    safari: "9.1"
+    safari_ios: "10"
+compat_features:
+  - css.at-rules.media.inverted-colors

features/media-queries.yml

@@ -0,0 +1,23 @@
+name: Media queries
+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`.
+spec: https://drafts.csswg.org/mediaqueries-5/
+caniuse: css-mediaqueries
+group: media-queries
+status:
+  compute_from: css.at-rules.media
+compat_features:
+  - css.at-rules.media
+  - css.at-rules.media.color
+  - css.at-rules.media.grid
+  - css.at-rules.media.height
+  - css.at-rules.media.width
+  - css.at-rules.media.monochrome
+  - css.at-rules.media.orientation
+  - css.at-rules.media.aspect-ratio
+  - css.types.ratio
+  - css.at-rules.media.color-index
+  - css.at-rules.media.calc
+  - css.at-rules.media.media_features
+  - css.at-rules.media.media_query_values
+  - css.at-rules.media.nested-queries
+  - css.at-rules.media.or_syntax

features/media-queries.yml.dist

@@ -0,0 +1,142 @@
+# Generated from: media-queries.yml
+# Do not edit this file by hand. Edit the source file instead!
+
+status:
+  baseline: high
+  baseline_low_date: 2015-07-29
+  baseline_high_date: 2018-01-29
+  support:
+    chrome: "1"
+    chrome_android: "18"
+    edge: "12"
+    firefox: "1"
+    firefox_android: "4"
+    safari: "3"
+    safari_ios: "1"
+compat_features:
+  # ⬇️ Same status as overall feature ⬇️
+  # baseline: high
+  # baseline_low_date: 2015-07-29
+  # baseline_high_date: 2018-01-29
+  # support:
+  #   chrome: "1"
+  #   chrome_android: "18"
+  #   edge: "12"
+  #   firefox: "1"
+  #   firefox_android: "4"
+  #   safari: "3"
+  #   safari_ios: "1"
+  - css.at-rules.media
+  - css.at-rules.media.media_features
+
+  # baseline: high
+  # baseline_low_date: 2015-07-29
+  # baseline_high_date: 2018-01-29
+  # support:
+  #   chrome: "1"
+  #   chrome_android: "18"
+  #   edge: "12"
+  #   firefox: "2"
+  #   firefox_android: "4"
+  #   safari: "3"
+  #   safari_ios: "1"
+  - css.at-rules.media.color
+  - css.at-rules.media.grid
+  - css.at-rules.media.height
+  - css.at-rules.media.width
+
+  # baseline: high
+  # baseline_low_date: 2015-07-29
+  # baseline_high_date: 2018-01-29
+  # support:
+  #   chrome: "3"
+  #   chrome_android: "18"
+  #   edge: "12"
+  #   firefox: "2"
+  #   firefox_android: "4"
+  #   safari: "5"
+  #   safari_ios: "4.2"
+  - css.at-rules.media.orientation
+
+  # baseline: high
+  # baseline_low_date: 2015-07-29
+  # baseline_high_date: 2018-01-29
+  # support:
+  #   chrome: "3"
+  #   chrome_android: "18"
+  #   edge: "12"
+  #   firefox: "3.5"
+  #   firefox_android: "4"
+  #   safari: "5"
+  #   safari_ios: "4.2"
+  - css.at-rules.media.aspect-ratio
+  - css.types.ratio
+
+  # baseline: high
+  # baseline_low_date: 2015-07-29
+  # baseline_high_date: 2018-01-29
+  # support:
+  #   chrome: "26"
+  #   chrome_android: "26"
+  #   edge: "12"
+  #   firefox: "11"
+  #   firefox_android: "14"
+  #   safari: "7"
+  #   safari_ios: "7"
+  - css.at-rules.media.nested-queries
+
+  # baseline: high
+  # baseline_low_date: 2020-01-15
+  # baseline_high_date: 2022-07-15
+  # support:
+  #   chrome: "1"
+  #   chrome_android: "18"
+  #   edge: "79"
+  #   firefox: "2"
+  #   firefox_android: "4"
+  #   safari: "3"
+  #   safari_ios: "1"
+  - css.at-rules.media.monochrome
+
+  # baseline: high
+  # baseline_low_date: 2020-01-15
+  # baseline_high_date: 2022-07-15
+  # support:
+  #   chrome: "66"
+  #   chrome_android: "66"
+  #   edge: "79"
+  #   firefox: "59"
+  #   firefox_android: "59"
+  #   safari: "12"
+  #   safari_ios: "12"
+  - css.at-rules.media.calc
+
+  # baseline: low
+  # baseline_low_date: 2023-03-27
+  # support:
+  #   chrome: "104"
+  #   chrome_android: "104"
+  #   edge: "104"
+  #   firefox: "64"
+  #   firefox_android: "64"
+  #   safari: "16.4"
+  #   safari_ios: "16.4"
+  - css.at-rules.media.or_syntax
+
+  # baseline: false
+  # support:
+  #   chrome: "29"
+  #   chrome_android: "29"
+  #   edge: "79"
+  #   safari: "8"
+  #   safari_ios: "8"
+  - css.at-rules.media.color-index
+
+  # baseline: false
+  # support:
+  #   chrome: "66"
+  #   chrome_android: "66"
+  #   edge: "79"
+  #   firefox: "59"
+  #   firefox_android: "59"
+  - css.at-rules.media.media_query_values

features/media-query-range-syntax.yml

@@ -1,4 +1,5 @@
 name: Media query range syntax
-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."
+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."
 caniuse: css-media-range-syntax
+group: media-queries
 spec: https://drafts.csswg.org/mediaqueries-4/#mq-range-context

features/overflow.yml

@@ -0,0 +1,9 @@
+name: Overflow media queries
+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.
+spec:
+  - https://drafts.csswg.org/mediaqueries-5/#mf-overflow-block
+  - https://drafts.csswg.org/mediaqueries-5/#mf-overflow-inline
+group: media-queries
+compat_features:
+  - css.at-rules.media.overflow-block
+  - css.at-rules.media.overflow-inline

features/overflow.yml.dist

@@ -0,0 +1,17 @@
+# Generated from: overflow.yml
+# Do not edit this file by hand. Edit the source file instead!
+
+status:
+  baseline: low
+  baseline_low_date: 2023-09-18
+  support:
+    chrome: "113"
+    chrome_android: "113"
+    edge: "113"
+    firefox: "66"
+    firefox_android: "66"
+    safari: "17"
+    safari_ios: "17"
+compat_features:
+  - css.at-rules.media.overflow-block
+  - css.at-rules.media.overflow-inline

features/prefers-color-scheme.yml

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