Add Media queries #1673
Add Media queries #1673
Conversation
github-actions
bot
added
the
feature definition
features/media-queries-update.yml
Outdated
| @@ -0,0 +1,6 @@ | |||
| name: Update frequency media feature | |||
There was a problem hiding this comment.
I was unsure about name here- the key is update but I think `Update frequency" is more useful as a description.
features/media-queries.yml
Outdated
| @@ -0,0 +1,18 @@ | |||
| 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. | |||
There was a problem hiding this comment.
| 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. For example, `@media (width <= 700px) and (orientation:portrait)` lets you apply styles only when the device screen is less than 700 pixels wide and is taller than wide. |
There was a problem hiding this comment.
I took the first part of your suggestion, but replaced the example with the recommendation for describing media features here. I ran over the character limit otherwise.
| @@ -0,0 +1,6 @@ | |||
| name: color-gamut media feature | |||
There was a problem hiding this comment.
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-gamut while the name is color-gamut media feature.
Perhaps we should only use the term media-feature for media feature things, and then add a short mention in the main media-queries feature like "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".
There was a problem hiding this comment.
I struggled on the naming for this. I think media feature is perhaps more spec language than developer language, but I think your addition to media-queries makes 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 recommend media-feature-color-gamut, color-gamut-media-feature, or just color-gamut?
There was a problem hiding this comment.
I think that's a good clarification to the media-queries feature, and still I would consider naming the individual features e.g. color-gamut media query as 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.
| @@ -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 rec2020 will be needed soon.
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.
| @@ -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, standalone and minimal-ui only really make sense when the site was installed as a PWA on the device, in which case the user doesn't really consider the site as running in a "browser" any longer.
How about:
| 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. For example, an installed Progressive Web App can be displayed in a standalone window by setting `"display": "standalone"` in its web app manifest file. |
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.
| - css.at-rules.media.orientation | ||
| - css.at-rules.media.aspect-ratio |
There was a problem hiding this comment.
Should we capture these 2 media features, and maybe others, as separate features?
I think keeping height and width here is fine, this is what the vast majority of media query usage happens. But the other features feel sufficiently specific to be in their own web-features files.
There was a problem hiding this comment.
I opted not to create separate features for pre-2015 media queries, thinking it would be easy to split if users requested it, but I could go either way.
| @@ -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.
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 rec2020 will be needed soon.
| @@ -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.
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.
| @@ -0,0 +1,6 @@ | |||
| name: color-gamut media feature | |||
There was a problem hiding this comment.
I struggled on the naming for this. I think media feature is perhaps more spec language than developer language, but I think your addition to media-queries makes 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 recommend media-feature-color-gamut, color-gamut-media-feature, or just color-gamut?
| @@ -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.
Correct, it's an OS accessibility option.
features/media-queries-overflow.yml
Outdated
| @@ -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.
I was confused by "container element" due to the overloaded term "element", so I used MDN's language around the initial containing block, "viewport or page area".
I'm ok not having an example for none here, but the idea is, if there is overflowing content on a webpage displayed on a billboard, there is no way a viewer can access the overflowed content.
features/media-queries.yml
Outdated
| @@ -0,0 +1,18 @@ | |||
| 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. | |||
There was a problem hiding this comment.
I took the first part of your suggestion, but replaced the example with the recommendation for describing media features here. I ran over the character limit otherwise.
| - css.at-rules.media.orientation | ||
| - css.at-rules.media.aspect-ratio |
There was a problem hiding this comment.
I opted not to create separate features for pre-2015 media queries, thinking it would be easy to split if users requested it, but I could go either way.
features/prefers-reduced-data.yml
Outdated
| @@ -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. | |||
There was a problem hiding this comment.
me dodging having to make a decision about Internet or internet:
| 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. |
features/resolution.yml.dist
Outdated
| # firefox_android: "8" | ||
| # safari: "16" | ||
| # safari_ios: "16" | ||
| - css.at-rules.media.resolution |
There was a problem hiding this comment.
I'm very suspicious of this data. MDN says a unit is required. I think this whole feature is actually busted in Safari, or at very least it hasn't been tested recently. See https://bugs.webkit.org/show_bug.cgi?id=78087
I suspect we'll want to land the rest of this, but split this feature into its own PR while we fix BCD.
color-index, which is old but never supported in Firefox. It doesn't warrant its own feature.prefers-color-scheme(I did not rename feature to match the other queries, as that would be a breaking change).prefers-contrast(for Cover the features listed in the State Of XYZ surveys #1624)prefers-reduced-data(for Cover the features listed in the State Of XYZ surveys #1624)prefers-reduced-motion(for Cover the features listed in the State Of XYZ surveys #1624)prefers-reduced-transparencyhttp.headers.Sec-CH-Prefers-Contrastthat I would otherwise use on theprefers-contrastfeature, as well ashttp.headers.Sec-CH-Forced-Colorsthat I would use on Add forced-colors #1651.color-gamutmedia featuredisplay-modemedia featuredynamic-rangemedia featurevideo-dynamic-rangemedia featureinverted-colorsmedia featurescriptingmedia featureupdatemedia feature