Tracking issue: media queries (css `@media(...)`)
Media queries are a very useful feature. Servo has support for the syntax and a general framework for implementing them through Stylo. And it supports a few of the most common query types. However there are a large number of media queries that we don't support.
Spec: https://www.w3.org/TR/mediaqueries-5/ MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_media_queries/Using_media_queries
We have a bug report on Blitz that @media(hover: hover) is required for tailwind: https://github.com/DioxusLabs/blitz/issues/252
List of media queries
This is a list of all of the media query types supported by Gecko. The ones supported by Servo are ticked.
- width
- height (https://github.com/servo/stylo/pull/395)
- orientation (https://github.com/servo/stylo/pull/395)
- aspect-ratio (https://github.com/servo/servo/pull/45490)
- device-width (https://github.com/servo/servo/pull/44978)
- device-height (https://github.com/servo/servo/pull/44978)
- device-aspect-ratio
- device-pixel-ratio
- transform-3d
- resolution
- display-mode
- grid
- scan
- color
- color-index
- monochrome
- color-gamut
- prefers-color-scheme
- prefers-reduced-motion (https://github.com/servo/servo/pull/42011)
- prefers-reduced-transparency (https://github.com/servo/servo/pull/42011)
- prefers-contrast (https://github.com/servo/servo/pull/42011)
- forced-colors
- inverted-colors
- overflow-block
- overflow-inline
- update
- dynamic-range
- video-dynamic-range
- scripting
- pointer (https://github.com/servo/servo/pull/45681)
- any-pointer (https://github.com/servo/servo/pull/45681)
- hover (https://github.com/servo/servo/pull/45681)
- any-hover (https://github.com/servo/servo/pull/45681)
Implementation hints
- The Servo implementations of the queries live in https://github.com/servo/stylo/blob/main/style/servo/media_queries.rs
- The Gecko implementations of the queries live in https://github.com/servo/stylo/blob/main/style/gecko/media_features.rs
Our general stratagy thus-far has been to pass data into Stylo via the Device
See these PRs implementing the prefers-color-scheme media query:
Source: servo/servo