Adds media queries to CSS which allow a page to detect the current display device’s support for HDR. This feature adds two new CSS media queries: 'dynamic-range' and 'video-dynamic-range', both of which may be one of 'standard' or 'high'. Chrome will resolve these queries according to the capabilities of the display device the browser window is currently positioned on, allowing pages to toggle CSS rules accordingly or respond in Javascript via 'window.matchMedia()'.
As HDR-supported displays become more common, web developers need ways to enable HDR content on their web pages without compromising the experience for users of non-HDR displays, or mixed-HDR multi-display setups. CSS already provides the 'media query' concept for toggling rules based on display device characteristics, and this feature extends that set of queries to enable detecting HDR support on the current display device.
No specific DevTools support
Is this feature fully tested by web-platform-tests?
Yeshttps://wpt.fyi/results/css/mediaqueries/dynamic-range.html
Flag name
CSSDynamicRangeMediaQueriesRequires code in //chrome?
FalseTracking bug
https://crbug.com/1224711Estimated milestones
97Link to entry on the Chrome Platform Status
https://chromestatus.com/feature/5680926106320896This intent message was generated by Chrome Platform Status.
--
You received this message because you are subscribed to the Google Groups "blink-dev" group.
To unsubscribe from this group and stop receiving emails from it, send an email to blink-dev+...@chromium.org.
To view this discussion on the web visit https://groups.google.com/a/chromium.org/d/msgid/blink-dev/CA%2BF%3DP4hQtag7Ja_7HF4jRHbuC8h5-_0TzjoJvVEMHmrUeZYW9g%40mail.gmail.com.
Styles with these media queries can be viewed and edited in the devtools frontend, albeit without proper highlighting. I've created pull requests on the relevant libraries used in the devtools frontend to enable this. https://github.com/stylelint/stylelint/pull/5613 https://github.com/codemirror/CodeMirror/pull/6803
On Wed, Oct 20, 2021 at 5:44 PM Will Cassella <cas...@chromium.org> wrote:
To unsubscribe from this group and stop receiving emails from it, send an email to blink-dev+unsubscribe@chromium.org.
Thanks for the feedback! I've updated that section:
DebuggabilityStyles with these media queries can be viewed and edited in the devtools frontend, albeit without proper highlighting. I've created pull requests on the relevant libraries used in the devtools frontend to enable this. https://github.com/stylelint/stylelint/pull/5613 https://github.com/codemirror/CodeMirror/pull/6803
On Wednesday, October 20, 2021 at 9:10:36 AM UTC-7 Mathias Bynens wrote:
On Wed, Oct 20, 2021 at 5:44 PM Will Cassella <cas...@chromium.org> wrote:
Explainer
Adds MediaQueries for detecting HDR vs HDR displayshttps://www.w3.org/TR/mediaqueries-5/#dynamic-range
https://www.w3.org/TR/mediaqueries-5/#video-dynamic-rangeSpecification
https://www.w3.org/TR/mediaqueries-5/#dynamic-rangeSummary
Adds media queries to CSS which allow a page to detect the current display device’s support for HDR. This feature adds two new CSS media queries: 'dynamic-range' and 'video-dynamic-range', both of which may be one of 'standard' or 'high'. Chrome will resolve these queries according to the capabilities of the display device the browser window is currently positioned on, allowing pages to toggle CSS rules accordingly or respond in Javascript via 'window.matchMedia()'.
Blink component
Blink>CSSMotivation
As HDR-supported displays become more common, web developers need ways to enable HDR content on their web pages without compromising the experience for users of non-HDR displays, or mixed-HDR multi-display setups. CSS already provides the 'media query' concept for toggling rules based on display device characteristics, and this feature extends that set of queries to enable detecting HDR support on the current display device.
Initial public proposal
TAG review
Not Filed. This is an incremental change to CSS Media Queries, already adopted by CSS WG.
To unsubscribe from this group and stop receiving emails from it, send an email to blink-dev+...@chromium.org.
To view this discussion on the web visit https://groups.google.com/a/chromium.org/d/msgid/blink-dev/CA%2BF%3DP4hQtag7Ja_7HF4jRHbuC8h5-_0TzjoJvVEMHmrUeZYW9g%40mail.gmail.com.
--
You received this message because you are subscribed to the Google Groups "blink-dev" group.
To unsubscribe from this group and stop receiving emails from it, send an email to blink-dev+...@chromium.org.
To view this discussion on the web visit https://groups.google.com/a/chromium.org/d/msgid/blink-dev/6655cbcd-90a1-4b34-a332-5adeada4b53fn%40chromium.org.
--
You received this message because you are subscribed to the Google Groups "blink-dev" group.
To unsubscribe from this group and stop receiving emails from it, send an email to blink-dev+...@chromium.org.
To view this discussion on the web visit https://groups.google.com/a/chromium.org/d/msgid/blink-dev/CAKj4DkD1-oS5OSZye8DwcGhdrYVwKYv3omYOwE0p-WCm3L77iw%40mail.gmail.com.
You received this message because you are subscribed to a topic in the Google Groups "blink-dev" group.
To unsubscribe from this topic, visit https://groups.google.com/a/chromium.org/d/topic/blink-dev/OpUsOWnnN6c/unsubscribe.
To unsubscribe from this group and all its topics, send an email to blink-dev+...@chromium.org.
To view this discussion on the web visit https://groups.google.com/a/chromium.org/d/msgid/blink-dev/CADp2-T87%3DwjHw-M1TUHQTiPN26WyXijkxzcrO2XXezCHH8sY4g%40mail.gmail.com.
--
You received this message because you are subscribed to a topic in the Google Groups "blink-dev" group.
To unsubscribe from this topic, visit https://groups.google.com/a/chromium.org/d/topic/blink-dev/OpUsOWnnN6c/unsubscribe.
To unsubscribe from this group and all its topics, send an email to blink-dev+...@chromium.org.
To view this discussion on the web visit https://groups.google.com/a/chromium.org/d/msgid/blink-dev/CAG0MU3gHMxyCBxWphPTg4mP8RNbsJQC30pAaB4-P4%3D-FLA4B0w%40mail.gmail.com.
The spec requires that "The combination of the User Agent and the output device fulfill all of the following criteria" when describing what it means to be high dynamic-range. Since Chromium doesn't support wide-gamut colors in CSS, HTML, or Canvas, I think it's probably incorrect to report that (dynamic-range: high) is true based only on the device, which is what it looks to me like the current code does. Admittedly, the spec could probably use some clarification as to what it means for the User Agent to fulfill the criteria for both the dynamic-range and video-dynamic-range queries, but my understanding of what the spec is trying to say is that Chrome probably shouldn't say that (dynamic-range: high) is true until it supports wide-gamut colors in at least some and maybe all of those contexts.
To view this discussion on the web visit https://groups.google.com/a/chromium.org/d/msgid/blink-dev/CAG0MU3gbBzJUttDWuWDRFWnP-w7%3DP4G7TrBPJiU%3DyizEH2%2Bz_Q%40mail.gmail.com.
[coming from the other thread... :) ]+1 to what David said. It doesn't seem that returning dynamic-range: high right now would be useful.The spec could use some clarification:- clarify if those criterias need to be supported on different conditions: CSS, images, canvas, ...- clarify if the criterias need to be supported for both with/without alpha (afaik there may be implementation differences there, but I may be wrong here).- I wonder if the definitions of high contrast/peak brightness should match the industry definitions for HDR displays? I'm not an expert, but I know those exist.I think it's potentially okay to ignore those definitions, but I'd ask for a rationale here.I think it's a great thing to summarize hdr into a single media query, but the risk here would be to release a semantic that guarantees very little, and therefore is not useful in the long run.On Fri, Oct 22, 2021 at 10:04 AM David Baron <dba...@chromium.org> wrote:This sounds like exactly the sort of case where an implementation should report (dynamic-range: standard) and (video-dynamic-range: high). It would be great to see the spec clarified to make it clearer what UA support is expected for each, though.-DavidOn Thu, Oct 21, 2021 at 7:03 PM Will Cassella <cas...@chromium.org> wrote:Copying over from the other thread (trying to continue the discussion here):The spec requires that "The combination of the User Agent and the output device fulfill all of the following criteria" when describing what it means to be high dynamic-range. Since Chromium doesn't support wide-gamut colors in CSS, HTML, or Canvas
, I think it's probably incorrect to report that (dynamic-range: high) is true based only on the device, which is what it looks to me like the current code does. Admittedly, the spec could probably use some clarification as to what it means for the User Agent to fulfill the criteria for both the dynamic-range and video-dynamic-range queries, but my understanding of what the spec is trying to say is that Chrome probably shouldn't say that (dynamic-range: high) is true until it supports wide-gamut colors in at least some and maybe all of those contexts.I think you're right that the spec needs some clarification, since we're trying to incrementally enable adoption of HDR on the web the intent isn't to signal that HDR is supported by all APIs. We do already support HDR in some scenarios, such as the <video> element, so having these queries exist to let developers detect display capabilities is already useful.
On Wed, Oct 20, 2021 at 11:27 PM Yoav Weiss <yoav...@chromium.org> wrote:
On Thu, Oct 21, 2021 at 7:01 AM Will Cassella <cas...@chromium.org> wrote:
Thanks for the feedback! I've updated that section:
DebuggabilityStyles with these media queries can be viewed and edited in the devtools frontend, albeit without proper highlighting. I've created pull requests on the relevant libraries used in the devtools frontend to enable this. https://github.com/stylelint/stylelint/pull/5613 https://github.com/codemirror/CodeMirror/pull/6803
On Wednesday, October 20, 2021 at 9:10:36 AM UTC-7 Mathias Bynens wrote:
On Wed, Oct 20, 2021 at 5:44 PM Will Cassella <cas...@chromium.org> wrote:
To unsubscribe from this group and stop receiving emails from it, send an email to blink-dev+unsubscribe@chromium.org.
To view this discussion on the web visit https://groups.google.com/a/chromium.org/d/msgid/blink-dev/CA%2BF%3DP4hQtag7Ja_7HF4jRHbuC8h5-_0TzjoJvVEMHmrUeZYW9g%40mail.gmail.com.
--
You received this message because you are subscribed to the Google Groups "blink-dev" group.
To unsubscribe from this group and stop receiving emails from it, send an email to blink-dev+unsubscribe@chromium.org.
To view this discussion on the web visit https://groups.google.com/a/chromium.org/d/msgid/blink-dev/6655cbcd-90a1-4b34-a332-5adeada4b53fn%40chromium.org.
--
You received this message because you are subscribed to the Google Groups "blink-dev" group.
To unsubscribe from this group and stop receiving emails from it, send an email to blink-dev+unsubscribe@chromium.org.
On Friday, October 22, 2021 at 10:19:44 PM UTC+2 Fernando Serboncini wrote:[coming from the other thread... :) ]+1 to what David said. It doesn't seem that returning dynamic-range: high right now would be useful.The spec could use some clarification:- clarify if those criterias need to be supported on different conditions: CSS, images, canvas, ...- clarify if the criterias need to be supported for both with/without alpha (afaik there may be implementation differences there, but I may be wrong here).- I wonder if the definitions of high contrast/peak brightness should match the industry definitions for HDR displays? I'm not an expert, but I know those exist.I think it's potentially okay to ignore those definitions, but I'd ask for a rationale here.I think it's a great thing to summarize hdr into a single media query, but the risk here would be to release a semantic that guarantees very little, and therefore is not useful in the long run.On Fri, Oct 22, 2021 at 10:04 AM David Baron <dba...@chromium.org> wrote:This sounds like exactly the sort of case where an implementation should report (dynamic-range: standard) and (video-dynamic-range: high). It would be great to see the spec clarified to make it clearer what UA support is expected for each, though.-DavidOn Thu, Oct 21, 2021 at 7:03 PM Will Cassella <cas...@chromium.org> wrote:Copying over from the other thread (trying to continue the discussion here):The spec requires that "The combination of the User Agent and the output device fulfill all of the following criteria" when describing what it means to be high dynamic-range. Since Chromium doesn't support wide-gamut colors in CSS, HTML, or CanvasDavid - I'm likely missing something here, but I thought (based on this thread) that we do have wide-gamut support in CSS, HTML and Canvas.Are you saying we don't support this due to lack of color level 4 support? Or something else?
I also didn't interpret the spec as saying anything about gamut (but rather about color depth), although it may be possible that wide gamuts and high color depth correlate 1:1. Can you clarify if that's what you meant?
, I think it's probably incorrect to report that (dynamic-range: high) is true based only on the device, which is what it looks to me like the current code does. Admittedly, the spec could probably use some clarification as to what it means for the User Agent to fulfill the criteria for both the dynamic-range and video-dynamic-range queries, but my understanding of what the spec is trying to say is that Chrome probably shouldn't say that (dynamic-range: high) is true until it supports wide-gamut colors in at least some and maybe all of those contexts.I think you're right that the spec needs some clarification, since we're trying to incrementally enable adoption of HDR on the web the intent isn't to signal that HDR is supported by all APIs. We do already support HDR in some scenarios, such as the <video> element, so having these queries exist to let developers detect display capabilities is already useful.
On Wed, Oct 20, 2021 at 11:27 PM Yoav Weiss <yoav...@chromium.org> wrote:
On Thu, Oct 21, 2021 at 7:01 AM Will Cassella <cas...@chromium.org> wrote:
Thanks for the feedback! I've updated that section:
DebuggabilityStyles with these media queries can be viewed and edited in the devtools frontend, albeit without proper highlighting. I've created pull requests on the relevant libraries used in the devtools frontend to enable this. https://github.com/stylelint/stylelint/pull/5613 https://github.com/codemirror/CodeMirror/pull/6803
On Wednesday, October 20, 2021 at 9:10:36 AM UTC-7 Mathias Bynens wrote:
On Wed, Oct 20, 2021 at 5:44 PM Will Cassella <cas...@chromium.org> wrote:
To unsubscribe from this group and stop receiving emails from it, send an email to blink-dev+...@chromium.org.
To view this discussion on the web visit https://groups.google.com/a/chromium.org/d/msgid/blink-dev/CA%2BF%3DP4hQtag7Ja_7HF4jRHbuC8h5-_0TzjoJvVEMHmrUeZYW9g%40mail.gmail.com.
--
You received this message because you are subscribed to the Google Groups "blink-dev" group.
To unsubscribe from this group and stop receiving emails from it, send an email to blink-dev+...@chromium.org.
To view this discussion on the web visit https://groups.google.com/a/chromium.org/d/msgid/blink-dev/6655cbcd-90a1-4b34-a332-5adeada4b53fn%40chromium.org.
--
You received this message because you are subscribed to the Google Groups "blink-dev" group.
To unsubscribe from this group and stop receiving emails from it, send an email to blink-dev+...@chromium.org.
To view this discussion on the web visit https://groups.google.com/a/chromium.org/d/msgid/blink-dev/CAG0MU3iqUMAHBvXyqNQ8p2QPdSOTc7u4o8waE5GZ80_Aehnw%3DQ%40mail.gmail.com.
To view this discussion on the web visit https://groups.google.com/a/chromium.org/d/msgid/blink-dev/CA%2BF%3DP4jQTkmPvDLBM_t_0S%3D6k70UVdcszQ01hQELmE%3Dfp81JPA%40mail.gmail.com.
To unsubscribe from this group and stop receiving emails from it, send an email to blink-dev+unsubscribe@chromium.org.
To view this discussion on the web visit https://groups.google.com/a/chromium.org/d/msgid/blink-dev/CA%2BF%3DP4hQtag7Ja_7HF4jRHbuC8h5-_0TzjoJvVEMHmrUeZYW9g%40mail.gmail.com.
--
You received this message because you are subscribed to the Google Groups "blink-dev" group.
To unsubscribe from this group and stop receiving emails from it, send an email to blink-dev+unsubscribe@chromium.org.
To view this discussion on the web visit https://groups.google.com/a/chromium.org/d/msgid/blink-dev/6655cbcd-90a1-4b34-a332-5adeada4b53fn%40chromium.org.
--
You received this message because you are subscr