mdn / mdn/browser-compat-data

css.at-rules.media.grid - lots of cross browser issues but you wouldn't know it

Open
#15,329 1 comment 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

browser:multiple data:css
Dominant language
JSON
Stars
5.8k
Forks
2.6k
Avg merge
1d 21h
Merged PRs (30d)
186

Description

What information was incorrect, unhelpful, or incomplete?

Currently showing that the grid shows that all browsers support the grid media feature.

However, this is misleading (https://github.com/w3c/csswg-drafts/issues/7121#issuecomment-1064376176).

What did you expect to see?
  1. An extra row showing if the browsers support the boolean form: @media (grid). We found that Chrome does not support it, but Firefox does.

Note: afaik it's impossible to test this boolean logic in isolation in Chrome, as Chrome doesn't match @media not (grid: 1) even though it does match @media (grid: 0) (due to a bug with not?), and even if @media (grid) was working, you'd need to test with @media not (grid) to validate it works, as (grid) should never match in Chrome

  1. A note on the page referencing the Chrome issues
Did you test this? If so, how?

Using this CSS (+ permutations) as a check

<style>
@media not print and (grid: 0) {
  body {
    background: red !important;
  }
}
</style>
MDN page report details

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start with the MDN page for @media/grid and its browser compatibility data entry, then compare the current values with the CSS test case in the issue. Check the linked CSSWG discussion and Chrome issue context before deciding how the boolean form and explanatory note should be represented. Done means the page accurately distinguishes the supported forms and documents the known browser limitations.

Written by the indexing model from the issue text.

Assessment

Tech stack
css
Domain
documentation
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.