Add Media queries #1673
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +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. | ||
|
There was a problem hiding this comment. Not sure if color-gamut is a field that evolves quickly, but if it is, we might want to drop the "Values are ..." sentence, to avoid having to maintain this to always be complete. There was a problem hiding this comment. Based on conversations with spec authors and implementors, this should be a rather stable list. There are privacy issues with going more granular, and it's unlikely that gamuts larger than There was a problem hiding this comment. Since the color() function now supports a number of additional spaces with distinct gamuts, I do wonder if there will be a push for consistency? There was a problem hiding this comment. Good point, I'll remove the values. |
||
| spec: https://drafts.csswg.org/mediaqueries-5/#color-gamut | ||
| group: media-queries | ||
| compat_features: | ||
| - css.at-rules.media.color-gamut | ||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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 |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,7 @@ | ||
| 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 |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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 |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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 |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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 |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,12 @@ | ||
| 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: | ||
| - css.at-rules.media.hover | ||
| - css.at-rules.media.any-hover | ||
| - css.at-rules.media.any-pointer | ||
| - css.at-rules.media.pointer |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,68 @@ | ||
| # Generated from: media-queries-interaction.yml | ||
| # Do not edit this file by hand. Edit the source file instead! | ||
|
|
||
| status: | ||
| baseline: high | ||
| baseline_low_date: 2018-12-11 | ||
| baseline_high_date: 2021-06-11 | ||
| support: | ||
| chrome: "41" | ||
| chrome_android: "41" | ||
| edge: "12" | ||
| firefox: "64" | ||
| firefox_android: "64" | ||
| safari: "9" | ||
| safari_ios: "9" | ||
| compat_features: | ||
| # baseline: high | ||
| # baseline_low_date: 2018-12-11 | ||
| # baseline_high_date: 2021-06-11 | ||
| # support: | ||
| # chrome: "38" | ||
| # chrome_android: "50" | ||
| # edge: "12" | ||
| # firefox: "64" | ||
| # firefox_android: "64" | ||
| # safari: "9" | ||
| # safari_ios: "9" | ||
| - css.at-rules.media.hover | ||
|
|
||
| # ⬇️ Same status as overall feature ⬇️ | ||
| # baseline: high | ||
| # baseline_low_date: 2018-12-11 | ||
| # baseline_high_date: 2021-06-11 | ||
| # support: | ||
| # chrome: "41" | ||
| # chrome_android: "41" | ||
| # edge: "12" | ||
| # firefox: "64" | ||
| # firefox_android: "64" | ||
| # safari: "9" | ||
| # safari_ios: "9" | ||
| - css.at-rules.media.any-pointer | ||
|
|
||
| # baseline: high | ||
| # baseline_low_date: 2018-12-11 | ||
| # baseline_high_date: 2021-06-11 | ||
| # support: | ||
| # chrome: "41" | ||
| # chrome_android: "41" | ||
| # edge: "16" | ||
| # firefox: "64" | ||
| # firefox_android: "64" | ||
| # safari: "9" | ||
| # safari_ios: "9" | ||
| - css.at-rules.media.any-hover | ||
|
|
||
| # baseline: high | ||
| # baseline_low_date: 2018-12-11 | ||
| # baseline_high_date: 2021-06-11 | ||
| # support: | ||
| # chrome: "41" | ||
| # chrome_android: "50" | ||
| # edge: "12" | ||
| # firefox: "64" | ||
| # firefox_android: "64" | ||
| # safari: "9" | ||
| # safari_ios: "9" | ||
| - css.at-rules.media.pointer |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +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, 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 |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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 |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,9 @@ | ||
| 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. | ||
| 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 |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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 |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,6 @@ | ||
| 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 |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,16 @@ | ||
| # Generated from: media-queries-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 |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,6 @@ | ||
| 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 |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,8 @@ | ||
| # Generated from: media-queries-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 |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,12 @@ | ||
| 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 | ||
| caniuse: prefers-reduced-motion | ||
| group: media-queries | ||
| 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 |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,36 @@ | ||
| # Generated from: media-queries-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 |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,9 @@ | ||
| 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 | ||
| group: media-queries | ||
| compat_features: | ||
| - css.at-rules.media.prefers-reduced-transparency | ||
| - http.headers.Sec-CH-Prefers-Reduced-Transparency |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,24 @@ | ||
| # Generated from: media-queries-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 |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,11 @@ | ||
| 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: | ||
| - css.at-rules.media.resolution | ||
| - css.types.resolution | ||
| - css.types.resolution.dpcm | ||
| - css.types.resolution.dpi | ||
| - css.types.resolution.dppx | ||
| - css.types.resolution.x |
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Applies to other files too: we don't explain here the difference between media query, media type, and media feature. I don't know that we need to do this, we're not a documentation website like MDN. But here, for example, the ID is
media-queries-color-gamutwhile the name iscolor-gamut media feature.Perhaps we should only use the term
media-featurefor media feature things, and then add a short mention in the mainmedia-queriesfeature like "Media queries are composed of an optional media type such asscreenorprint, and one or more mandatory media features, such asprefers-reduced-animations".There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I struggled on the naming for this. I think
media featureis perhaps more spec language than developer language, but I think your addition tomedia-queriesmakes sense.For the
id, I'm realizing that I was essentially adding the group to the file name, with the side benefit of being able to see them together in the file list. Would you recommendmedia-feature-color-gamut,color-gamut-media-feature, or justcolor-gamut?There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I think that's a good clarification to the
media-queriesfeature, and still I would consider naming the individual features e.g.color-gamut media queryas a more common way for developers to talk about these features.I don't have a strong sense on IDs, but looking at what's there, I think we're past the point of naming things in a way that is nicely sorted. Folders by group would be more helpful on that front.