Skip to content

Custom Media Queries - Add BCD #3533

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 6 commits into
base: main
Choose a base branch
from
Open

Custom Media Queries - Add BCD #3533

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
e06a776
Update Custom Media Queries
ramiy Nov 12, 2025
ecb2f3d
Update Custom Media Queries
ramiy Nov 12, 2025
05c3314
Merge branch 'main' into custom-media-queries
ramiy Nov 12, 2025
abf863b
Merge branch 'main' into custom-media-queries
ramiy Nov 13, 2025
0166748
Merge branch 'main' into custom-media-queries
ramiy Nov 13, 2025
78e6df4
update
ramiy Nov 13, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 3 additions & 5 deletions features/custom-media-queries.yml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,8 +2,6 @@ name: Custom media queries
description: The `@custom-media` CSS at-rule names a media query, which you can reuse in multiple `@media` rules.
spec: https://drafts.csswg.org/mediaqueries-5/#custom-mq
group: media-queries
# Not in BCD yet, but expecting something like:
# - css.at-rules.custom-media
# - api.CSSCustomMediaRule
# - api.CSSCustomMediaRule.name
# - api.CSSCustomMediaRule.query
Copy link
Collaborator

@ddbeck ddbeck Nov 13, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think you need to do a bit of explaining here. What happened with the other keys? 😅

Copy link
Contributor Author

@ramiy ramiy Nov 13, 2025 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ok, I added only css.at-rules.custom-media to BCD, the other keys don't exist - no browser supports them.

See BCD v7.1.21 changelog: https://github.com/mdn/browser-compat-data/releases/tag/v7.1.21

You can also check the code: https://github.com/mdn/browser-compat-data/tree/v7.1.21/api

Currently, the CSSCustomMediaRule doesn't exist. Only the CSS @custom-media at-rule is supported.

Copy link
Collaborator

@ddbeck ddbeck Nov 13, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I understood that the key css.at-rules.custom-media was added to BCD mdn/browser-compat-data#28438. But in this PR, you removed the comment for the other keys without explanation.

I went ahead and dug into this myself. I turned on the preference shown in the data and the CSSCustomMediaRule interface is exposed (there's also code for it in the diff from the Firefox bug you linked in BCD). So two things need to happen here:

  1. Against BCD, file an issue noting the missing keys or submit a PR to add the data for the missing API yourself.
  2. In this PR, reinstate the comment for the api.CSSCustomMediaRule key and its descendants.

Copy link
Contributor Author

@ramiy ramiy Nov 13, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

BCD PR: mdn/browser-compat-data#28450

compat_features:
- css.at-rules.custom-media
- api.CSSCustomMediaRule
3 changes: 3 additions & 0 deletions features/custom-media-queries.yml.dist
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,3 +4,6 @@
status:
baseline: false
support: {}
compat_features:
- css.at-rules.custom-media
- api.CSSCustomMediaRule
Loading