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 user's browser is in `fullscreen`, `standalone`, `minimal-ui,` `browser`, or `picture-in-picture` mode. | ||||||
|
There was a problem hiding this comment. "based on whether the user's browser" is a bit incorrect here. For example, How about:
Suggested change
There was a problem hiding this comment. Good point on "web page". I removed the example because it was over the 300 character limit, and it seemed more about a PWA feature than about the media query itself, but am not opposed to an example here. |
||||||
| 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,11 @@ | ||
| name: Interaction media queries | ||
jamesnw marked this conversation as resolved.
Show resolved
Hide resolved
|
||
| 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)`. | ||
jamesnw marked this conversation as resolved.
Show resolved
Hide resolved
|
||
| 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 | ||
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. | ||
|
There was a problem hiding this comment. This description screams for a "Such as when ...", in order to make it easier to understand when/why/how a user might do that. Is this an OS setting similar to high contrast modes? There was a problem hiding this comment. Correct, it's an OS accessibility option. |
||
| 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 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). | ||||||
|
There was a problem hiding this comment.
Suggested change
Since this can be used for printers, I don't think saying user's device helps here. Also removing "screen" for the same reason. I'm not sure about the second sentence with the different values. The billboard example confuses me a bit. When would that happen? So I tried to rephrase above. There was a problem hiding this comment. I was confused by "container element" due to the overloaded term "element", so I used MDN's language around the I'm ok not having an example for |
||||||
| 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 | ||
jamesnw marked this conversation as resolved.
Show resolved
Hide resolved
|
||
| description: The `prefers-contrast` CSS media feature detects the requested contrast, more or less. | ||
jamesnw marked this conversation as resolved.
Show resolved
Hide resolved
|
||
| 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 | ||
| description: The `prefers-reduced-data` CSS media feature detects whether the user has a preference for using less internet traffic. | ||
jamesnw marked this conversation as resolved.
Show resolved
Hide resolved
|
||
| 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 | ||
| description: The `prefers-reduced-motion` CSS media feature detects whether the user requested less non-essential animation. | ||
jamesnw marked this conversation as resolved.
Show resolved
Hide resolved
|
||
| 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 | ||
| description: The `prefers-reduced-transparency` CSS media feature detects whether the user requested less transparent effects, which can improve contrast and readability. | ||
jamesnw marked this conversation as resolved.
Show resolved
Hide resolved
|
||
| 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 |
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,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 |
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.