Caniuse: Media Queries Level 4

[Fyrd]

Since Media Queries Level 4 has become a Editors Draft, I think it should appear on Can I Use: http://dev.w3.org/csswg/mediaqueries4/.

Available on site now:

• interaction media features (pointer, any-pointer, hover, any-hover)

Data available:

• scripting (no support yet, data exists in repo )

Need separate issues:

• update (spec)
• overflow-block, overflow-inline spec
  /3abb7e30e5a7ec5f7504f5bc6470cf3c9a123b37 )
• color-gamut (spec)

---

This issue was imported from Google Moderator

Moderator votes: +15
Issue added by Erick Petrucelli on 2014-09-30
To vote this issue up or down, simply include +1 or -1 in your comment.

[cvrebert]

+1

[Ugoku]

+1

[cvrebert]

To break this down into chunks, Level 4 adds the following on top of Level 3:

• interaction media features (pointer, any-pointer, hover, any-hover): http://caniuse.com/#feat=css-media-interaction
• scripting (https://github.com/Fyrd/caniuse/blob/master/features-json/css-media-scripting.json)
• light-level (#1549) (spec)
• update (spec)
• overflow-block, overflow-inline spec
• inverted-colors (spec) (Moved to Level 5: https://github.com/w3c/csswg-drafts/commit/3abb7e30e5a7ec5f7504f5bc6470cf3c9a123b37 )
• color-gamut (spec)
• custom media queries (spec) (Moved to Level 5; see https://github.com/w3c/csswg-drafts/commit/e4facfc24e59cddcae5919b0e3c083044ba555af)

[Schweinepriester]

+1

[timburgess]

👍

[samkelleher]

+1
W3C Working Draft as at 15 November 2016.
The color-gamut media query is already supported in Safari. It allows content authors to display richer wide-gamut images on P3 supported devices (think new iPhones and MacBooks).

[fivegreenapples]

+1

[sambeau]

+1

[Schweinepriester]

color-gamut will be in Chrome 58: https://developers.google.com/web/updates/2017/03/chrome-58-media-updates#colorgamut

[chharvey]

It looks like a previous version of the Working Draft (as of 2016-01-26) had a section on custom media queries. It has since been removed from both the Working Draft and the Editors Draft though. Can anyone find any reasons for why it was removed?

It would also be nice for CanIUse to show which browsers support this feature.

@custom-media --small (min-width: 30em);

@media screen and (--small) {
  /* small window styles */
}

[cvrebert]

Custom Media Queries was moved to Level 5: https://drafts.csswg.org/mediaqueries-5/#custom-mq

[matthew-dean]

If this is broken apart, one thing to track is browser support for @media (width <= 320px) {} syntax. MQ4 is now at CR status.

[cvrebert]

I've filed #3988 for color-gamut.

[cvrebert]

• update
  
  
  
  • Chrome: https://crbug.com/791028
  
  
• overflow-block, overflow-inline
  
  
  
  • Chrome: https://crbug.com/790911
  
  

[Smilebags]

Especially considering color-gamut is now supported in multiple browsers, I think at least that should be in CanIUse.

[Ugoku]

Firefox 63 will support syntactic improvements from MQ Level 4: https://bugzilla.mozilla.org/show_bug.cgi?id=1422225

[Malvoz]

+1

[prof3ssorSt3v3]

inverted-colors was part of the original draft of https://drafts.csswg.org/mediaqueries-4/#inverted which looks to be replaced with monochrome and color
plus
prefers-color-scheme: dark | light - which will be shipping soon in Safari 12.1

[Schweinepriester]

https://developer.mozilla.org/en-US/docs/Mozilla/Firefox/Releases/66:

Implemented the overflow-inline and overflow-block media queries (bug 1422235).

[matthew-dean]

Any reason this hasn't been added yet?

[revelt]

To add 2p, entry "CSS3 Media Queries" should be called "Media Queries Level 3" because it's media queries going through levels, not "The CSS". Then, outcomes of this issue would go into a new entry, "Media Queries Level 4", what do you think?

[cvrebert]

There was a marketing push around "CSS 3" circa HTML 5's heyday (e.g. https://developer.mozilla.org/en-US/docs/Archive/CSS3). Hence the logo. But yeah, it's not a particularly useful or technically correct term at this point.

[Malvoz]

Chrome tracking bug:
https://bugs.chromium.org/p/chromium/issues/detail?id=962417