Skip to content
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

Jump to bottom

Media Queries 4 #154

Closed
romainmenke opened this issue Sep 25, 2022 · 14 comments
Closed

Media Queries 4 #154

romainmenke opened this issue Sep 25, 2022 · 14 comments
Labels
accepted An accepted proposal focus-area-proposal Focus Area Proposal

Comments

@romainmenke
Copy link

romainmenke commented Sep 25, 2022 •
edited
Loading

Description

I was working on an updated fallback for @custom-media and was surprised to find that there are subtle and unexpected differences between browsers when it comes to @media.

There are many failing WPT tests across all browsers but some examples :

  • extra parenthese : ((orientation))
  • or support : (orientation) or (orientation)

Rationale

It is not trivial for users to figure out which @media features are supported in all browsers.

Are styles not applied because the query doesn't match or because it is not supported?

Aligning supported features across browsers at the same time will aid in adoption of some the new features.

Specification

https://www.w3.org/TR/mediaqueries-4/

Tests

https://wpt.fyi/results/css/mediaqueries?label=master&label=experimental&aligned
@romainmenke romainmenke added the focus-area-proposal Focus Area Proposal label Sep 25, 2022
@gsnedders
Copy link
Member

In practice, this has significant overlap with #141, as that is one of the most significant parts of MQ4.

@gsnedders gsnedders added this to the Interop 2023 milestone Sep 25, 2022
@foolip foolip moved this to Proposed in Interop 2023 Oct 7, 2022
@foolip foolip removed this from the Interop 2023 milestone Oct 7, 2022
@foolip foolip mentioned this issue Oct 11, 2022
Closed
@romainmenke
Copy link
Author

romainmenke commented Nov 9, 2022 •
edited
Loading

I think it is best to see this mostly separate from #141.
Media range syntax is the most well known and most popular addition in media queries 4 but in general I think media queries need a bit of extra attention.

https://wpt.fyi/results/css/mediaqueries?label=master&label=experimental&aligned&view=subtest&q=media

There aren't that many tests for media queries and no single browser scores really well.
Only the basic features and usage can be expected to work well in all engines.

@gsnedders
Copy link
Member

There aren't that many tests for media queries and no single browser scores really well. Only the basic features and usage can be expected to work well in all engines.

A lot of the Firefox failures at least are down to w3c/csswg-drafts#7595, where it seems like different people interpreted the spec differently. I don't think there's necessarily a large number of discrete bugs here.

But yeah, there's definitely still more work to be done here above and beyond range syntax. Just, like, it's worthwhile knowing there are both proposals. And that may have implications if one or both are accepted (e.g., one could imagine if both are accepted we just have a singular "Media Queries" focus area).

@romainmenke
Copy link
Author

one could imagine if both are accepted we just have a singular "Media Queries" focus area

I would like that :)

I plan to focus for a while on bits of mediaqueries-4 in PostCSS. Very little has been done in PostCSS in the past. A large factor was the lack of a media query parser and OM.

@romainmenke
Copy link
Author

@gsnedders Just to be sure that I am not overlooking anything.

There are two sections with tests that are focussed on @media :

correct?

@gsnedders
Copy link
Member

I highly doubt we want all of these, but:

