search

mdn / browser-compat-data

This repository contains compatibility data for Web technologies as displayed on MDN
https://developer.mozilla.org
Creative Commons Zero v1.0 Universal
4.91k stars 1.98k forks source link

/en-US/docs/Web/CSS/@media keyword "or" not in Compatibility table #6033

Closed WebMechanic closed 1 year ago

WebMechanic commented 4 years ago

Request type

Details

Burried in the Formal Syntax is <media-or> that allows a list of media rules to use the or keyword. As I understand this change was added in CSS Conditional Rules Module Level 3. The keyword is not present in Media Queries Level 3.

This significant change to the long time known syntax of MQ lists, that only allows for comma, should be reflected in the Compatibility table.

This "alternative" syntax is not (yet) widely supported and it appears Firefox (59+) to be the only current browser to allow a MQL using or instead of comma.

@media (fu:bar), (foo:bar) { /* all browsers */ }
@media (fu:bar) or (foo:bar) { /* Firefox */ }

I can only guesstimate when support was added to Firefox, presumable in 57 Nightly. I'm on Win10 Pro and current Blink or EdgeHTML don't support 'or'. I can't test WebKit/Safari.

WebMechanic commented 4 years ago

A working example:

@media (pointer:coarse), (pointer:fine) {
  body {background:red}
}
@media (pointer:coarse) or (pointer:fine) {
  body {background:green}
}

Firefox will display a green body.

chrisdavidmills commented 4 years ago

Agreed that we should add this; I'll transfer this over to the compat data repo.

WebMechanic commented 3 years ago

Hello, it's been +1 year since this was added to "Priorization review". There is (still) no notion in the docs how using or instead of a comma will break compatibility, incl. Chrome/95 and similar browsers. FF appears to remain the only browser to support this "new" syntax...

https://github.com/mdn/browser-compat-data/projects/6#card-44898176 -- apparently waiting for a PR?