Update compat data for CSS resolution media query and types #4226

fvsch · 2019-05-29T14:51:47Z

Changes:

Improve the compatibility data for the resolution media query. Adds information about Safari support (not supported, but adds info about -webkit-device-pixel-ratio).
Related MDN page: https://developer.mozilla.org/en-US/docs/Web/CSS/@media/resolution
Restructure and the compatibility data for the <resolution> type.
Related MDN page: https://developer.mozilla.org/en-US/docs/Web/CSS/resolution
- On that page I found the compatibility table puzzling, because it says that all browsers support the <resolution> type. But what does supporting a CSS type mean? Does it mean that the resolution media query works (nope, not in Safari)? Does that mean that all the units for the <resolution> type are supported (nope, not in most browsers)? Does that mean that at least one unit is supported (nope, not in Safari)?
- So I opted to rename the <resolution> label to dpi and dpcm units, because in practice they're the first resolution types supported in browsers (both in IE9) and it seems they landed together in all browsers.
Update the compatibility data for the <resolution> type, especially for the dppx unit, for the x alias, and for Edge and Android browsers (after running a bunch of tests on BrowserStack; I didn't identify specific versions for dppx support in Opera and Samsung Internet).

Test case (doesn't inclue -webkit-device-pixel-ratio):
https://fvsch.github.io/test-pages/css-mq-resolution

Linting: passed locally.

jpmedley · 2019-05-29T15:32:17Z

Here is a list of Chrome's unit values: https://cs.chromium.org/chromium/src/third_party/blink/renderer/core/css/cssom/css_unit_values.idl

fvsch · 2019-05-29T16:27:55Z

@jpmedley Doesn't seem to reflect Chrome's support of e.g. @media (min-resolution: 2x). Perhaps because x is not a unit but an alias of the dppx unit.

In my tests the x queries worked in Chrome (desktop and Android) and in Android webviews (tested in the Twitter app), and in Chromium-based browsers like Opera (not Samsung Internet because it's based on an older Chromium).

fvsch · 2019-05-29T17:59:42Z

I changed the structure of the <resolution> JSON data, not sure if MDN's {{Compat("css.types.resolution")}} will still render it correctly. Anyone knows about this?

ddbeck

Hi @fvsch and welcome to BCD! Thank you for starting this PR, there's some good improvements in here, though there are a few structural issues to work through before we merge. Some comments inline and some responses to your PR description below.

First, CSS types are a weird thing. The way we structure type data is useful to consumers who need data for types that are used in many properties or at-rules, but less so for one-offs, as <resolution> appears to be (AFAICT, it's only used for the resolution media feature). I sympathize with your confusion.

But what does supporting a CSS type mean? Does it mean that the resolution media query works (nope, not in Safari)? Does that mean that all the units for the <resolution> type are supported (nope, not in most browsers)? Does that mean that at least one unit is supported (nope, not in Safari)?

Generally, it's the last of your examples: one or more of the units are supported (in one or more places where you'd expect that unit to be supported, according to a spec). In this case, it should mean some <resolution> type value is supported in the browser somewhere. Usually this isn't that weird (consider <length> type values and their units appearing to be supported with many properties at once). Sadly, this is a weird case.

So I opted to rename the <resolution> label to dpi and dpcm units, because in practice they're the first resolution types supported in browsers (both in IE9) and it seems they landed together in all browsers.

You have the right idea in spelling out dpi and dpcm data specifically, but structurally we still need the parent <resolution> feature (mainly for consistency with other types). I've described this in more detail in line comments.

The material version data you've updated here is great though. I really appreciate the work you've done there already. Once we tidy this up, this will be an excellent improvement to the data. Thank you again!

css/at-rules/media.json

css/types/resolution.json

ddbeck · 2019-06-17T16:23:53Z

Hi @fvsch, do you have any plans to revisit this PR?

fvsch · 2019-06-18T01:35:51Z

@ddbeck Definitely! I’ll probably be too busy this week, but next week is looking good.
Also I wanted to say thanks for your awesome review, very motivating and helpful :)

queengooborg · 2019-07-02T22:34:13Z

Hey again @fvsch, are you planning on returning to this PR?

fvsch · 2019-07-07T09:04:56Z

Quick question, does it make sense to remove details about very very old (and unsupported) releases of evergreen browsers, such as:

"firefox": [
  {
    "version_added": "8"
  },
  {
    "partial_implementation": true,
    "version_added": "3.5",
    "notes": "Supports <a href='https://developer.mozilla.org/docs/Web/CSS/integer'><code>&lt;integer&gt;</code></a> values only."
  }
],

could be just:

"firefox": {
  "version_added": "8"
},

queengooborg · 2019-07-07T09:37:14Z

This has been something that's been brought up around this repository with some mixed feelings towards it. However, one of the goals of BCD is to provide the most accurate information possible. Removing data regarding older browser versions works against that, and in my opinion, doesn't show just how old some properties really are. There are some cases where older data is plotted to be stripped out, such as with pre-Chromium WebView.

Overall, I'd say, let's leave the data regarding older Firefox versions?

fvsch · 2019-07-07T10:21:48Z

So I rewrote this PR based on the work done in #4369

What I'm trying to do now:

Harmonize the data for css.at-rules.media.resolution and css.types.resolution. For the supported version of Chrome, using Chrome 29 as per https://www.chromestatus.com/feature/5944509615570944; for other values, when we add a "true" in one place and a specific version in the other, I used the specific version.
Always mark Safari as non-supporting, according to my tests in Support for the x alias of dppx in resolution media queries #4224 and confirmation in Set real values for Chromium + Safari CSS @media properties #4369 (comment) (+ the open WebKit bug). Looks like WebKit did work in 2012 to support the native resolution types and/or media query but it's behind build-time flags. I'm linking to the WebKit bug for css.at-rules.media.resolution and the root compat data of css.types.resolution but not for every single unit (that would get repetitive real quick).
Duplicate the root data of css.types.resolution and use it for new entries for the dpi and dpcm units, according to my earlier tests and online information I've found in Support for the x alias of dppx in resolution media queries #4224. It seems that all browsers shipping dpi also shipped dpcm at the same time.
Try to add support information for every place where we have a null value; change some false values to true or a specific release when browsers updated (x unit support in Chrome + Opera + Android Webview, but not yet in Samsung Internet since it's using an old Chromium version).

The upside of marking Safari as non-supporting is that it reduces developer confusion: less risk of using say @media (min-resolution: 160dpi) { … } and expecting it to work in Safari.

The downside is that after this update, https://developer.mozilla.org/en-US/docs/Web/CSS/@media/resolution and https://developer.mozilla.org/en-US/docs/Web/CSS/resolution would suggest that Safari doesn't support resolution matching in CSS at all. My proposed fix would be to add notes to both those pages linking to https://developer.mozilla.org/en-US/docs/Web/CSS/@media/-webkit-device-pixel-ratio

ddbeck

Thanks for your patience while I got back to this. A couple minor points to address here, but this is a really solid clean up. Thank you!

ddbeck · 2019-07-16T10:10:03Z

css/at-rules/media.json

@@ -1299,16 +1299,18 @@
                "version_added": "9"
              },
              "opera": {
-                "version_added": true
+                "version_added": "9.5"


Given the updated version for Chrome, I suspect there was a discontinuity on this feature in Opera:

Supported from 9.5 and removed in 15 (Blink 28)

Added in 16 (Blink 29)

(Opera for Android would be a similar story, except the change over happened at 14, not 15.)

See also: https://github.com/mdn/browser-compat-data/blob/master/browsers/opera.json

Are there examples of how to encode this information that I could follow?

Sure! You can use an array like this:

browser-compat-data/api/NavigatorGeolocation.json

Lines 25 to 33 in f53ea02

"opera": [

{

"version_added": "16"

},

{

"version_added": "10",

"version_removed": "15"

}

],

@fvsch are you planning to follow up on this?

ddbeck · 2019-07-16T10:22:42Z

css/types/resolution.json

+                "version_added": "9"
+              },
+              "opera": {
+                "version_added": "9.5"


Discontinuity, as mentioned above

ddbeck · 2019-07-16T10:23:09Z

css/types/resolution.json

+                "version_added": "9"
+              },
+              "opera": {
+                "version_added": "9.5"


Discontinuity, as mentioned above

css/types/resolution.json

Elchi3 · 2019-08-01T12:08:08Z

@ddbeck I've updated this to take the Opera discontinuity into account. Is this good to go now?

ddbeck

Looks good. Thank you @Elchi3 and @fvsch! 🎉

fvsch · 2019-08-01T13:02:05Z

@Elchi3 Thanks for pushing this over the line!

ddbeck added the data:css Compat data for CSS features. https://developer.mozilla.org/docs/Web/CSS label May 29, 2019

fvsch changed the title ~~[WIP] Update compat data for CSS resolution types, split by unit~~ Update compat data for CSS resolution media query and types May 29, 2019

ddbeck self-requested a review May 30, 2019 09:28

ddbeck requested changes Jun 3, 2019

View reviewed changes

queengooborg added the rebase-needed 🚧 label Jul 1, 2019

queengooborg removed the rebase-needed 🚧 label Jul 7, 2019

Update compat data for CSS resolution media query and types

d1f2f6b

ddbeck self-requested a review July 8, 2019 09:14

ddbeck requested changes Jul 16, 2019

View reviewed changes

Elchi3 mentioned this pull request Jul 18, 2019

Chrome & Safari CSS compat data: css types #4304

Closed

38 tasks

Elchi3 added 4 commits August 1, 2019 13:57

Update opera for discontinuity

6ad6c00

Fix Opera Android version

c1f35df

Fix Opera Android for real

eff0759

Opera discontinuity part 2

c410c03

Elchi3 requested a review from ddbeck August 1, 2019 12:07

ddbeck approved these changes Aug 1, 2019

View reviewed changes

ddbeck merged commit 7240d67 into mdn:master Aug 1, 2019

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Update compat data for CSS resolution media query and types #4226

Update compat data for CSS resolution media query and types #4226

fvsch commented May 29, 2019 •

edited

Loading

jpmedley commented May 29, 2019

fvsch commented May 29, 2019

fvsch commented May 29, 2019

ddbeck left a comment

ddbeck commented Jun 17, 2019

fvsch commented Jun 18, 2019

queengooborg commented Jul 2, 2019

fvsch commented Jul 7, 2019

queengooborg commented Jul 7, 2019

fvsch commented Jul 7, 2019

ddbeck left a comment

ddbeck Jul 16, 2019

fvsch Jul 16, 2019

ddbeck Jul 16, 2019

Elchi3 Jul 26, 2019

ddbeck Jul 16, 2019

ddbeck Jul 16, 2019

Elchi3 commented Aug 1, 2019

ddbeck left a comment

fvsch commented Aug 1, 2019

	"opera": [
	{
	"version_added": "16"
	},
	{
	"version_added": "10",
	"version_removed": "15"
	}
	],

Update compat data for CSS resolution media query and types #4226

Update compat data for CSS resolution media query and types #4226

Conversation

fvsch commented May 29, 2019 • edited Loading

jpmedley commented May 29, 2019

fvsch commented May 29, 2019

fvsch commented May 29, 2019

ddbeck left a comment

Choose a reason for hiding this comment

ddbeck commented Jun 17, 2019

fvsch commented Jun 18, 2019

queengooborg commented Jul 2, 2019

fvsch commented Jul 7, 2019

queengooborg commented Jul 7, 2019

fvsch commented Jul 7, 2019

ddbeck left a comment

Choose a reason for hiding this comment

ddbeck Jul 16, 2019

Choose a reason for hiding this comment

fvsch Jul 16, 2019

Choose a reason for hiding this comment

ddbeck Jul 16, 2019

Choose a reason for hiding this comment

Elchi3 Jul 26, 2019

Choose a reason for hiding this comment

ddbeck Jul 16, 2019

Choose a reason for hiding this comment

ddbeck Jul 16, 2019

Choose a reason for hiding this comment

Elchi3 commented Aug 1, 2019

ddbeck left a comment

Choose a reason for hiding this comment

fvsch commented Aug 1, 2019

fvsch commented May 29, 2019 •

edited

Loading