% rg '(@media|\.matchMedia)' css --glob '!mediaqueries' --glob '!css-conditional' --sort path --files-with-matches
css/CSS2/box-display/containing-block-024.xht
css/CSS2/box-display/containing-block-025.xht
css/CSS2/cascade/at-import-009.xht
css/CSS2/css1/c71-fwd-parsing-002.xht
css/CSS2/media/media-dependency-001.xht
css/CSS2/media/media-dependency-002.xht
css/CSS2/media/media-dependency-006.xht
css/CSS2/media/media-dependency-007.xht
css/CSS2/media/media-dependency-009.xht
css/CSS2/media/media-dependency-010.xht
css/CSS2/media/media-dependency-011.xht
css/CSS2/media/media-dependency-012.xht
css/CSS2/media/media-dependency-013.xht
css/CSS2/media/media-dependency-014.xht
css/CSS2/media/media-dependency-015.xht
css/CSS2/media/media-dependency-016.xht
css/CSS2/media/media-dependency-017.xht
css/CSS2/page-box/at-page-rule-001.xht
css/CSS2/positioning/position-fixed-003.xht
css/CSS2/positioning/position-fixed-004.xht
css/CSS2/positioning/position-fixed-005.xht
css/CSS2/section-index.xht
css/CSS2/syntax/at-rule-004.xht
css/CSS2/syntax/at-rule-013.xht
css/CSS2/syntax/case-sensitive-001.xht
css/CSS2/syntax/declarations-009.xht
css/CSS2/syntax/eof-004.xht
css/CSS2/syntax/import-001.xht
css/CSS2/syntax/invalid-decl-at-rule-001.xht
css/CSS2/syntax/invalid-decl-at-rule-002.xht
css/css-cascade/layer-media-query.html
css/css-cascade/layer-statement-copy-crash.html
css/css-color-adjust/rendering/dark-color-scheme/support/prefers-color-scheme-blue-purple.html
css/css-color-adjust/rendering/dark-color-scheme/support/prefers-color-scheme.svg
css/css-color-adjust/rendering/dark-color-scheme/svg-as-image-ref.html
css/css-contain/container-queries/container-inner-at-rules.html
css/css-contain/container-queries/container-units-media-queries.html
css/css-flexbox/interactive/flexbox_interactive_break-after-column-item.html
css/css-flexbox/interactive/flexbox_interactive_break-after-column-lastitem.html
css/css-flexbox/interactive/flexbox_interactive_break-after-container.html
css/css-flexbox/interactive/flexbox_interactive_break-after-item.html
css/css-flexbox/interactive/flexbox_interactive_break-after-line-order.html
css/css-flexbox/interactive/flexbox_interactive_break-after-line.html
css/css-flexbox/interactive/flexbox_interactive_break-after-multiline.html
css/css-flexbox/interactive/flexbox_interactive_break-before-column-firstitem.html
css/css-flexbox/interactive/flexbox_interactive_break-before-column-item.html
css/css-flexbox/interactive/flexbox_interactive_break-before-container.html
css/css-flexbox/interactive/flexbox_interactive_break-before-item.html
css/css-flexbox/interactive/flexbox_interactive_break-before-multiline.html
css/css-flexbox/interactive/flexbox_interactive_break-natural.html
css/css-namespaces/syntax-016.xml
css/css-nesting/conditional-properties-ref.html
css/css-nesting/conditional-properties.html
css/css-nesting/conditional-rules-ref.html
css/css-nesting/conditional-rules.html
css/css-nesting/invalid-inner-rules.html
css/css-nesting/invalidation-004.html
css/css-nesting/parsing.html
css/css-nesting/serialize-group-rules-with-decls.tentative.html
css/css-page/page-rule-declarations-001.html
css/css-ui/appearance-serialization.html
css/css-ui/webkit-appearance-serialization.html
css/css-values/calc-in-media-queries-001.html
css/css-values/calc-in-media-queries-002.html
css/css-values/calc-in-media-queries-with-mixed-units.html
css/css-values/support/mixed-units-01.html
css/css-values/support/mixed-units-02.html
css/css-values/support/mixed-units-03.html
css/css-values/support/mixed-units-04.html
css/css-values/support/mixed-units-05.html
css/css-values/support/mixed-units-06.html
css/css-values/viewport-units-media-queries.html
css/css-variables/test_variable_legal_values.html
css/css-writing-modes/test-plan/req-tcu-font.html
css/cssom/CSSGroupingRule-cssRules.html
css/cssom/CSSGroupingRule-insertRule.html
css/cssom/CSSStyleSheet.html
css/cssom/MediaList.html
css/cssom/cssom-ruleTypeAndOrder.html
css/cssom/getComputedStyle-dynamic-subdoc.html
css/cssom/idlharness.html
css/cssom/removerule-invalidation-crash.html
css/cssom/serialize-media-rule.html
css/cssom-view/MediaQueryList-addListener-removeListener.html
css/cssom-view/MediaQueryList-change-event-matches-value.html
css/cssom-view/MediaQueryList-extends-EventTarget-interop.html
css/cssom-view/MediaQueryList-extends-EventTarget.html
css/cssom-view/matchMedia-display-none-iframe.html
css/cssom-view/matchMedia.html
css/cssom-view/resources/matchMedia.js
css/printing/existing-transition-in-media-print.tentative.html
css/printing/transition-in-media-print.tentative.html
css/selectors/attribute-selectors/attribute-case/cssom.html

@romainmenke
Copy link
Author

romainmenke commented Nov 10, 2022 •
edited
Loading

Thank you for that list and the command to generate it!

Hehe, wasn't asking to include all of them for the purpose of interop 2023 :)
I wanted to make sure that I wasn't misjudging the current test coverage (my perception vs. reality).
I am going over the specification and adding missing tests in WPT to get a better overview.

@foolip
Copy link
Member

foolip commented Nov 11, 2022

Survey results for range media queries, which is part of Media Queries Level 4, have been posted to #141 (comment).

@foolip
Copy link
Member

foolip commented Nov 17, 2022 •
edited
Loading

@lilles has helped me review the Chrome failures in https://wpt.fyi/results/css/mediaqueries?label=master&label=experimental&aligned

We'd like to exclude:

  • viewport-script-dynamic.html has <meta name="viewport" content="width=300"> and can't be tested in desktop browsers.
  • Tests failures related to media query features ‘navigation-controls’, ‘overflow-block’, and ‘update’.

Additional test review might turn up more things.

@romainmenke
Copy link
Author

I am also adding more tests like this one : web-platform-tests/wpt#36911

@lilles
Copy link
Member

lilles commented Nov 17, 2022

I didn't look closely at the features mentioned above, but after looking a bit closer, nav-controls is introduced in level 5 of the spec. overflow-block/inline and update look quite trivial to implement, but I'm not sure how important they are.

@foolip
Copy link
Member

foolip commented Dec 5, 2022

@romainmenke thanks for adding those tests! I've reviewed, merged and also have labeled them. A link to all labeled tests to follow...

@foolip foolip added the accepted An accepted proposal label Feb 1, 2023
@foolip
Copy link
Member

foolip commented Feb 1, 2023

Thank you for proposing Media Queries 4 for inclusion in Interop 2023.

We are pleased to let you know that this proposal was accepted as the Media Queries 4 focus area. You can follow the progress of this Focus Area on the Interop 2023 dashboard.

For an overview of our process, see the proposal selection summary. Thank you for contributing to Interop 2023!

Posted on behalf of the Interop team.

@foolip foolip closed this as completed Feb 1, 2023
@romainmenke
Copy link
Author

Really excited about this!
Thank you @foolip and everyone involved 🙇

@foolip foolip mentioned this issue Sep 22, 2023
Closed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
accepted An accepted proposal focus-area-proposal Focus Area Proposal
Projects
No open projects
Interop 2023
Status: Proposed
Milestone
No milestone
Development

No branches or pull requests
4 participants
@gsnedders @foolip @lilles @romainmenke