From f6e27850e011fc81fb505ac3e10bdcb12019e8ec Mon Sep 17 00:00:00 2001 From: James Stuckey Weber Date: Fri, 23 Aug 2024 16:54:48 -0400 Subject: [PATCH 01/18] Add prefers- media queries --- features/prefers-color-scheme.yml | 6 ++++ features/prefers-color-scheme.yml.dist | 25 +++++++++++++ features/prefers-contrast.yml | 5 +++ features/prefers-contrast.yml.dist | 16 +++++++++ features/prefers-reduced-data.yml | 5 +++ features/prefers-reduced-data.yml.dist | 8 +++++ features/prefers-reduced-motion.yml | 9 +++++ features/prefers-reduced-motion.yml.dist | 36 +++++++++++++++++++ features/prefers-reduced-transparency.yml | 8 +++++ .../prefers-reduced-transparency.yml.dist | 24 +++++++++++++ 10 files changed, 142 insertions(+) create mode 100644 features/prefers-contrast.yml create mode 100644 features/prefers-contrast.yml.dist create mode 100644 features/prefers-reduced-data.yml create mode 100644 features/prefers-reduced-data.yml.dist create mode 100644 features/prefers-reduced-motion.yml create mode 100644 features/prefers-reduced-motion.yml.dist create mode 100644 features/prefers-reduced-transparency.yml create mode 100644 features/prefers-reduced-transparency.yml.dist diff --git a/features/prefers-color-scheme.yml b/features/prefers-color-scheme.yml index f8313b80b79..9ce6458ab4e 100644 --- a/features/prefers-color-scheme.yml +++ b/features/prefers-color-scheme.yml @@ -1,3 +1,9 @@ name: prefers-color-scheme description: The `prefers-color-scheme` CSS media query detects the requested color scheme, light or dark. spec: https://drafts.csswg.org/mediaqueries-5/#prefers-color-scheme +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 + - http.headers.Sec-CH-Prefers-Color-Scheme diff --git a/features/prefers-color-scheme.yml.dist b/features/prefers-color-scheme.yml.dist index d3c74872cb5..a30b41e3ab1 100644 --- a/features/prefers-color-scheme.yml.dist +++ b/features/prefers-color-scheme.yml.dist @@ -14,4 +14,29 @@ status: safari: "12.1" safari_ios: "13" compat_features: + # ⬇️ Same status as overall feature ⬇️ + # baseline: high + # baseline_low_date: 2020-01-15 + # baseline_high_date: 2022-07-15 + # support: + # chrome: "76" + # chrome_android: "76" + # edge: "79" + # firefox: "67" + # firefox_android: "67" + # safari: "12.1" + # safari_ios: "13" - css.at-rules.media.prefers-color-scheme + + # baseline: false + # support: + # chrome: "93" + # chrome_android: "93" + # edge: "93" + - http.headers.Sec-CH-Prefers-Color-Scheme + + # baseline: false + # support: + # firefox: "105" + # firefox_android: "105" + - css.at-rules.media.prefers-color-scheme.respects-inherited-scheme diff --git a/features/prefers-contrast.yml b/features/prefers-contrast.yml new file mode 100644 index 00000000000..b2902f3c25e --- /dev/null +++ b/features/prefers-contrast.yml @@ -0,0 +1,5 @@ +name: prefers-contrast +description: The `prefers-contrast` CSS media query detects the requested contrast, more or less. +spec: https://drafts.csswg.org/mediaqueries-5/#prefers-contrast +compat_features: + - css.at-rules.media.prefers-contrast diff --git a/features/prefers-contrast.yml.dist b/features/prefers-contrast.yml.dist new file mode 100644 index 00000000000..ef726ef6ddb --- /dev/null +++ b/features/prefers-contrast.yml.dist @@ -0,0 +1,16 @@ +# Generated from: prefers-contrast.yml +# Do not edit this file by hand. Edit the source file instead! + +status: + baseline: low + baseline_low_date: 2022-05-31 + support: + chrome: "96" + chrome_android: "96" + edge: "96" + firefox: "101" + firefox_android: "101" + safari: "14.1" + safari_ios: "14.5" +compat_features: + - css.at-rules.media.prefers-contrast diff --git a/features/prefers-reduced-data.yml b/features/prefers-reduced-data.yml new file mode 100644 index 00000000000..98c17127bbf --- /dev/null +++ b/features/prefers-reduced-data.yml @@ -0,0 +1,5 @@ +name: prefers-reduced-data +description: The `prefers-reduced-data` CSS media query detects whether the user has a preference for using less internet traffic. +spec: https://drafts.csswg.org/mediaqueries-5/#prefers-reduced-data +compat_features: + - css.at-rules.media.prefers-reduced-data diff --git a/features/prefers-reduced-data.yml.dist b/features/prefers-reduced-data.yml.dist new file mode 100644 index 00000000000..41f305e55da --- /dev/null +++ b/features/prefers-reduced-data.yml.dist @@ -0,0 +1,8 @@ +# Generated from: prefers-reduced-data.yml +# Do not edit this file by hand. Edit the source file instead! + +status: + baseline: false + support: {} +compat_features: + - css.at-rules.media.prefers-reduced-data diff --git a/features/prefers-reduced-motion.yml b/features/prefers-reduced-motion.yml new file mode 100644 index 00000000000..fa4a9702c57 --- /dev/null +++ b/features/prefers-reduced-motion.yml @@ -0,0 +1,9 @@ +name: prefers-reduced-motion +description: The `prefers-reduced-motion` CSS media query detects whether the user requested less non-essential animation. +spec: https://drafts.csswg.org/mediaqueries-5/#prefers-reduced-motion +caniuse: prefers-reduced-motion +status: + compute_from: css.at-rules.media.prefers-reduced-motion +compat_features: + - css.at-rules.media.prefers-reduced-motion + - http.headers.Sec-CH-Prefers-Reduced-Motion diff --git a/features/prefers-reduced-motion.yml.dist b/features/prefers-reduced-motion.yml.dist new file mode 100644 index 00000000000..f6543eab73b --- /dev/null +++ b/features/prefers-reduced-motion.yml.dist @@ -0,0 +1,36 @@ +# Generated from: prefers-reduced-motion.yml +# Do not edit this file by hand. Edit the source file instead! + +status: + baseline: high + baseline_low_date: 2020-01-15 + baseline_high_date: 2022-07-15 + support: + chrome: "74" + chrome_android: "74" + edge: "79" + firefox: "63" + firefox_android: "64" + safari: "10.1" + safari_ios: "10.3" +compat_features: + # ⬇️ Same status as overall feature ⬇️ + # baseline: high + # baseline_low_date: 2020-01-15 + # baseline_high_date: 2022-07-15 + # support: + # chrome: "74" + # chrome_android: "74" + # edge: "79" + # firefox: "63" + # firefox_android: "64" + # safari: "10.1" + # safari_ios: "10.3" + - css.at-rules.media.prefers-reduced-motion + + # baseline: false + # support: + # chrome: "108" + # chrome_android: "108" + # edge: "108" + - http.headers.Sec-CH-Prefers-Reduced-Motion diff --git a/features/prefers-reduced-transparency.yml b/features/prefers-reduced-transparency.yml new file mode 100644 index 00000000000..98eeb81a1f3 --- /dev/null +++ b/features/prefers-reduced-transparency.yml @@ -0,0 +1,8 @@ +name: prefers-reduced-transparency +description: The `prefers-reduced-transparency` CSS media query detects whether the user requested less transparent effects, which can improve contrast and readability. +spec: + - https://drafts.csswg.org/mediaqueries-5/#prefers-reduced-transparency + - https://wicg.github.io/user-preference-media-features-headers/#sec-ch-prefers-reduced-transparency +compat_features: + - css.at-rules.media.prefers-reduced-transparency + - http.headers.Sec-CH-Prefers-Reduced-Transparency diff --git a/features/prefers-reduced-transparency.yml.dist b/features/prefers-reduced-transparency.yml.dist new file mode 100644 index 00000000000..991cd7b7085 --- /dev/null +++ b/features/prefers-reduced-transparency.yml.dist @@ -0,0 +1,24 @@ +# Generated from: prefers-reduced-transparency.yml +# Do not edit this file by hand. Edit the source file instead! + +status: + baseline: false + support: + chrome: "119" + chrome_android: "119" + edge: "119" +compat_features: + # baseline: false + # support: + # chrome: "118" + # chrome_android: "118" + # edge: "118" + - css.at-rules.media.prefers-reduced-transparency + + # ⬇️ Same status as overall feature ⬇️ + # baseline: false + # support: + # chrome: "119" + # chrome_android: "119" + # edge: "119" + - http.headers.Sec-CH-Prefers-Reduced-Transparency From f58d9a3c7e4b9070e210526514bcbf99035be4ae Mon Sep 17 00:00:00 2001 From: James Stuckey Weber Date: Fri, 23 Aug 2024 17:05:42 -0400 Subject: [PATCH 02/18] Update spec --- features/prefers-reduced-motion.yml | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/features/prefers-reduced-motion.yml b/features/prefers-reduced-motion.yml index fa4a9702c57..356ab56937b 100644 --- a/features/prefers-reduced-motion.yml +++ b/features/prefers-reduced-motion.yml @@ -1,6 +1,8 @@ name: prefers-reduced-motion description: The `prefers-reduced-motion` CSS media query detects whether the user requested less non-essential animation. -spec: https://drafts.csswg.org/mediaqueries-5/#prefers-reduced-motion +spec: + - https://drafts.csswg.org/mediaqueries-5/#prefers-reduced-motion + - https://wicg.github.io/user-preference-media-features-headers/#sec-ch-prefers-reduced-motion caniuse: prefers-reduced-motion status: compute_from: css.at-rules.media.prefers-reduced-motion From 872e3da104819aff863838ccef09a5885cd365d7 Mon Sep 17 00:00:00 2001 From: James Stuckey Weber Date: Mon, 26 Aug 2024 20:49:02 -0400 Subject: [PATCH 03/18] Add Interaction media queries --- features/interaction-media-queries.yml | 11 ++++ features/interaction-media-queries.yml.dist | 68 +++++++++++++++++++++ 2 files changed, 79 insertions(+) create mode 100644 features/interaction-media-queries.yml create mode 100644 features/interaction-media-queries.yml.dist diff --git a/features/interaction-media-queries.yml b/features/interaction-media-queries.yml new file mode 100644 index 00000000000..7dc27a307dc --- /dev/null +++ b/features/interaction-media-queries.yml @@ -0,0 +1,11 @@ +name: Interaction media queries +description: The interaction CSS media queries set styles based on a user's ability to hover using `hover` or `any-hover` or use a pointer using `pointer` and `any-pointer`. For example, a smartphone would match `@media (hover:none) and (pointer:coarse)`. +spec: https://drafts.csswg.org/mediaqueries-5/#mf-interaction +caniuse: css-media-interaction +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 \ No newline at end of file diff --git a/features/interaction-media-queries.yml.dist b/features/interaction-media-queries.yml.dist new file mode 100644 index 00000000000..7f67f7aacfe --- /dev/null +++ b/features/interaction-media-queries.yml.dist @@ -0,0 +1,68 @@ +# Generated from: interaction-media-queries.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 From 6a48ca7ad84cef8e60758b6ad0a31f363fba3365 Mon Sep 17 00:00:00 2001 From: James Stuckey Weber Date: Mon, 26 Aug 2024 20:55:45 -0400 Subject: [PATCH 04/18] Rename new media query features --- ...eraction-media-queries.yml => media-queries-interaction.yml} | 0 ...edia-queries.yml.dist => media-queries-interaction.yml.dist} | 2 +- ...{prefers-contrast.yml => media-queries-prefers-contrast.yml} | 0 ...ontrast.yml.dist => media-queries-prefers-contrast.yml.dist} | 2 +- ...-reduced-data.yml => media-queries-prefers-reduced-data.yml} | 0 ...ata.yml.dist => media-queries-prefers-reduced-data.yml.dist} | 2 +- ...uced-motion.yml => media-queries-prefers-reduced-motion.yml} | 0 ...n.yml.dist => media-queries-prefers-reduced-motion.yml.dist} | 2 +- ...rency.yml => media-queries-prefers-reduced-transparency.yml} | 0 ...dist => media-queries-prefers-reduced-transparency.yml.dist} | 2 +- 10 files changed, 5 insertions(+), 5 deletions(-) rename features/{interaction-media-queries.yml => media-queries-interaction.yml} (100%) rename features/{interaction-media-queries.yml.dist => media-queries-interaction.yml.dist} (96%) rename features/{prefers-contrast.yml => media-queries-prefers-contrast.yml} (100%) rename features/{prefers-contrast.yml.dist => media-queries-prefers-contrast.yml.dist} (86%) rename features/{prefers-reduced-data.yml => media-queries-prefers-reduced-data.yml} (100%) rename features/{prefers-reduced-data.yml.dist => media-queries-prefers-reduced-data.yml.dist} (74%) rename features/{prefers-reduced-motion.yml => media-queries-prefers-reduced-motion.yml} (100%) rename features/{prefers-reduced-motion.yml.dist => media-queries-prefers-reduced-motion.yml.dist} (93%) rename features/{prefers-reduced-transparency.yml => media-queries-prefers-reduced-transparency.yml} (100%) rename features/{prefers-reduced-transparency.yml.dist => media-queries-prefers-reduced-transparency.yml.dist} (89%) diff --git a/features/interaction-media-queries.yml b/features/media-queries-interaction.yml similarity index 100% rename from features/interaction-media-queries.yml rename to features/media-queries-interaction.yml diff --git a/features/interaction-media-queries.yml.dist b/features/media-queries-interaction.yml.dist similarity index 96% rename from features/interaction-media-queries.yml.dist rename to features/media-queries-interaction.yml.dist index 7f67f7aacfe..d62e5198f7c 100644 --- a/features/interaction-media-queries.yml.dist +++ b/features/media-queries-interaction.yml.dist @@ -1,4 +1,4 @@ -# Generated from: interaction-media-queries.yml +# Generated from: media-queries-interaction.yml # Do not edit this file by hand. Edit the source file instead! status: diff --git a/features/prefers-contrast.yml b/features/media-queries-prefers-contrast.yml similarity index 100% rename from features/prefers-contrast.yml rename to features/media-queries-prefers-contrast.yml diff --git a/features/prefers-contrast.yml.dist b/features/media-queries-prefers-contrast.yml.dist similarity index 86% rename from features/prefers-contrast.yml.dist rename to features/media-queries-prefers-contrast.yml.dist index ef726ef6ddb..386746fb37e 100644 --- a/features/prefers-contrast.yml.dist +++ b/features/media-queries-prefers-contrast.yml.dist @@ -1,4 +1,4 @@ -# Generated from: prefers-contrast.yml +# Generated from: media-queries-prefers-contrast.yml # Do not edit this file by hand. Edit the source file instead! status: diff --git a/features/prefers-reduced-data.yml b/features/media-queries-prefers-reduced-data.yml similarity index 100% rename from features/prefers-reduced-data.yml rename to features/media-queries-prefers-reduced-data.yml diff --git a/features/prefers-reduced-data.yml.dist b/features/media-queries-prefers-reduced-data.yml.dist similarity index 74% rename from features/prefers-reduced-data.yml.dist rename to features/media-queries-prefers-reduced-data.yml.dist index 41f305e55da..8d73b4dfddb 100644 --- a/features/prefers-reduced-data.yml.dist +++ b/features/media-queries-prefers-reduced-data.yml.dist @@ -1,4 +1,4 @@ -# Generated from: prefers-reduced-data.yml +# Generated from: media-queries-prefers-reduced-data.yml # Do not edit this file by hand. Edit the source file instead! status: diff --git a/features/prefers-reduced-motion.yml b/features/media-queries-prefers-reduced-motion.yml similarity index 100% rename from features/prefers-reduced-motion.yml rename to features/media-queries-prefers-reduced-motion.yml diff --git a/features/prefers-reduced-motion.yml.dist b/features/media-queries-prefers-reduced-motion.yml.dist similarity index 93% rename from features/prefers-reduced-motion.yml.dist rename to features/media-queries-prefers-reduced-motion.yml.dist index f6543eab73b..3629fa41b32 100644 --- a/features/prefers-reduced-motion.yml.dist +++ b/features/media-queries-prefers-reduced-motion.yml.dist @@ -1,4 +1,4 @@ -# Generated from: prefers-reduced-motion.yml +# Generated from: media-queries-prefers-reduced-motion.yml # Do not edit this file by hand. Edit the source file instead! status: diff --git a/features/prefers-reduced-transparency.yml b/features/media-queries-prefers-reduced-transparency.yml similarity index 100% rename from features/prefers-reduced-transparency.yml rename to features/media-queries-prefers-reduced-transparency.yml diff --git a/features/prefers-reduced-transparency.yml.dist b/features/media-queries-prefers-reduced-transparency.yml.dist similarity index 89% rename from features/prefers-reduced-transparency.yml.dist rename to features/media-queries-prefers-reduced-transparency.yml.dist index 991cd7b7085..b13f2b5c813 100644 --- a/features/prefers-reduced-transparency.yml.dist +++ b/features/media-queries-prefers-reduced-transparency.yml.dist @@ -1,4 +1,4 @@ -# Generated from: prefers-reduced-transparency.yml +# Generated from: media-queries-prefers-reduced-transparency.yml # Do not edit this file by hand. Edit the source file instead! status: From e139452302ca98375cc6e6e1c43d31abbc3741f9 Mon Sep 17 00:00:00 2001 From: James Stuckey Weber Date: Mon, 26 Aug 2024 21:04:33 -0400 Subject: [PATCH 05/18] Add media-queries group --- features/media-queries-prefers-contrast.yml | 1 + features/media-queries-prefers-reduced-data.yml | 1 + features/media-queries-prefers-reduced-motion.yml | 1 + features/media-queries-prefers-reduced-transparency.yml | 1 + features/media-query-range-syntax.yml | 1 + features/prefers-color-scheme.yml | 1 + groups/media-queries.yml | 3 +++ 7 files changed, 9 insertions(+) create mode 100644 groups/media-queries.yml diff --git a/features/media-queries-prefers-contrast.yml b/features/media-queries-prefers-contrast.yml index b2902f3c25e..b3cc6f9fe5d 100644 --- a/features/media-queries-prefers-contrast.yml +++ b/features/media-queries-prefers-contrast.yml @@ -1,5 +1,6 @@ name: prefers-contrast description: The `prefers-contrast` CSS media query detects the requested contrast, more or less. spec: https://drafts.csswg.org/mediaqueries-5/#prefers-contrast +group: media-queries compat_features: - css.at-rules.media.prefers-contrast diff --git a/features/media-queries-prefers-reduced-data.yml b/features/media-queries-prefers-reduced-data.yml index 98c17127bbf..3951e9d7754 100644 --- a/features/media-queries-prefers-reduced-data.yml +++ b/features/media-queries-prefers-reduced-data.yml @@ -1,5 +1,6 @@ name: prefers-reduced-data description: The `prefers-reduced-data` CSS media query detects whether the user has a preference for using less internet traffic. spec: https://drafts.csswg.org/mediaqueries-5/#prefers-reduced-data +group: media-queries compat_features: - css.at-rules.media.prefers-reduced-data diff --git a/features/media-queries-prefers-reduced-motion.yml b/features/media-queries-prefers-reduced-motion.yml index 356ab56937b..c954a7a8fad 100644 --- a/features/media-queries-prefers-reduced-motion.yml +++ b/features/media-queries-prefers-reduced-motion.yml @@ -4,6 +4,7 @@ spec: - https://drafts.csswg.org/mediaqueries-5/#prefers-reduced-motion - https://wicg.github.io/user-preference-media-features-headers/#sec-ch-prefers-reduced-motion caniuse: prefers-reduced-motion +group: media-queries status: compute_from: css.at-rules.media.prefers-reduced-motion compat_features: diff --git a/features/media-queries-prefers-reduced-transparency.yml b/features/media-queries-prefers-reduced-transparency.yml index 98eeb81a1f3..cb1e9f4406b 100644 --- a/features/media-queries-prefers-reduced-transparency.yml +++ b/features/media-queries-prefers-reduced-transparency.yml @@ -3,6 +3,7 @@ description: The `prefers-reduced-transparency` CSS media query detects whether spec: - https://drafts.csswg.org/mediaqueries-5/#prefers-reduced-transparency - https://wicg.github.io/user-preference-media-features-headers/#sec-ch-prefers-reduced-transparency +group: media-queries compat_features: - css.at-rules.media.prefers-reduced-transparency - http.headers.Sec-CH-Prefers-Reduced-Transparency diff --git a/features/media-query-range-syntax.yml b/features/media-query-range-syntax.yml index ceda1f0b510..7315f8102e3 100644 --- a/features/media-query-range-syntax.yml +++ b/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." caniuse: css-media-range-syntax +group: media-queries spec: https://drafts.csswg.org/mediaqueries-4/#mq-range-context diff --git a/features/prefers-color-scheme.yml b/features/prefers-color-scheme.yml index 9ce6458ab4e..c7cc82c14de 100644 --- a/features/prefers-color-scheme.yml +++ b/features/prefers-color-scheme.yml @@ -1,6 +1,7 @@ name: prefers-color-scheme description: The `prefers-color-scheme` CSS media query detects the requested color scheme, light or dark. spec: https://drafts.csswg.org/mediaqueries-5/#prefers-color-scheme +group: media-queries status: compute_from: css.at-rules.media.prefers-color-scheme compat_features: diff --git a/groups/media-queries.yml b/groups/media-queries.yml new file mode 100644 index 00000000000..9bdc7e2ab80 --- /dev/null +++ b/groups/media-queries.yml @@ -0,0 +1,3 @@ +# CSS Media queries allow you to provide different styles based on the user's device and settings. +name: Media queries +parent: css \ No newline at end of file From 78c1c6a8ff9452a1a8958ffce69b1e07c128b03b Mon Sep 17 00:00:00 2001 From: James Stuckey Weber Date: Mon, 26 Aug 2024 21:17:48 -0400 Subject: [PATCH 06/18] Add resolution media query --- features/media-queries-resolution.yml | 12 +++++ features/media-queries-resolution.yml.dist | 53 ++++++++++++++++++++++ 2 files changed, 65 insertions(+) create mode 100644 features/media-queries-resolution.yml create mode 100644 features/media-queries-resolution.yml.dist diff --git a/features/media-queries-resolution.yml b/features/media-queries-resolution.yml new file mode 100644 index 00000000000..3093db58f5f --- /dev/null +++ b/features/media-queries-resolution.yml @@ -0,0 +1,12 @@ +name: Resolution media query +description: The `resolution` CSS media query sets styles based on the pixel density, or how many pixels a device uses to display a single CSS pixel. +spec: https://www.w3.org/TR/mediaqueries-4/#resolution +caniuse: css-media-resolution +compat_features: + - css.at-rules.media.resolution + - css.types.resolution + - css.types.resolution.dpcm + - css.types.resolution.dpi + - css.types.resolution.dppx + - css.types.resolution.x + \ No newline at end of file diff --git a/features/media-queries-resolution.yml.dist b/features/media-queries-resolution.yml.dist new file mode 100644 index 00000000000..ef837ce57f7 --- /dev/null +++ b/features/media-queries-resolution.yml.dist @@ -0,0 +1,53 @@ +# Generated from: media-queries-resolution.yml +# Do not edit this file by hand. Edit the source file instead! + +status: + baseline: false + support: + chrome: "68" + chrome_android: "68" + edge: "79" + firefox: "62" + firefox_android: "62" +compat_features: + # baseline: low + # baseline_low_date: 2022-09-12 + # support: + # chrome: "29" + # chrome_android: "29" + # edge: "12" + # firefox: "8" + # firefox_android: "8" + # safari: "16" + # safari_ios: "16" + - css.at-rules.media.resolution + + # baseline: false + # support: + # chrome: "29" + # chrome_android: "29" + # edge: "12" + # firefox: "8" + # firefox_android: "8" + - css.types.resolution + - css.types.resolution.dpcm + - css.types.resolution.dpi + + # baseline: false + # support: + # chrome: "29" + # chrome_android: "29" + # edge: "12" + # firefox: "16" + # firefox_android: "16" + - css.types.resolution.dppx + + # ⬇️ Same status as overall feature ⬇️ + # baseline: false + # support: + # chrome: "68" + # chrome_android: "68" + # edge: "79" + # firefox: "62" + # firefox_android: "62" + - css.types.resolution.x From ce9ff254615c164a6e59c3d8e6f6b027bf8ce922 Mon Sep 17 00:00:00 2001 From: James Stuckey Weber Date: Mon, 26 Aug 2024 21:41:10 -0400 Subject: [PATCH 07/18] Add media queries base --- features/media-queries-interaction.yml | 4 +- features/media-queries-resolution.yml | 7 ++- features/media-queries.yml | 14 +++++ features/media-queries.yml.dist | 72 ++++++++++++++++++++++++++ groups/media-queries.yml | 2 +- 5 files changed, 92 insertions(+), 7 deletions(-) create mode 100644 features/media-queries.yml create mode 100644 features/media-queries.yml.dist diff --git a/features/media-queries-interaction.yml b/features/media-queries-interaction.yml index 7dc27a307dc..702303e2d06 100644 --- a/features/media-queries-interaction.yml +++ b/features/media-queries-interaction.yml @@ -4,8 +4,8 @@ spec: https://drafts.csswg.org/mediaqueries-5/#mf-interaction caniuse: css-media-interaction status: compute_from: css.at-rules.media.any-pointer -compat_features: +compat_features: - css.at-rules.media.hover - css.at-rules.media.any-hover - css.at-rules.media.any-pointer - - css.at-rules.media.pointer \ No newline at end of file + - css.at-rules.media.pointer diff --git a/features/media-queries-resolution.yml b/features/media-queries-resolution.yml index 3093db58f5f..8dc464dc5c3 100644 --- a/features/media-queries-resolution.yml +++ b/features/media-queries-resolution.yml @@ -1,12 +1,11 @@ name: Resolution media query -description: The `resolution` CSS media query sets styles based on the pixel density, or how many pixels a device uses to display a single CSS pixel. -spec: https://www.w3.org/TR/mediaqueries-4/#resolution +description: The `resolution` CSS media query sets styles based on the pixel density, or how many pixels a device uses to display a single CSS pixel. +spec: https://drafts.csswg.org/mediaqueries-5/#resolution caniuse: css-media-resolution -compat_features: +compat_features: - css.at-rules.media.resolution - css.types.resolution - css.types.resolution.dpcm - css.types.resolution.dpi - css.types.resolution.dppx - css.types.resolution.x - \ No newline at end of file diff --git a/features/media-queries.yml b/features/media-queries.yml new file mode 100644 index 00000000000..02727491b82 --- /dev/null +++ b/features/media-queries.yml @@ -0,0 +1,14 @@ +name: Media queries +description: CSS Media queries allow you to provide different styles based on the user's device and settings. For example, `@media (width <= 700px) and (orientation:portrait)` selects screens less than 700 pixels wide and also are taller than they are wide. +spec: https://drafts.csswg.org/mediaqueries-5/ +caniuse: css-mediaqueries +group: media-queries +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.orientation + - css.at-rules.media.aspect-ratio + - css.types.ratio diff --git a/features/media-queries.yml.dist b/features/media-queries.yml.dist new file mode 100644 index 00000000000..61d4d411e6b --- /dev/null +++ b/features/media-queries.yml.dist @@ -0,0 +1,72 @@ +# 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: "3" + chrome_android: "18" + edge: "12" + firefox: "3.5" + firefox_android: "4" + safari: "5" + safari_ios: "4.2" +compat_features: + # 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 + + # 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 + + # ⬇️ Same status as overall feature ⬇️ + # 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 diff --git a/groups/media-queries.yml b/groups/media-queries.yml index 9bdc7e2ab80..2e4224776cb 100644 --- a/groups/media-queries.yml +++ b/groups/media-queries.yml @@ -1,3 +1,3 @@ # CSS Media queries allow you to provide different styles based on the user's device and settings. name: Media queries -parent: css \ No newline at end of file +parent: css From ec9906e0ea02b905b7c0165d0b2d45fc7ad66016 Mon Sep 17 00:00:00 2001 From: James Stuckey Weber Date: Tue, 27 Aug 2024 15:22:04 -0400 Subject: [PATCH 08/18] Add more media features, change query to feature where applicable --- features/media-queries-display-mode.yml | 7 ++++ features/media-queries-display-mode.yml.dist | 25 +++++++++++++++ features/media-queries-dynamic-range.yml | 6 ++++ features/media-queries-dynamic-range.yml.dist | 16 ++++++++++ features/media-queries-inverted-colors.yml | 5 +++ features/media-queries-overflow.yml | 9 ++++++ features/media-queries-overflow.yml.dist | 17 ++++++++++ features/media-queries-prefers-contrast.yml | 2 +- .../media-queries-prefers-reduced-data.yml | 2 +- .../media-queries-prefers-reduced-motion.yml | 2 +- ...a-queries-prefers-reduced-transparency.yml | 2 +- features/media-queries-resolution.yml | 4 +-- features/media-queries-scripting.yml | 5 +++ features/media-queries-scripting.yml.dist | 16 ++++++++++ features/media-queries-update.yml | 6 ++++ .../media-queries-video-dynamic-range.yml | 6 ++++ features/media-queries.yml | 5 +++ features/media-queries.yml.dist | 32 ++++++++++++++++--- 18 files changed, 156 insertions(+), 11 deletions(-) create mode 100644 features/media-queries-display-mode.yml create mode 100644 features/media-queries-display-mode.yml.dist create mode 100644 features/media-queries-dynamic-range.yml create mode 100644 features/media-queries-dynamic-range.yml.dist create mode 100644 features/media-queries-inverted-colors.yml create mode 100644 features/media-queries-overflow.yml create mode 100644 features/media-queries-overflow.yml.dist create mode 100644 features/media-queries-scripting.yml create mode 100644 features/media-queries-scripting.yml.dist create mode 100644 features/media-queries-update.yml create mode 100644 features/media-queries-video-dynamic-range.yml diff --git a/features/media-queries-display-mode.yml b/features/media-queries-display-mode.yml new file mode 100644 index 00000000000..f9aad7a0044 --- /dev/null +++ b/features/media-queries-display-mode.yml @@ -0,0 +1,7 @@ +name: display-mode media query +description: The `display-mode` CSS media feature sets styles based on whether the user's browser 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 diff --git a/features/media-queries-display-mode.yml.dist b/features/media-queries-display-mode.yml.dist new file mode 100644 index 00000000000..0bba7015029 --- /dev/null +++ b/features/media-queries-display-mode.yml.dist @@ -0,0 +1,25 @@ +# Generated from: media-queries-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 diff --git a/features/media-queries-dynamic-range.yml b/features/media-queries-dynamic-range.yml new file mode 100644 index 00000000000..6a515088605 --- /dev/null +++ b/features/media-queries-dynamic-range.yml @@ -0,0 +1,6 @@ +name: dynamic-range media feature +description: The `dynamic-range` CSS media feature 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 diff --git a/features/media-queries-dynamic-range.yml.dist b/features/media-queries-dynamic-range.yml.dist new file mode 100644 index 00000000000..6cd27b67eb7 --- /dev/null +++ b/features/media-queries-dynamic-range.yml.dist @@ -0,0 +1,16 @@ +# Generated from: media-queries-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 diff --git a/features/media-queries-inverted-colors.yml b/features/media-queries-inverted-colors.yml new file mode 100644 index 00000000000..194796a17c8 --- /dev/null +++ b/features/media-queries-inverted-colors.yml @@ -0,0 +1,5 @@ +name: inverted-colors media feature +description: The `inverted-colors` CSS media feature sets styles based on whether the user has inverted all colors. +spec: https://drafts.csswg.org/mediaqueries-5/#inverted +compat_features: + - css.at-rules.media.inverted-colors diff --git a/features/media-queries-overflow.yml b/features/media-queries-overflow.yml new file mode 100644 index 00000000000..b0b8b826a14 --- /dev/null +++ b/features/media-queries-overflow.yml @@ -0,0 +1,9 @@ +name: Overflow media features +description: The `overflow-block` and `overflow-inline` CSS media features set styles based on how a user's device will show content that is larger than the screen. Options are `none` (for instance, a billboard), `scroll` (for instance, a laptop), or `paged` (for instance, a printer). +spec: + - https://drafts.csswg.org/mediaqueries-5/#mf-overflow-block + - https://drafts.csswg.org/mediaqueries-5/#mf-overflow-inline +compat_features: + - css.at-rules.media.overflow-block + - css.at-rules.media.overflow-inline + \ No newline at end of file diff --git a/features/media-queries-overflow.yml.dist b/features/media-queries-overflow.yml.dist new file mode 100644 index 00000000000..564a629682e --- /dev/null +++ b/features/media-queries-overflow.yml.dist @@ -0,0 +1,17 @@ +# Generated from: media-queries-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 diff --git a/features/media-queries-prefers-contrast.yml b/features/media-queries-prefers-contrast.yml index b3cc6f9fe5d..f2c2a06241b 100644 --- a/features/media-queries-prefers-contrast.yml +++ b/features/media-queries-prefers-contrast.yml @@ -1,5 +1,5 @@ name: prefers-contrast -description: The `prefers-contrast` CSS media query detects the requested contrast, more or less. +description: The `prefers-contrast` CSS media feature detects the requested contrast, more or less. spec: https://drafts.csswg.org/mediaqueries-5/#prefers-contrast group: media-queries compat_features: diff --git a/features/media-queries-prefers-reduced-data.yml b/features/media-queries-prefers-reduced-data.yml index 3951e9d7754..ac4fe4051bc 100644 --- a/features/media-queries-prefers-reduced-data.yml +++ b/features/media-queries-prefers-reduced-data.yml @@ -1,5 +1,5 @@ name: prefers-reduced-data -description: The `prefers-reduced-data` CSS media query detects whether the user has a preference for using less internet traffic. +description: The `prefers-reduced-data` CSS media feature detects whether the user has a preference for using less internet traffic. spec: https://drafts.csswg.org/mediaqueries-5/#prefers-reduced-data group: media-queries compat_features: diff --git a/features/media-queries-prefers-reduced-motion.yml b/features/media-queries-prefers-reduced-motion.yml index c954a7a8fad..4aa24eac972 100644 --- a/features/media-queries-prefers-reduced-motion.yml +++ b/features/media-queries-prefers-reduced-motion.yml @@ -1,5 +1,5 @@ name: prefers-reduced-motion -description: The `prefers-reduced-motion` CSS media query detects whether the user requested less non-essential animation. +description: The `prefers-reduced-motion` CSS media feature detects whether the user requested less non-essential animation. spec: - https://drafts.csswg.org/mediaqueries-5/#prefers-reduced-motion - https://wicg.github.io/user-preference-media-features-headers/#sec-ch-prefers-reduced-motion diff --git a/features/media-queries-prefers-reduced-transparency.yml b/features/media-queries-prefers-reduced-transparency.yml index cb1e9f4406b..6c7f66089f2 100644 --- a/features/media-queries-prefers-reduced-transparency.yml +++ b/features/media-queries-prefers-reduced-transparency.yml @@ -1,5 +1,5 @@ name: prefers-reduced-transparency -description: The `prefers-reduced-transparency` CSS media query detects whether the user requested less transparent effects, which can improve contrast and readability. +description: The `prefers-reduced-transparency` CSS media feature detects whether the user requested less transparent effects, which can improve contrast and readability. spec: - https://drafts.csswg.org/mediaqueries-5/#prefers-reduced-transparency - https://wicg.github.io/user-preference-media-features-headers/#sec-ch-prefers-reduced-transparency diff --git a/features/media-queries-resolution.yml b/features/media-queries-resolution.yml index 8dc464dc5c3..728861847c3 100644 --- a/features/media-queries-resolution.yml +++ b/features/media-queries-resolution.yml @@ -1,5 +1,5 @@ -name: Resolution media query -description: The `resolution` CSS media query sets styles based on the pixel density, or how many pixels a device uses to display a single CSS pixel. +name: resolution media feature +description: The `resolution` CSS media feature sets styles based on the pixel density, or how many pixels a device uses to display a single CSS pixel. spec: https://drafts.csswg.org/mediaqueries-5/#resolution caniuse: css-media-resolution compat_features: diff --git a/features/media-queries-scripting.yml b/features/media-queries-scripting.yml new file mode 100644 index 00000000000..0f0dfb2818d --- /dev/null +++ b/features/media-queries-scripting.yml @@ -0,0 +1,5 @@ +name: scripting media feature +description: The `scripting` CSS media feature sets styles based on whether scripting such as JavaScript is available. Values are `enabled` if scripting is available, `initial-only` if scripting is only available on page load (for example, printed or server-rendered content), or `none`. +spec: https://drafts.csswg.org/mediaqueries-5/#scripting +compat_features: + - css.at-rules.media.scripting diff --git a/features/media-queries-scripting.yml.dist b/features/media-queries-scripting.yml.dist new file mode 100644 index 00000000000..fbfabdcd6fa --- /dev/null +++ b/features/media-queries-scripting.yml.dist @@ -0,0 +1,16 @@ +# Generated from: media-queries-scripting.yml +# Do not edit this file by hand. Edit the source file instead! + +status: + baseline: low + baseline_low_date: 2023-12-07 + support: + chrome: "120" + chrome_android: "120" + edge: "120" + firefox: "113" + firefox_android: "113" + safari: "17" + safari_ios: "17" +compat_features: + - css.at-rules.media.scripting diff --git a/features/media-queries-update.yml b/features/media-queries-update.yml new file mode 100644 index 00000000000..cc5ddb8c66d --- /dev/null +++ b/features/media-queries-update.yml @@ -0,0 +1,6 @@ +name: Update frequency media feature +description: The `update` CSS media feature sets styles based on whether and how fast the user's device can modify display after it has been rendered. Values are `none`, `slow`, and `fast`. +spec: https://drafts.csswg.org/mediaqueries-5/#update +group: media-queries +compat_features: + - css.at-rules.media.update \ No newline at end of file diff --git a/features/media-queries-video-dynamic-range.yml b/features/media-queries-video-dynamic-range.yml new file mode 100644 index 00000000000..e1db18cd94d --- /dev/null +++ b/features/media-queries-video-dynamic-range.yml @@ -0,0 +1,6 @@ +name: video-dynamic-range media feature +description: The `video-dynamic-range` CSS media feature sets styles based on whether a device can display video with 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.video-dynamic-range diff --git a/features/media-queries.yml b/features/media-queries.yml index 02727491b82..81a22f7b506 100644 --- a/features/media-queries.yml +++ b/features/media-queries.yml @@ -3,12 +3,17 @@ description: CSS Media queries allow you to provide different styles based on th 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 + \ No newline at end of file diff --git a/features/media-queries.yml.dist b/features/media-queries.yml.dist index 61d4d411e6b..029440276a1 100644 --- a/features/media-queries.yml.dist +++ b/features/media-queries.yml.dist @@ -6,14 +6,15 @@ status: baseline_low_date: 2015-07-29 baseline_high_date: 2018-01-29 support: - chrome: "3" + chrome: "1" chrome_android: "18" edge: "12" - firefox: "3.5" + firefox: "1" firefox_android: "4" - safari: "5" - safari_ios: "4.2" + 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 @@ -56,7 +57,6 @@ compat_features: # safari_ios: "4.2" - css.at-rules.media.orientation - # ⬇️ Same status as overall feature ⬇️ # baseline: high # baseline_low_date: 2015-07-29 # baseline_high_date: 2018-01-29 @@ -70,3 +70,25 @@ compat_features: # safari_ios: "4.2" - css.at-rules.media.aspect-ratio - css.types.ratio + + # 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: false + # support: + # chrome: "29" + # chrome_android: "29" + # edge: "79" + # safari: "8" + # safari_ios: "8" + - css.at-rules.media.color-index From 368d22ee35712db613020e6cc21adf447030b65b Mon Sep 17 00:00:00 2001 From: James Stuckey Weber Date: Tue, 27 Aug 2024 15:29:30 -0400 Subject: [PATCH 09/18] Add color-gamut --- features/media-queries-color-gamut.yml | 5 +++++ features/media-queries-color-gamut.yml.dist | 16 ++++++++++++++++ features/media-queries-display-mode.yml | 2 +- features/media-queries-inverted-colors.yml.dist | 10 ++++++++++ features/media-queries-overflow.yml | 3 +-- features/media-queries-update.yml | 2 +- features/media-queries-update.yml.dist | 16 ++++++++++++++++ .../media-queries-video-dynamic-range.yml.dist | 10 ++++++++++ features/media-queries.yml | 1 - 9 files changed, 60 insertions(+), 5 deletions(-) create mode 100644 features/media-queries-color-gamut.yml create mode 100644 features/media-queries-color-gamut.yml.dist create mode 100644 features/media-queries-inverted-colors.yml.dist create mode 100644 features/media-queries-update.yml.dist create mode 100644 features/media-queries-video-dynamic-range.yml.dist diff --git a/features/media-queries-color-gamut.yml b/features/media-queries-color-gamut.yml new file mode 100644 index 00000000000..9501c768140 --- /dev/null +++ b/features/media-queries-color-gamut.yml @@ -0,0 +1,5 @@ +name: color-gamut media feature +description: The `color-gamut` media feature sets styles based on the colors a device can display. Values are `srgb` if the device can display at least sRGB, `p3` if the device can display at least Display P3, and `rec2020` if the device can display at least REC. 2020. +spec: https://drafts.csswg.org/mediaqueries-5/#color-gamut +compat_features: + - css.at-rules.media.color-gamut diff --git a/features/media-queries-color-gamut.yml.dist b/features/media-queries-color-gamut.yml.dist new file mode 100644 index 00000000000..33879ffc3f7 --- /dev/null +++ b/features/media-queries-color-gamut.yml.dist @@ -0,0 +1,16 @@ +# Generated from: media-queries-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 diff --git a/features/media-queries-display-mode.yml b/features/media-queries-display-mode.yml index f9aad7a0044..88771226ef3 100644 --- a/features/media-queries-display-mode.yml +++ b/features/media-queries-display-mode.yml @@ -1,4 +1,4 @@ -name: display-mode media query +name: display-mode media feature description: The `display-mode` CSS media feature sets styles based on whether the user's browser is in `fullscreen`, `standalone`, `minimal-ui,` `browser`, or `picture-in-picture` mode. spec: https://drafts.csswg.org/mediaqueries-5/#display-modes group: media-queries diff --git a/features/media-queries-inverted-colors.yml.dist b/features/media-queries-inverted-colors.yml.dist new file mode 100644 index 00000000000..513e6faf2c6 --- /dev/null +++ b/features/media-queries-inverted-colors.yml.dist @@ -0,0 +1,10 @@ +# Generated from: media-queries-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 diff --git a/features/media-queries-overflow.yml b/features/media-queries-overflow.yml index b0b8b826a14..45504af7726 100644 --- a/features/media-queries-overflow.yml +++ b/features/media-queries-overflow.yml @@ -1,9 +1,8 @@ name: Overflow media features -description: The `overflow-block` and `overflow-inline` CSS media features set styles based on how a user's device will show content that is larger than the screen. Options are `none` (for instance, a billboard), `scroll` (for instance, a laptop), or `paged` (for instance, a printer). +description: The `overflow-block` and `overflow-inline` CSS media features set styles based on how a user's device will show content that is larger than the screen. Options are `none` (for instance, a billboard), `scroll` (for instance, a laptop), or `paged` (for instance, a printer). spec: - https://drafts.csswg.org/mediaqueries-5/#mf-overflow-block - https://drafts.csswg.org/mediaqueries-5/#mf-overflow-inline compat_features: - css.at-rules.media.overflow-block - css.at-rules.media.overflow-inline - \ No newline at end of file diff --git a/features/media-queries-update.yml b/features/media-queries-update.yml index cc5ddb8c66d..fa4bb8aa803 100644 --- a/features/media-queries-update.yml +++ b/features/media-queries-update.yml @@ -3,4 +3,4 @@ description: The `update` CSS media feature sets styles based on whether and how spec: https://drafts.csswg.org/mediaqueries-5/#update group: media-queries compat_features: - - css.at-rules.media.update \ No newline at end of file + - css.at-rules.media.update diff --git a/features/media-queries-update.yml.dist b/features/media-queries-update.yml.dist new file mode 100644 index 00000000000..9ad43de534e --- /dev/null +++ b/features/media-queries-update.yml.dist @@ -0,0 +1,16 @@ +# Generated from: media-queries-update.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: "102" + firefox_android: "102" + safari: "17" + safari_ios: "17" +compat_features: + - css.at-rules.media.update diff --git a/features/media-queries-video-dynamic-range.yml.dist b/features/media-queries-video-dynamic-range.yml.dist new file mode 100644 index 00000000000..9c445af6e57 --- /dev/null +++ b/features/media-queries-video-dynamic-range.yml.dist @@ -0,0 +1,10 @@ +# Generated from: media-queries-video-dynamic-range.yml +# Do not edit this file by hand. Edit the source file instead! + +status: + baseline: false + support: + firefox: "100" + firefox_android: "100" +compat_features: + - css.at-rules.media.video-dynamic-range diff --git a/features/media-queries.yml b/features/media-queries.yml index 81a22f7b506..baba79f510f 100644 --- a/features/media-queries.yml +++ b/features/media-queries.yml @@ -16,4 +16,3 @@ compat_features: - css.at-rules.media.aspect-ratio - css.types.ratio - css.at-rules.media.color-index - \ No newline at end of file From 0249768904b48b3abce9c8cf7de80455b5493b4e Mon Sep 17 00:00:00 2001 From: James Stuckey Weber Date: Tue, 27 Aug 2024 15:50:33 -0400 Subject: [PATCH 10/18] Add groups --- features/media-queries-color-gamut.yml | 1 + features/media-queries-inverted-colors.yml | 1 + features/media-queries-overflow.yml | 1 + 3 files changed, 3 insertions(+) diff --git a/features/media-queries-color-gamut.yml b/features/media-queries-color-gamut.yml index 9501c768140..10ee5e01444 100644 --- a/features/media-queries-color-gamut.yml +++ b/features/media-queries-color-gamut.yml @@ -1,5 +1,6 @@ name: color-gamut media feature description: The `color-gamut` media feature sets styles based on the colors a device can display. Values are `srgb` if the device can display at least sRGB, `p3` if the device can display at least Display P3, and `rec2020` if the device can display at least REC. 2020. spec: https://drafts.csswg.org/mediaqueries-5/#color-gamut +group: media-queries compat_features: - css.at-rules.media.color-gamut diff --git a/features/media-queries-inverted-colors.yml b/features/media-queries-inverted-colors.yml index 194796a17c8..8456b5cd02d 100644 --- a/features/media-queries-inverted-colors.yml +++ b/features/media-queries-inverted-colors.yml @@ -1,5 +1,6 @@ name: inverted-colors media feature description: The `inverted-colors` CSS media feature sets styles based on whether the user has inverted all colors. spec: https://drafts.csswg.org/mediaqueries-5/#inverted +group: media-queries compat_features: - css.at-rules.media.inverted-colors diff --git a/features/media-queries-overflow.yml b/features/media-queries-overflow.yml index 45504af7726..7b942a9a3da 100644 --- a/features/media-queries-overflow.yml +++ b/features/media-queries-overflow.yml @@ -3,6 +3,7 @@ description: The `overflow-block` and `overflow-inline` CSS media features set s 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 From a2b00f4e5f1ab55c8c60cb7808e7b990e76fac61 Mon Sep 17 00:00:00 2001 From: James Stuckey Weber Date: Tue, 3 Sep 2024 16:05:44 -0400 Subject: [PATCH 11/18] Address review --- features/media-queries-display-mode.yml | 2 +- features/media-queries-interaction.yml | 5 +++-- features/media-queries-inverted-colors.yml | 2 +- features/media-queries-overflow.yml | 2 +- features/media-queries-prefers-contrast.yml | 4 ++-- features/media-queries-prefers-reduced-data.yml | 4 ++-- features/media-queries-prefers-reduced-motion.yml | 4 ++-- features/media-queries-prefers-reduced-transparency.yml | 4 ++-- features/media-queries-update.yml | 2 +- features/media-queries.yml | 2 +- features/prefers-color-scheme.yml | 4 ++-- 11 files changed, 18 insertions(+), 17 deletions(-) diff --git a/features/media-queries-display-mode.yml b/features/media-queries-display-mode.yml index 88771226ef3..94aab960a14 100644 --- a/features/media-queries-display-mode.yml +++ b/features/media-queries-display-mode.yml @@ -1,5 +1,5 @@ name: display-mode media feature -description: The `display-mode` CSS media feature sets styles based on whether the user's browser is in `fullscreen`, `standalone`, `minimal-ui,` `browser`, or `picture-in-picture` mode. +description: The `display-mode` CSS media feature 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: diff --git a/features/media-queries-interaction.yml b/features/media-queries-interaction.yml index 702303e2d06..df905305e28 100644 --- a/features/media-queries-interaction.yml +++ b/features/media-queries-interaction.yml @@ -1,7 +1,8 @@ -name: Interaction media queries -description: The interaction CSS media queries set styles based on a user's ability to hover using `hover` or `any-hover` or use a pointer using `pointer` and `any-pointer`. For example, a smartphone would match `@media (hover:none) and (pointer:coarse)`. +name: Interaction media features +description: "The `pointer`, `any-pointer`, `hover`, and `any-hover` CSS media features set styles based on the presence of pointing devices and their ability to hover over elements. For example, a smartphone device would match the `(hover: none) and (pointer: coarse)` media feature." 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: diff --git a/features/media-queries-inverted-colors.yml b/features/media-queries-inverted-colors.yml index 8456b5cd02d..b2c1900857e 100644 --- a/features/media-queries-inverted-colors.yml +++ b/features/media-queries-inverted-colors.yml @@ -1,5 +1,5 @@ name: inverted-colors media feature -description: The `inverted-colors` CSS media feature sets styles based on whether the user has inverted all colors. +description: The `inverted-colors` CSS media feature 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: diff --git a/features/media-queries-overflow.yml b/features/media-queries-overflow.yml index 7b942a9a3da..641ca555e08 100644 --- a/features/media-queries-overflow.yml +++ b/features/media-queries-overflow.yml @@ -1,5 +1,5 @@ name: Overflow media features -description: The `overflow-block` and `overflow-inline` CSS media features set styles based on how a user's device will show content that is larger than the screen. Options are `none` (for instance, a billboard), `scroll` (for instance, a laptop), or `paged` (for instance, a printer). +description: The `overflow-block` and `overflow-inline` CSS media features 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 diff --git a/features/media-queries-prefers-contrast.yml b/features/media-queries-prefers-contrast.yml index f2c2a06241b..0b1bfbcb8d8 100644 --- a/features/media-queries-prefers-contrast.yml +++ b/features/media-queries-prefers-contrast.yml @@ -1,5 +1,5 @@ -name: prefers-contrast -description: The `prefers-contrast` CSS media feature detects the requested contrast, more or less. +name: prefers-contrast media feature +description: The `prefers-contrast` CSS media feature sets styles based on whether the user prefers more or less contrast. spec: https://drafts.csswg.org/mediaqueries-5/#prefers-contrast group: media-queries compat_features: diff --git a/features/media-queries-prefers-reduced-data.yml b/features/media-queries-prefers-reduced-data.yml index ac4fe4051bc..eb290c09ef7 100644 --- a/features/media-queries-prefers-reduced-data.yml +++ b/features/media-queries-prefers-reduced-data.yml @@ -1,5 +1,5 @@ -name: prefers-reduced-data -description: The `prefers-reduced-data` CSS media feature detects whether the user has a preference for using less internet traffic. +name: prefers-reduced-data media feature +description: The `prefers-reduced-data` CSS media feature detects whether the user has a preference for using less internet traffic. For example, you can use this media feature to avoid loading large font files and use a system font instead. spec: https://drafts.csswg.org/mediaqueries-5/#prefers-reduced-data group: media-queries compat_features: diff --git a/features/media-queries-prefers-reduced-motion.yml b/features/media-queries-prefers-reduced-motion.yml index 4aa24eac972..f0f98f84054 100644 --- a/features/media-queries-prefers-reduced-motion.yml +++ b/features/media-queries-prefers-reduced-motion.yml @@ -1,5 +1,5 @@ -name: prefers-reduced-motion -description: The `prefers-reduced-motion` CSS media feature detects whether the user requested less non-essential animation. +name: prefers-reduced-motion media feature +description: The `prefers-reduced-motion` CSS media feature sets styles based on whether the user prefers to minimize the amount of non-essential animations on the device. spec: - https://drafts.csswg.org/mediaqueries-5/#prefers-reduced-motion - https://wicg.github.io/user-preference-media-features-headers/#sec-ch-prefers-reduced-motion diff --git a/features/media-queries-prefers-reduced-transparency.yml b/features/media-queries-prefers-reduced-transparency.yml index 6c7f66089f2..e3e401a53bd 100644 --- a/features/media-queries-prefers-reduced-transparency.yml +++ b/features/media-queries-prefers-reduced-transparency.yml @@ -1,5 +1,5 @@ -name: prefers-reduced-transparency -description: The `prefers-reduced-transparency` CSS media feature detects whether the user requested less transparent effects, which can improve contrast and readability. +name: prefers-reduced-transparency media feature +description: The `prefers-reduced-transparency` CSS media feature sets styles based on whether the user prefers to reduce the amount of transparent effects on their device, for example to improve contrast and readability. spec: - https://drafts.csswg.org/mediaqueries-5/#prefers-reduced-transparency - https://wicg.github.io/user-preference-media-features-headers/#sec-ch-prefers-reduced-transparency diff --git a/features/media-queries-update.yml b/features/media-queries-update.yml index fa4bb8aa803..136244a8433 100644 --- a/features/media-queries-update.yml +++ b/features/media-queries-update.yml @@ -1,5 +1,5 @@ name: Update frequency media feature -description: The `update` CSS media feature sets styles based on whether and how fast the user's device can modify display after it has been rendered. Values are `none`, `slow`, and `fast`. +description: The `update` CSS media feature sets styles based on whether and how fast the user's device can modify display after it has been rendered. spec: https://drafts.csswg.org/mediaqueries-5/#update group: media-queries compat_features: diff --git a/features/media-queries.yml b/features/media-queries.yml index baba79f510f..2d24dcd2f73 100644 --- a/features/media-queries.yml +++ b/features/media-queries.yml @@ -1,5 +1,5 @@ name: Media queries -description: CSS Media queries allow you to provide different styles based on the user's device and settings. For example, `@media (width <= 700px) and (orientation:portrait)` selects screens less than 700 pixels wide and also are taller than they are wide. +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 diff --git a/features/prefers-color-scheme.yml b/features/prefers-color-scheme.yml index c7cc82c14de..f1e76cdd8cf 100644 --- a/features/prefers-color-scheme.yml +++ b/features/prefers-color-scheme.yml @@ -1,5 +1,5 @@ -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 feature +description: The `prefers-color-scheme` CSS media feature sets styles based on the requested color scheme, light or dark. spec: https://drafts.csswg.org/mediaqueries-5/#prefers-color-scheme group: media-queries status: From ba1662e61051c373134d1b31e5f83632f37f70cf Mon Sep 17 00:00:00 2001 From: James Stuckey Weber Date: Mon, 16 Sep 2024 15:52:26 -0400 Subject: [PATCH 12/18] Rename media features and files --- .DS_Store | Bin 0 -> 6148 bytes features/color-gamut.yml | 6 ++++++ ...color-gamut.yml.dist => color-gamut.yml.dist} | 2 +- features/display-mode.yml | 7 +++++++ ...splay-mode.yml.dist => display-mode.yml.dist} | 2 +- features/dynamic-range.yml | 6 ++++++ ...mic-range.yml.dist => dynamic-range.yml.dist} | 2 +- ...a-queries-interaction.yml => interaction.yml} | 4 ++-- ...interaction.yml.dist => interaction.yml.dist} | 2 +- features/inverted-colors.yml | 6 ++++++ ...-colors.yml.dist => inverted-colors.yml.dist} | 2 +- features/media-queries-color-gamut.yml | 6 ------ features/media-queries-display-mode.yml | 7 ------- features/media-queries-dynamic-range.yml | 6 ------ features/media-queries-inverted-colors.yml | 6 ------ features/media-queries-prefers-contrast.yml | 6 ------ features/media-queries-prefers-reduced-data.yml | 6 ------ features/media-queries-scripting.yml | 5 ----- features/media-queries-update.yml | 6 ------ features/media-queries-video-dynamic-range.yml | 6 ------ features/media-query-range-syntax.yml | 2 +- .../{media-queries-overflow.yml => overflow.yml} | 4 ++-- ...eries-overflow.yml.dist => overflow.yml.dist} | 2 +- features/prefers-color-scheme.yml | 4 ++-- features/prefers-contrast.yml | 6 ++++++ ...ntrast.yml.dist => prefers-contrast.yml.dist} | 2 +- features/prefers-reduced-data.yml | 6 ++++++ ...ta.yml.dist => prefers-reduced-data.yml.dist} | 2 +- ...ced-motion.yml => prefers-reduced-motion.yml} | 4 ++-- ....yml.dist => prefers-reduced-motion.yml.dist} | 2 +- ...ency.yml => prefers-reduced-transparency.yml} | 4 ++-- ...ist => prefers-reduced-transparency.yml.dist} | 2 +- ...dia-queries-resolution.yml => resolution.yml} | 4 ++-- ...s-resolution.yml.dist => resolution.yml.dist} | 2 +- features/scripting.yml | 5 +++++ ...ies-scripting.yml.dist => scripting.yml.dist} | 2 +- features/update.yml | 6 ++++++ ...a-queries-update.yml.dist => update.yml.dist} | 2 +- features/video-dynamic-range.yml | 6 ++++++ ...nge.yml.dist => video-dynamic-range.yml.dist} | 2 +- 40 files changed, 81 insertions(+), 81 deletions(-) create mode 100644 .DS_Store create mode 100644 features/color-gamut.yml rename features/{media-queries-color-gamut.yml.dist => color-gamut.yml.dist} (87%) create mode 100644 features/display-mode.yml rename features/{media-queries-display-mode.yml.dist => display-mode.yml.dist} (91%) create mode 100644 features/dynamic-range.yml rename features/{media-queries-dynamic-range.yml.dist => dynamic-range.yml.dist} (86%) rename features/{media-queries-interaction.yml => interaction.yml} (59%) rename features/{media-queries-interaction.yml.dist => interaction.yml.dist} (96%) create mode 100644 features/inverted-colors.yml rename features/{media-queries-inverted-colors.yml.dist => inverted-colors.yml.dist} (79%) delete mode 100644 features/media-queries-color-gamut.yml delete mode 100644 features/media-queries-display-mode.yml delete mode 100644 features/media-queries-dynamic-range.yml delete mode 100644 features/media-queries-inverted-colors.yml delete mode 100644 features/media-queries-prefers-contrast.yml delete mode 100644 features/media-queries-prefers-reduced-data.yml delete mode 100644 features/media-queries-scripting.yml delete mode 100644 features/media-queries-update.yml delete mode 100644 features/media-queries-video-dynamic-range.yml rename features/{media-queries-overflow.yml => overflow.yml} (53%) rename features/{media-queries-overflow.yml.dist => overflow.yml.dist} (89%) create mode 100644 features/prefers-contrast.yml rename features/{media-queries-prefers-contrast.yml.dist => prefers-contrast.yml.dist} (86%) create mode 100644 features/prefers-reduced-data.yml rename features/{media-queries-prefers-reduced-data.yml.dist => prefers-reduced-data.yml.dist} (74%) rename features/{media-queries-prefers-reduced-motion.yml => prefers-reduced-motion.yml} (65%) rename features/{media-queries-prefers-reduced-motion.yml.dist => prefers-reduced-motion.yml.dist} (93%) rename features/{media-queries-prefers-reduced-transparency.yml => prefers-reduced-transparency.yml} (54%) rename features/{media-queries-prefers-reduced-transparency.yml.dist => prefers-reduced-transparency.yml.dist} (89%) rename features/{media-queries-resolution.yml => resolution.yml} (60%) rename features/{media-queries-resolution.yml.dist => resolution.yml.dist} (95%) create mode 100644 features/scripting.yml rename features/{media-queries-scripting.yml.dist => scripting.yml.dist} (87%) create mode 100644 features/update.yml rename features/{media-queries-update.yml.dist => update.yml.dist} (88%) create mode 100644 features/video-dynamic-range.yml rename features/{media-queries-video-dynamic-range.yml.dist => video-dynamic-range.yml.dist} (78%) diff --git a/.DS_Store b/.DS_Store new file mode 100644 index 0000000000000000000000000000000000000000..d3da6272555d74c7be7fbec9219e7a4915051db1 GIT binary patch literal 6148 zcmeHK%}T>S5Z-O8-BN@e6nb3nS}-Z}P`rd%U%-eSRBA%124l7)sXdfJ&iX<=iO=KA z?glLF!IOxcfz3BNKf600WPccAd^C?-#yX5K0S%F(vPICm)m5{>h+K~`XBnHaJY3|n zEd%{U6Rusb2UvB$3ifUNVWL9teT1_l&I`x+)=|OlEPZyKU;h9Q{AWo;5PKcu^gxp@oX`~h-HBX~l=laGWTB0@SbeGG%dB=$7!G^Vb^C+WswIw&Pfjl;&&f-w-VB)>c-L}Zv4VF{HtKryvoulZBlxPkDxQ!S zAO?s5VqkX|uxEg1?@q~7DKS6{{Ez|MA0#wH&thp%ZyoT#>ofWrh$x`rTLMv9^emPJ z!2`lgDxgW__KCqwI@qO+^DLGIO*-RxW*EoLTs>a6o*nE`hcoUOq%Sc*46HLyH{A}N z|L5?_Y<=Xfr%;a=AO`*!1H3Wz$0I1po~;|@;aMx8-9tmcxDpi*(AO>j(7}DAtDVL# bQHMCsVrdXZLAy=|q>F$igg(T;FEH>0HSkR! literal 0 HcmV?d00001 diff --git a/features/color-gamut.yml b/features/color-gamut.yml new file mode 100644 index 00000000000..0647c851714 --- /dev/null +++ b/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. Values are `srgb` if the device can display at least sRGB, `p3` if the device can display at least Display P3, and `rec2020` if the device can display at least REC. 2020. +spec: https://drafts.csswg.org/mediaqueries-5/#color-gamut +group: media-queries +compat_features: + - css.at-rules.media.color-gamut diff --git a/features/media-queries-color-gamut.yml.dist b/features/color-gamut.yml.dist similarity index 87% rename from features/media-queries-color-gamut.yml.dist rename to features/color-gamut.yml.dist index 33879ffc3f7..dd8f9737471 100644 --- a/features/media-queries-color-gamut.yml.dist +++ b/features/color-gamut.yml.dist @@ -1,4 +1,4 @@ -# Generated from: media-queries-color-gamut.yml +# Generated from: color-gamut.yml # Do not edit this file by hand. Edit the source file instead! status: diff --git a/features/display-mode.yml b/features/display-mode.yml new file mode 100644 index 00000000000..42d1f33cb14 --- /dev/null +++ b/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 diff --git a/features/media-queries-display-mode.yml.dist b/features/display-mode.yml.dist similarity index 91% rename from features/media-queries-display-mode.yml.dist rename to features/display-mode.yml.dist index 0bba7015029..5fb2cd5c2c6 100644 --- a/features/media-queries-display-mode.yml.dist +++ b/features/display-mode.yml.dist @@ -1,4 +1,4 @@ -# Generated from: media-queries-display-mode.yml +# Generated from: display-mode.yml # Do not edit this file by hand. Edit the source file instead! status: diff --git a/features/dynamic-range.yml b/features/dynamic-range.yml new file mode 100644 index 00000000000..e2e711d5a13 --- /dev/null +++ b/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 diff --git a/features/media-queries-dynamic-range.yml.dist b/features/dynamic-range.yml.dist similarity index 86% rename from features/media-queries-dynamic-range.yml.dist rename to features/dynamic-range.yml.dist index 6cd27b67eb7..db478a4481a 100644 --- a/features/media-queries-dynamic-range.yml.dist +++ b/features/dynamic-range.yml.dist @@ -1,4 +1,4 @@ -# Generated from: media-queries-dynamic-range.yml +# Generated from: dynamic-range.yml # Do not edit this file by hand. Edit the source file instead! status: diff --git a/features/media-queries-interaction.yml b/features/interaction.yml similarity index 59% rename from features/media-queries-interaction.yml rename to features/interaction.yml index df905305e28..b675145ab8e 100644 --- a/features/media-queries-interaction.yml +++ b/features/interaction.yml @@ -1,5 +1,5 @@ -name: Interaction media features -description: "The `pointer`, `any-pointer`, `hover`, and `any-hover` CSS media features set styles based on the presence of pointing devices and their ability to hover over elements. For example, a smartphone device would match the `(hover: none) and (pointer: coarse)` media feature." +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, a smartphone device would 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 diff --git a/features/media-queries-interaction.yml.dist b/features/interaction.yml.dist similarity index 96% rename from features/media-queries-interaction.yml.dist rename to features/interaction.yml.dist index d62e5198f7c..cb00782f94f 100644 --- a/features/media-queries-interaction.yml.dist +++ b/features/interaction.yml.dist @@ -1,4 +1,4 @@ -# Generated from: media-queries-interaction.yml +# Generated from: interaction.yml # Do not edit this file by hand. Edit the source file instead! status: diff --git a/features/inverted-colors.yml b/features/inverted-colors.yml new file mode 100644 index 00000000000..b32a01605d2 --- /dev/null +++ b/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 diff --git a/features/media-queries-inverted-colors.yml.dist b/features/inverted-colors.yml.dist similarity index 79% rename from features/media-queries-inverted-colors.yml.dist rename to features/inverted-colors.yml.dist index 513e6faf2c6..d7299363820 100644 --- a/features/media-queries-inverted-colors.yml.dist +++ b/features/inverted-colors.yml.dist @@ -1,4 +1,4 @@ -# Generated from: media-queries-inverted-colors.yml +# Generated from: inverted-colors.yml # Do not edit this file by hand. Edit the source file instead! status: diff --git a/features/media-queries-color-gamut.yml b/features/media-queries-color-gamut.yml deleted file mode 100644 index 10ee5e01444..00000000000 --- a/features/media-queries-color-gamut.yml +++ /dev/null @@ -1,6 +0,0 @@ -name: color-gamut media feature -description: The `color-gamut` media feature sets styles based on the colors a device can display. Values are `srgb` if the device can display at least sRGB, `p3` if the device can display at least Display P3, and `rec2020` if the device can display at least REC. 2020. -spec: https://drafts.csswg.org/mediaqueries-5/#color-gamut -group: media-queries -compat_features: - - css.at-rules.media.color-gamut diff --git a/features/media-queries-display-mode.yml b/features/media-queries-display-mode.yml deleted file mode 100644 index 94aab960a14..00000000000 --- a/features/media-queries-display-mode.yml +++ /dev/null @@ -1,7 +0,0 @@ -name: display-mode media feature -description: The `display-mode` CSS media feature 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 diff --git a/features/media-queries-dynamic-range.yml b/features/media-queries-dynamic-range.yml deleted file mode 100644 index 6a515088605..00000000000 --- a/features/media-queries-dynamic-range.yml +++ /dev/null @@ -1,6 +0,0 @@ -name: dynamic-range media feature -description: The `dynamic-range` CSS media feature 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 diff --git a/features/media-queries-inverted-colors.yml b/features/media-queries-inverted-colors.yml deleted file mode 100644 index b2c1900857e..00000000000 --- a/features/media-queries-inverted-colors.yml +++ /dev/null @@ -1,6 +0,0 @@ -name: inverted-colors media feature -description: The `inverted-colors` CSS media feature 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 diff --git a/features/media-queries-prefers-contrast.yml b/features/media-queries-prefers-contrast.yml deleted file mode 100644 index 0b1bfbcb8d8..00000000000 --- a/features/media-queries-prefers-contrast.yml +++ /dev/null @@ -1,6 +0,0 @@ -name: prefers-contrast media feature -description: The `prefers-contrast` CSS media feature sets styles based on whether the user prefers more or less contrast. -spec: https://drafts.csswg.org/mediaqueries-5/#prefers-contrast -group: media-queries -compat_features: - - css.at-rules.media.prefers-contrast diff --git a/features/media-queries-prefers-reduced-data.yml b/features/media-queries-prefers-reduced-data.yml deleted file mode 100644 index eb290c09ef7..00000000000 --- a/features/media-queries-prefers-reduced-data.yml +++ /dev/null @@ -1,6 +0,0 @@ -name: prefers-reduced-data media feature -description: The `prefers-reduced-data` CSS media feature detects whether the user has a preference for using less internet traffic. For example, you can use this media feature to avoid loading large font files and use a system font instead. -spec: https://drafts.csswg.org/mediaqueries-5/#prefers-reduced-data -group: media-queries -compat_features: - - css.at-rules.media.prefers-reduced-data diff --git a/features/media-queries-scripting.yml b/features/media-queries-scripting.yml deleted file mode 100644 index 0f0dfb2818d..00000000000 --- a/features/media-queries-scripting.yml +++ /dev/null @@ -1,5 +0,0 @@ -name: scripting media feature -description: The `scripting` CSS media feature sets styles based on whether scripting such as JavaScript is available. Values are `enabled` if scripting is available, `initial-only` if scripting is only available on page load (for example, printed or server-rendered content), or `none`. -spec: https://drafts.csswg.org/mediaqueries-5/#scripting -compat_features: - - css.at-rules.media.scripting diff --git a/features/media-queries-update.yml b/features/media-queries-update.yml deleted file mode 100644 index 136244a8433..00000000000 --- a/features/media-queries-update.yml +++ /dev/null @@ -1,6 +0,0 @@ -name: Update frequency media feature -description: The `update` CSS media feature sets styles based on whether and how fast the user's device can modify display after it has been rendered. -spec: https://drafts.csswg.org/mediaqueries-5/#update -group: media-queries -compat_features: - - css.at-rules.media.update diff --git a/features/media-queries-video-dynamic-range.yml b/features/media-queries-video-dynamic-range.yml deleted file mode 100644 index e1db18cd94d..00000000000 --- a/features/media-queries-video-dynamic-range.yml +++ /dev/null @@ -1,6 +0,0 @@ -name: video-dynamic-range media feature -description: The `video-dynamic-range` CSS media feature sets styles based on whether a device can display video with 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.video-dynamic-range diff --git a/features/media-query-range-syntax.yml b/features/media-query-range-syntax.yml index 7315f8102e3..616aba75005 100644 --- a/features/media-query-range-syntax.yml +++ b/features/media-query-range-syntax.yml @@ -1,5 +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 diff --git a/features/media-queries-overflow.yml b/features/overflow.yml similarity index 53% rename from features/media-queries-overflow.yml rename to features/overflow.yml index 641ca555e08..283174431eb 100644 --- a/features/media-queries-overflow.yml +++ b/features/overflow.yml @@ -1,5 +1,5 @@ -name: Overflow media features -description: The `overflow-block` and `overflow-inline` CSS media features 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. +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 diff --git a/features/media-queries-overflow.yml.dist b/features/overflow.yml.dist similarity index 89% rename from features/media-queries-overflow.yml.dist rename to features/overflow.yml.dist index 564a629682e..f1834bc265f 100644 --- a/features/media-queries-overflow.yml.dist +++ b/features/overflow.yml.dist @@ -1,4 +1,4 @@ -# Generated from: media-queries-overflow.yml +# Generated from: overflow.yml # Do not edit this file by hand. Edit the source file instead! status: diff --git a/features/prefers-color-scheme.yml b/features/prefers-color-scheme.yml index f1e76cdd8cf..de3fcf287bd 100644 --- a/features/prefers-color-scheme.yml +++ b/features/prefers-color-scheme.yml @@ -1,5 +1,5 @@ -name: prefers-color-scheme media feature -description: The `prefers-color-scheme` CSS media feature sets styles based on 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: media-queries status: diff --git a/features/prefers-contrast.yml b/features/prefers-contrast.yml new file mode 100644 index 00000000000..f97ad8f0c3a --- /dev/null +++ b/features/prefers-contrast.yml @@ -0,0 +1,6 @@ +name: prefers-contrast media query +description: The `prefers-contrast` CSS media query sets styles based on whether the user prefers more or less contrast. +spec: https://drafts.csswg.org/mediaqueries-5/#prefers-contrast +group: media-queries +compat_features: + - css.at-rules.media.prefers-contrast diff --git a/features/media-queries-prefers-contrast.yml.dist b/features/prefers-contrast.yml.dist similarity index 86% rename from features/media-queries-prefers-contrast.yml.dist rename to features/prefers-contrast.yml.dist index 386746fb37e..ef726ef6ddb 100644 --- a/features/media-queries-prefers-contrast.yml.dist +++ b/features/prefers-contrast.yml.dist @@ -1,4 +1,4 @@ -# Generated from: media-queries-prefers-contrast.yml +# Generated from: prefers-contrast.yml # Do not edit this file by hand. Edit the source file instead! status: diff --git a/features/prefers-reduced-data.yml b/features/prefers-reduced-data.yml new file mode 100644 index 00000000000..02eafca7afc --- /dev/null +++ b/features/prefers-reduced-data.yml @@ -0,0 +1,6 @@ +name: prefers-reduced-data media query +description: The `prefers-reduced-data` CSS media query detects whether the user has a preference for using less internet traffic. For example, you can use this media query to avoid loading large font files and use a system font instead. +spec: https://drafts.csswg.org/mediaqueries-5/#prefers-reduced-data +group: media-queries +compat_features: + - css.at-rules.media.prefers-reduced-data diff --git a/features/media-queries-prefers-reduced-data.yml.dist b/features/prefers-reduced-data.yml.dist similarity index 74% rename from features/media-queries-prefers-reduced-data.yml.dist rename to features/prefers-reduced-data.yml.dist index 8d73b4dfddb..41f305e55da 100644 --- a/features/media-queries-prefers-reduced-data.yml.dist +++ b/features/prefers-reduced-data.yml.dist @@ -1,4 +1,4 @@ -# Generated from: media-queries-prefers-reduced-data.yml +# Generated from: prefers-reduced-data.yml # Do not edit this file by hand. Edit the source file instead! status: diff --git a/features/media-queries-prefers-reduced-motion.yml b/features/prefers-reduced-motion.yml similarity index 65% rename from features/media-queries-prefers-reduced-motion.yml rename to features/prefers-reduced-motion.yml index f0f98f84054..17e2b804515 100644 --- a/features/media-queries-prefers-reduced-motion.yml +++ b/features/prefers-reduced-motion.yml @@ -1,5 +1,5 @@ -name: prefers-reduced-motion media feature -description: The `prefers-reduced-motion` CSS media feature sets styles based on whether the user prefers to minimize the amount of non-essential animations on the device. +name: prefers-reduced-motion media query +description: The `prefers-reduced-motion` CSS media query sets styles based on whether the user prefers to minimize the amount of non-essential animations on the device. spec: - https://drafts.csswg.org/mediaqueries-5/#prefers-reduced-motion - https://wicg.github.io/user-preference-media-features-headers/#sec-ch-prefers-reduced-motion diff --git a/features/media-queries-prefers-reduced-motion.yml.dist b/features/prefers-reduced-motion.yml.dist similarity index 93% rename from features/media-queries-prefers-reduced-motion.yml.dist rename to features/prefers-reduced-motion.yml.dist index 3629fa41b32..f6543eab73b 100644 --- a/features/media-queries-prefers-reduced-motion.yml.dist +++ b/features/prefers-reduced-motion.yml.dist @@ -1,4 +1,4 @@ -# Generated from: media-queries-prefers-reduced-motion.yml +# Generated from: prefers-reduced-motion.yml # Do not edit this file by hand. Edit the source file instead! status: diff --git a/features/media-queries-prefers-reduced-transparency.yml b/features/prefers-reduced-transparency.yml similarity index 54% rename from features/media-queries-prefers-reduced-transparency.yml rename to features/prefers-reduced-transparency.yml index e3e401a53bd..acdaba6c0d3 100644 --- a/features/media-queries-prefers-reduced-transparency.yml +++ b/features/prefers-reduced-transparency.yml @@ -1,5 +1,5 @@ -name: prefers-reduced-transparency media feature -description: The `prefers-reduced-transparency` CSS media feature sets styles based on whether the user prefers to reduce the amount of transparent effects on their device, for example to improve contrast and readability. +name: prefers-reduced-transparency media query +description: The `prefers-reduced-transparency` CSS media query sets styles based on whether the user prefers to reduce the amount of transparent effects on their device, for example to improve contrast and readability. spec: - https://drafts.csswg.org/mediaqueries-5/#prefers-reduced-transparency - https://wicg.github.io/user-preference-media-features-headers/#sec-ch-prefers-reduced-transparency diff --git a/features/media-queries-prefers-reduced-transparency.yml.dist b/features/prefers-reduced-transparency.yml.dist similarity index 89% rename from features/media-queries-prefers-reduced-transparency.yml.dist rename to features/prefers-reduced-transparency.yml.dist index b13f2b5c813..991cd7b7085 100644 --- a/features/media-queries-prefers-reduced-transparency.yml.dist +++ b/features/prefers-reduced-transparency.yml.dist @@ -1,4 +1,4 @@ -# Generated from: media-queries-prefers-reduced-transparency.yml +# Generated from: prefers-reduced-transparency.yml # Do not edit this file by hand. Edit the source file instead! status: diff --git a/features/media-queries-resolution.yml b/features/resolution.yml similarity index 60% rename from features/media-queries-resolution.yml rename to features/resolution.yml index 728861847c3..291aec0d725 100644 --- a/features/media-queries-resolution.yml +++ b/features/resolution.yml @@ -1,5 +1,5 @@ -name: resolution media feature -description: The `resolution` CSS media feature sets styles based on the pixel density, or how many pixels a device uses to display a single CSS pixel. +name: resolution media query +description: The `resolution` CSS media query sets styles based on the pixel density, or how many pixels a device uses to display a single CSS pixel. spec: https://drafts.csswg.org/mediaqueries-5/#resolution caniuse: css-media-resolution compat_features: diff --git a/features/media-queries-resolution.yml.dist b/features/resolution.yml.dist similarity index 95% rename from features/media-queries-resolution.yml.dist rename to features/resolution.yml.dist index ef837ce57f7..b8e1a39746a 100644 --- a/features/media-queries-resolution.yml.dist +++ b/features/resolution.yml.dist @@ -1,4 +1,4 @@ -# Generated from: media-queries-resolution.yml +# Generated from: resolution.yml # Do not edit this file by hand. Edit the source file instead! status: diff --git a/features/scripting.yml b/features/scripting.yml new file mode 100644 index 00000000000..7fae56cdfec --- /dev/null +++ b/features/scripting.yml @@ -0,0 +1,5 @@ +name: scripting media query +description: The `scripting` CSS media query sets styles based on whether scripting such as JavaScript is available. Values are `enabled` if scripting is available, `initial-only` if scripting is only available on page load (for example, printed or server-rendered content), or `none`. +spec: https://drafts.csswg.org/mediaqueries-5/#scripting +compat_features: + - css.at-rules.media.scripting diff --git a/features/media-queries-scripting.yml.dist b/features/scripting.yml.dist similarity index 87% rename from features/media-queries-scripting.yml.dist rename to features/scripting.yml.dist index fbfabdcd6fa..09b70e00436 100644 --- a/features/media-queries-scripting.yml.dist +++ b/features/scripting.yml.dist @@ -1,4 +1,4 @@ -# Generated from: media-queries-scripting.yml +# Generated from: scripting.yml # Do not edit this file by hand. Edit the source file instead! status: diff --git a/features/update.yml b/features/update.yml new file mode 100644 index 00000000000..b7c58c7ad5c --- /dev/null +++ b/features/update.yml @@ -0,0 +1,6 @@ +name: Update frequency media query +description: The `update` CSS media query sets styles based on whether and how fast the user's device can modify display after it has been rendered. +spec: https://drafts.csswg.org/mediaqueries-5/#update +group: media-queries +compat_features: + - css.at-rules.media.update diff --git a/features/media-queries-update.yml.dist b/features/update.yml.dist similarity index 88% rename from features/media-queries-update.yml.dist rename to features/update.yml.dist index 9ad43de534e..818b1a07c0d 100644 --- a/features/media-queries-update.yml.dist +++ b/features/update.yml.dist @@ -1,4 +1,4 @@ -# Generated from: media-queries-update.yml +# Generated from: update.yml # Do not edit this file by hand. Edit the source file instead! status: diff --git a/features/video-dynamic-range.yml b/features/video-dynamic-range.yml new file mode 100644 index 00000000000..5de548ab3ba --- /dev/null +++ b/features/video-dynamic-range.yml @@ -0,0 +1,6 @@ +name: video-dynamic-range media query +description: The `video-dynamic-range` CSS media query sets styles based on whether a device can display video with 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.video-dynamic-range diff --git a/features/media-queries-video-dynamic-range.yml.dist b/features/video-dynamic-range.yml.dist similarity index 78% rename from features/media-queries-video-dynamic-range.yml.dist rename to features/video-dynamic-range.yml.dist index 9c445af6e57..21a28b1159a 100644 --- a/features/media-queries-video-dynamic-range.yml.dist +++ b/features/video-dynamic-range.yml.dist @@ -1,4 +1,4 @@ -# Generated from: media-queries-video-dynamic-range.yml +# Generated from: video-dynamic-range.yml # Do not edit this file by hand. Edit the source file instead! status: From bfdd479930361cb5473e7e235fca3e0748f853fe Mon Sep 17 00:00:00 2001 From: James Stuckey Weber Date: Mon, 16 Sep 2024 15:53:03 -0400 Subject: [PATCH 13/18] Remove dsstore --- .DS_Store | Bin 6148 -> 0 bytes 1 file changed, 0 insertions(+), 0 deletions(-) delete mode 100644 .DS_Store diff --git a/.DS_Store b/.DS_Store deleted file mode 100644 index d3da6272555d74c7be7fbec9219e7a4915051db1..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 6148 zcmeHK%}T>S5Z-O8-BN@e6nb3nS}-Z}P`rd%U%-eSRBA%124l7)sXdfJ&iX<=iO=KA z?glLF!IOxcfz3BNKf600WPccAd^C?-#yX5K0S%F(vPICm)m5{>h+K~`XBnHaJY3|n zEd%{U6Rusb2UvB$3ifUNVWL9teT1_l&I`x+)=|OlEPZyKU;h9Q{AWo;5PKcu^gxp@oX`~h-HBX~l=laGWTB0@SbeGG%dB=$7!G^Vb^C+WswIw&Pfjl;&&f-w-VB)>c-L}Zv4VF{HtKryvoulZBlxPkDxQ!S zAO?s5VqkX|uxEg1?@q~7DKS6{{Ez|MA0#wH&thp%ZyoT#>ofWrh$x`rTLMv9^emPJ z!2`lgDxgW__KCqwI@qO+^DLGIO*-RxW*EoLTs>a6o*nE`hcoUOq%Sc*46HLyH{A}N z|L5?_Y<=Xfr%;a=AO`*!1H3Wz$0I1po~;|@;aMx8-9tmcxDpi*(AO>j(7}DAtDVL# bQHMCsVrdXZLAy=|q>F$igg(T;FEH>0HSkR! From 0c150de3bed5c75fe7c9cefe987e7e7de437bd3f Mon Sep 17 00:00:00 2001 From: James Stuckey Weber Date: Mon, 16 Sep 2024 15:59:44 -0400 Subject: [PATCH 14/18] Remove color gamut values --- features/color-gamut.yml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/features/color-gamut.yml b/features/color-gamut.yml index 0647c851714..df529436f3b 100644 --- a/features/color-gamut.yml +++ b/features/color-gamut.yml @@ -1,5 +1,5 @@ name: color-gamut media query -description: The `color-gamut` media query sets styles based on the colors a device can display. Values are `srgb` if the device can display at least sRGB, `p3` if the device can display at least Display P3, and `rec2020` if the device can display at least REC. 2020. +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: From 8e8aba6954f5380197ff2a4a6b45b9cb9ebbfdd3 Mon Sep 17 00:00:00 2001 From: James Stuckey Weber Date: Tue, 17 Sep 2024 14:31:47 -0400 Subject: [PATCH 15/18] Add more media queries --- features/media-queries.yml | 5 +++ features/media-queries.yml.dist | 48 ++++++++++++++++++++++++++ features/prefers-color-scheme.yml | 1 + features/prefers-color-scheme.yml.dist | 6 ++++ 4 files changed, 60 insertions(+) diff --git a/features/media-queries.yml b/features/media-queries.yml index 2d24dcd2f73..ead96e40248 100644 --- a/features/media-queries.yml +++ b/features/media-queries.yml @@ -16,3 +16,8 @@ compat_features: - 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 diff --git a/features/media-queries.yml.dist b/features/media-queries.yml.dist index 029440276a1..07e361f656c 100644 --- a/features/media-queries.yml.dist +++ b/features/media-queries.yml.dist @@ -27,6 +27,7 @@ compat_features: # safari: "3" # safari_ios: "1" - css.at-rules.media + - css.at-rules.media.media_features # baseline: high # baseline_low_date: 2015-07-29 @@ -71,6 +72,19 @@ compat_features: - 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 @@ -84,6 +98,31 @@ compat_features: # 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" @@ -92,3 +131,12 @@ compat_features: # 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 diff --git a/features/prefers-color-scheme.yml b/features/prefers-color-scheme.yml index de3fcf287bd..e7bee53c7c4 100644 --- a/features/prefers-color-scheme.yml +++ b/features/prefers-color-scheme.yml @@ -7,4 +7,5 @@ status: 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 diff --git a/features/prefers-color-scheme.yml.dist b/features/prefers-color-scheme.yml.dist index a30b41e3ab1..117dd28347f 100644 --- a/features/prefers-color-scheme.yml.dist +++ b/features/prefers-color-scheme.yml.dist @@ -35,6 +35,12 @@ compat_features: # edge: "93" - http.headers.Sec-CH-Prefers-Color-Scheme + # baseline: false + # support: + # safari: "12.1" + # safari_ios: "13" + - css.at-rules.media.prefers-color-scheme.no-preference + # baseline: false # support: # firefox: "105" From 280587bb9419230e733d53777a1687437d760350 Mon Sep 17 00:00:00 2001 From: James Stuckey Weber Date: Wed, 18 Sep 2024 11:34:14 -0400 Subject: [PATCH 16/18] Address review --- features/interaction.yml | 2 +- features/prefers-contrast.yml | 2 +- features/prefers-reduced-data.yml | 2 +- features/prefers-reduced-motion.yml | 6 ++---- features/prefers-reduced-transparency.yml | 2 +- features/scripting.yml | 3 ++- features/update.yml | 2 +- 7 files changed, 9 insertions(+), 10 deletions(-) diff --git a/features/interaction.yml b/features/interaction.yml index b675145ab8e..ea4bc4d6529 100644 --- a/features/interaction.yml +++ b/features/interaction.yml @@ -1,5 +1,5 @@ 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, a smartphone device would match the `(hover: none) and (pointer: coarse)` media query." +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 diff --git a/features/prefers-contrast.yml b/features/prefers-contrast.yml index f97ad8f0c3a..4e4d8437420 100644 --- a/features/prefers-contrast.yml +++ b/features/prefers-contrast.yml @@ -1,5 +1,5 @@ name: prefers-contrast media query -description: The `prefers-contrast` CSS media query sets styles based on whether the user prefers more or less contrast. +description: The `prefers-contrast` CSS media query sets styles based on whether the user prefers more or less contrast, the difference between foreground and background colors. spec: https://drafts.csswg.org/mediaqueries-5/#prefers-contrast group: media-queries compat_features: diff --git a/features/prefers-reduced-data.yml b/features/prefers-reduced-data.yml index 02eafca7afc..3a52e31c456 100644 --- a/features/prefers-reduced-data.yml +++ b/features/prefers-reduced-data.yml @@ -1,5 +1,5 @@ name: prefers-reduced-data media query -description: The `prefers-reduced-data` CSS media query detects whether the user has a preference for using less internet traffic. For example, you can use this media query to avoid loading large font files and use a system font instead. +description: The `prefers-reduced-data` CSS media query detects whether the user has a preference for using less network traffic. For example, you can use this media query to avoid loading large font files and use a system font instead. spec: https://drafts.csswg.org/mediaqueries-5/#prefers-reduced-data group: media-queries compat_features: diff --git a/features/prefers-reduced-motion.yml b/features/prefers-reduced-motion.yml index 17e2b804515..6b2aeead1f7 100644 --- a/features/prefers-reduced-motion.yml +++ b/features/prefers-reduced-motion.yml @@ -1,8 +1,6 @@ name: prefers-reduced-motion media query -description: The `prefers-reduced-motion` CSS media query sets styles based on whether the user prefers to minimize the amount of non-essential animations on the device. -spec: - - https://drafts.csswg.org/mediaqueries-5/#prefers-reduced-motion - - https://wicg.github.io/user-preference-media-features-headers/#sec-ch-prefers-reduced-motion +description: The `prefers-reduced-motion` CSS media query sets styles based on whether the user prefers to minimize the amount of non-essential animations on the device, such as scrolling, panning, zooming, and strobing. +spec: https://drafts.csswg.org/mediaqueries-5/#prefers-reduced-motion caniuse: prefers-reduced-motion group: media-queries status: diff --git a/features/prefers-reduced-transparency.yml b/features/prefers-reduced-transparency.yml index acdaba6c0d3..ceb478f39df 100644 --- a/features/prefers-reduced-transparency.yml +++ b/features/prefers-reduced-transparency.yml @@ -1,5 +1,5 @@ name: prefers-reduced-transparency media query -description: The `prefers-reduced-transparency` CSS media query sets styles based on whether the user prefers to reduce the amount of transparent effects on their device, for example to improve contrast and readability. +description: The `prefers-reduced-transparency` CSS media query sets styles based on whether the user prefers to reduce the amount of transparent effects on their device, for example to improve contrast and legibility. spec: - https://drafts.csswg.org/mediaqueries-5/#prefers-reduced-transparency - https://wicg.github.io/user-preference-media-features-headers/#sec-ch-prefers-reduced-transparency diff --git a/features/scripting.yml b/features/scripting.yml index 7fae56cdfec..fa8fb63df8f 100644 --- a/features/scripting.yml +++ b/features/scripting.yml @@ -1,5 +1,6 @@ name: scripting media query -description: The `scripting` CSS media query sets styles based on whether scripting such as JavaScript is available. Values are `enabled` if scripting is available, `initial-only` if scripting is only available on page load (for example, printed or server-rendered content), or `none`. +description: The `scripting` CSS media query sets styles based on whether scripting such as JavaScript is available. Values are `enabled` if scripting is available, `initial-only` if scripting is only available on page load (for example, printed content), or `none`. spec: https://drafts.csswg.org/mediaqueries-5/#scripting +group: media-queries compat_features: - css.at-rules.media.scripting diff --git a/features/update.yml b/features/update.yml index b7c58c7ad5c..2ae5e5bd5af 100644 --- a/features/update.yml +++ b/features/update.yml @@ -1,5 +1,5 @@ name: Update frequency media query -description: The `update` CSS media query sets styles based on whether and how fast the user's device can modify display after it has been rendered. +description: The `update` CSS media query sets styles based on whether and how fast the user's device can modify display after it has been rendered. For example, you can avoid animations on devices that aren't fast enough to display them smoothly. spec: https://drafts.csswg.org/mediaqueries-5/#update group: media-queries compat_features: From 7453fff50de2b39e3b96fdf609f1504ba144aecb Mon Sep 17 00:00:00 2001 From: James Stuckey Weber Date: Wed, 18 Sep 2024 11:35:32 -0400 Subject: [PATCH 17/18] Remove resolution media query --- features/resolution.yml | 11 -------- features/resolution.yml.dist | 53 ------------------------------------ 2 files changed, 64 deletions(-) delete mode 100644 features/resolution.yml delete mode 100644 features/resolution.yml.dist diff --git a/features/resolution.yml b/features/resolution.yml deleted file mode 100644 index 291aec0d725..00000000000 --- a/features/resolution.yml +++ /dev/null @@ -1,11 +0,0 @@ -name: resolution media query -description: The `resolution` CSS media query sets styles based on the pixel density, or how many pixels a device uses to display a single CSS pixel. -spec: https://drafts.csswg.org/mediaqueries-5/#resolution -caniuse: css-media-resolution -compat_features: - - css.at-rules.media.resolution - - css.types.resolution - - css.types.resolution.dpcm - - css.types.resolution.dpi - - css.types.resolution.dppx - - css.types.resolution.x diff --git a/features/resolution.yml.dist b/features/resolution.yml.dist deleted file mode 100644 index b8e1a39746a..00000000000 --- a/features/resolution.yml.dist +++ /dev/null @@ -1,53 +0,0 @@ -# Generated from: resolution.yml -# Do not edit this file by hand. Edit the source file instead! - -status: - baseline: false - support: - chrome: "68" - chrome_android: "68" - edge: "79" - firefox: "62" - firefox_android: "62" -compat_features: - # baseline: low - # baseline_low_date: 2022-09-12 - # support: - # chrome: "29" - # chrome_android: "29" - # edge: "12" - # firefox: "8" - # firefox_android: "8" - # safari: "16" - # safari_ios: "16" - - css.at-rules.media.resolution - - # baseline: false - # support: - # chrome: "29" - # chrome_android: "29" - # edge: "12" - # firefox: "8" - # firefox_android: "8" - - css.types.resolution - - css.types.resolution.dpcm - - css.types.resolution.dpi - - # baseline: false - # support: - # chrome: "29" - # chrome_android: "29" - # edge: "12" - # firefox: "16" - # firefox_android: "16" - - css.types.resolution.dppx - - # ⬇️ Same status as overall feature ⬇️ - # baseline: false - # support: - # chrome: "68" - # chrome_android: "68" - # edge: "79" - # firefox: "62" - # firefox_android: "62" - - css.types.resolution.x From 586f86dec3cd1bfb18f969886bbc83d1bb22acdf Mon Sep 17 00:00:00 2001 From: James Stuckey Weber Date: Wed, 18 Sep 2024 11:44:17 -0400 Subject: [PATCH 18/18] Review --- features/prefers-contrast.yml | 2 +- features/prefers-reduced-transparency.yml | 4 +--- 2 files changed, 2 insertions(+), 4 deletions(-) diff --git a/features/prefers-contrast.yml b/features/prefers-contrast.yml index 4e4d8437420..112ccf71cdc 100644 --- a/features/prefers-contrast.yml +++ b/features/prefers-contrast.yml @@ -1,5 +1,5 @@ name: prefers-contrast media query -description: The `prefers-contrast` CSS media query sets styles based on whether the user prefers more or less contrast, the difference between foreground and background colors. +description: The `prefers-contrast` CSS media query sets styles based on whether the user prefers more or less contrast, the difference between foreground and background colors. spec: https://drafts.csswg.org/mediaqueries-5/#prefers-contrast group: media-queries compat_features: diff --git a/features/prefers-reduced-transparency.yml b/features/prefers-reduced-transparency.yml index ceb478f39df..27dc93943b1 100644 --- a/features/prefers-reduced-transparency.yml +++ b/features/prefers-reduced-transparency.yml @@ -1,8 +1,6 @@ name: prefers-reduced-transparency media query description: The `prefers-reduced-transparency` CSS media query sets styles based on whether the user prefers to reduce the amount of transparent effects on their device, for example to improve contrast and legibility. -spec: - - https://drafts.csswg.org/mediaqueries-5/#prefers-reduced-transparency - - https://wicg.github.io/user-preference-media-features-headers/#sec-ch-prefers-reduced-transparency +spec: https://drafts.csswg.org/mediaqueries-5/#prefers-reduced-transparency group: media-queries compat_features: - css.at-rules.media.prefers-reduced-transparency