CSS Values and Units Module
Generated by GPT-5-miniExpansion Funnel Raw 72 → Dedup 0 → NER 0 → Enqueued 0
| CSS Values and Units Module | |
|---|---|
| Title | CSS Values and Units Module |
| Status | Living standard |
| Organization | Cascading Style Sheets Working Group |
| Initial publication | 2012 |
| Latest revision | 2024 |
| Related | CSS Cascading and Inheritance, CSS Fonts Module, CSS Containment Module |
CSS Values and Units Module
The CSS Values and Units Module defines value types, syntactic forms, and unit semantics used across World Wide Web Consortium specifications and implementations such as Mozilla Firefox, Google Chrome, Apple Safari, and Microsoft Edge. It provides a unified vocabulary for interoperable styling across modules like CSS Transforms Module, CSS Grid Layout Module, CSS Flexible Box Layout Module, and CSS Animations Module, and informs engines including WebKit, Blink, and Gecko.
Overview
The Module standardizes value categories and quantity units referenced by specifications such as CSS Color Module Level 4, CSS Fonts Module Level 4, CSS Box Model Module, and Selectors Level 4. It establishes parsing rules used by implementers like Opera Software contributors and browser vendors involved in the WHATWG and W3C processes. The work affects web platform projects including Chromium, Servo, Electron (software), and tooling ecosystems such as Sass (stylesheet language) and PostCSS.
Value Types
Value types include primitives and composite types recognized by modules including SVG 1.1 and HTML5. Primitive types documented in the Module include
Units (Absolute and Relative)
Absolute units (such as px, in, cm, mm, pt, pc) derive from physical standards referenced historically to organizations like International Bureau of Weights and Measures and are used in contexts including Print Media and Paged Media Module. Relative units (em, ex, ch, rem, vw, vh, vmin, vmax, %), used by Bootstrap (front-end framework), Tailwind CSS, and layout modules like CSS Grid Layout Module, depend on contexts such as font metrics and viewport dimensions defined by specifications including CSS Values and Units Module Level 4 and Media Queries Level 4. Viewport-relative units interact with platform features in Android (operating system), iOS, and user-agent behaviors of browsers like Safari. Newer units such as dppx and dpi, and unit concepts like device pixels per CSS pixel, reflect work informed by DisplayPort and High-DPI device support in projects like Retina display discussions.
Syntax and Parsing
The Module provides formal ABNF-like grammars that align with parsing strategies used in ECMAScript parsers embedded within engines like V8 (JavaScript engine) and SpiderMonkey. It prescribes tokenization and error-recovery rules to ensure consistent behavior across implementations such as Servo and Blink when encountering malformed declarations in stylesheets served by servers like Apache HTTP Server and Nginx. Functions like calc(), min(), max(), and clamp() have defined precedence and type-checking semantics to interoperate with modules like CSS Transitions Module and CSS Animations Module. The specification also addresses serialization formats consumed by build tools such as Webpack and Gulp (software).
Interoperability and Computation
The Module defines algorithms for unit conversion, resolution of percentage contexts, and constraint solving used by layout engines such as LayoutNG and compositors like Skia. Computation rules enable consistent animation interpolation for properties in CSS Transitions Module Level 2 and permit compositing by GPU stacks used by Vulkan-backed renderers. Interaction with media features in Media Queries Level 4 and container queries from Container Queries requires deterministic evaluation of values across authorship tools like Figma (software) and frameworks such as Angular (web framework). The specification also informs accessibility guidelines from organizations like W3C Web Accessibility Initiative where relative units and user zoom affect readable rendering across devices from Samsung Electronics to Lenovo hardware.
Browser Support and Implementation Notes
Major browser engines—Blink, WebKit, Gecko—implement the Module progressively; feature reports and update notes are tracked in repositories such as Chromium issue tracker and Mozilla Bugzilla. Differences in handling legacy units, rounding, and sub-pixel layout have been discussed in venues like GitHub PRs, WHATWG mailing list threads, and W3C Working Group drafts. Polyfills and post-processing tools like Autoprefixer and preprocessors including Less (stylesheet language) help bridge gaps for older browsers such as legacy versions of Internet Explorer. Interoperability test suites maintained by W3C and community projects like web-platform-tests exercise parsing, unit conversion, and functional notation scenarios to drive convergence.