Media Queries Level 4

Media Queries Level 4
Title	Media Queries Level 4
Status	Working Draft / Candidate Recommendation
Organization	World Wide Web Consortium (W3C), WHATWG
First-published	2013–2019 (evolving)
Related	Cascading Style Sheets, CSS Media Queries Level 3, CSS Logical Properties, Responsive web design

Media Queries Level 4

Media Queries Level 4 is a specification developed by the World Wide Web Consortium and contributors from WHATWG that extends Cascading Style Sheets capabilities for adapting presentation to different output environments. It builds on prior work such as CSS Media Queries Level 3 and intersects with other standards like HTML5 and SVG to enable responsive experiences across devices from iPhone to Raspberry Pi-powered displays. Major contributors include working groups composed of engineers from Google, Mozilla, Microsoft, Apple Inc., and academic partners such as MIT and Stanford University.

Overview

The specification defines media features, boolean ranges, and syntactic forms that let authors query device characteristics exposed by browsers and user agents such as Blink-based engines, Gecko-based engines, and WebKit-based engines. It formalizes support for features like dynamic viewport dimensions, environmental variables introduced for CSS Environment Variables, and new value types inspired by proposals from contributors at W3C Workshop on Web & TV and implementers from Opera Software. The work aims to resolve interoperability issues identified in implementations by vendors including Samsung and organizations such as Mozilla Foundation.

New and Changed Features

Media Queries Level 4 adds and refines many features beyond Level 3: - Range syntax using comparison operators (e.g., <=, >=) standardized after discussions involving IETF and W3C Technical Architecture Group. Vendor engineers from Google LLC and Microsoft Corporation influenced semantics for interoperability with EdgeHTML and Chromium-derived browsers. - New media features such as resolution units combining device-pixel-ratio work from Apple Inc. and Samsung Electronics, and input modality queries influenced by accessibility stakeholders including W3C Web Accessibility Initiative and researchers at Carnegie Mellon University. - The specification formalizes the concept of media feature ranges and boolean combinations, addressing gaps raised by implementers at Mozilla Corporation and public feedback from events like Google I/O and WWDC. - Introduces syntax for query-level logical combinators that complement precedents set by CSS Selectors Level 3 and CSS Values and Units Module authors from WHATWG.

Syntax and Usage

The syntax expands on the familiar @media at-rule from CSS2 and CSS3 with expressive grammar and precise parsing rules contributed by language designers from Adobe Systems and Mozilla Foundation: - Range syntax: comparisons such as (width >= 600px) and (height < 800px) align with tokenization recommendations from IETF HTTP Working Group discussions. Examples follow conventions used in HTML5 examples and SVG 2 integration notes. - Logical combinators: and, or, not semantics clarified in coordination with authors of ECMAScript-oriented parsing tests used in Khronos Group interoperability testing. - Units and types: resolution, orientation, and pointer features reference work by teams at Intel Corporation and researchers publishing at ACM SIGGRAPH and Usenix conferences. - Interaction with media feature ranges uses value typing and canonicalization strategies that echo treatments in CSS Color Level 4 and CSS Variables proposals led by contributors from Mozilla and Google.

Interaction with Other Specifications

Level 4 explicitly interacts with multiple web standards: - CSSOM and CSS Cascading rules from W3C affect evaluation order and inheritance in media queries, with implementer guidance from WHATWG editors. - Integration with HTML5 viewport meta semantics and Service Workers considerations discussed in multi-stakeholder groups including representatives from Cloudflare and Akamai Technologies. - Accessibility tie-ins: features for input, hover, and pointer modalities complement guidance from W3C Web Accessibility Initiative and test suites developed by Deque Systems and academic labs at University of Washington. - Print and paged media interactions reference CSS Paged Media Module work and intersect with requirements from publishing stakeholders such as Elsevier and Springer Nature.

Browser Support and Implementation Status

Support has been incremental across vendors: - Chromium-based browsers (including Google Chrome and Microsoft Edge) implemented many Level 4 features early, driven by engineers at Google LLC and Microsoft Corporation. - Mozilla Firefox added support for range syntax and select features as contributions from Mozilla Corporation engineers reached release stability. - WebKit-based browsers on Apple Inc. platforms and others implemented parts influenced by Safari team decisions and hardware vendors like Qualcomm and Samsung which affected testing on mobile platforms. - Conformance and testing rely on test suites maintained by W3C and community-run suites hosted by organizations such as Khan Academy and GitHub projects led by contributors from MDN Web Docs.

Examples and Use Cases

Common patterns in responsive design, progressive enhancement, and accessibility: - Responsive layouts: combining (min-width >= 600px) and (orientation: landscape) used in patterns promoted by authors like Ethan Marcotte and organizations such as A List Apart. - Accessibility-aware styling: queries like (pointer: coarse) and (prefers-reduced-motion: reduce) reflect recommendations from W3C Web Accessibility Initiative and accessibility audits by Deque Systems. - Device adaptation: feature queries for resolution and dynamic viewport behaviors are used by teams at Netflix and Spotify to tailor streaming UIs on devices including Roku and Amazon Fire TV. - Print-oriented rules: combining media queries with CSS Paged Media Module supports workflows used by publishers such as The New York Times and BBC for multi-format distribution.

Category:Web standards