March 2, 2016
CSS custom properties ship in Chrome 49
Google shipped CSSCascading Style Sheets — the language for layout, color, and typography on web pages. custom properties in ChromeGoogle's web browser — built on Chromium and the most widely used browser worldwide. 49 on March 2, 2016 — native `--variable` syntax with the `var()` function for runtime theming.
What it was for
CSSCascading Style Sheets — the language for layout, color, and typography on web pages. custom properties let authors define `--main-color: #06c` and reference it with `color: var(--main-color)` — unlike SassSyntactically Awesome StyleSheets — a CSS preprocessor adding variables, nesting, and mixins. variables, they cascade, inherit, and update at runtime via JavaScript `setProperty()`. ChromeGoogle's web browser — built on Chromium and the most widely used browser worldwide. 49 brought them to mainstream browsers, enabling dynamic themes without preprocessor rebuilds.
Why it's here
Native CSSCascading Style Sheets — the language for layout, color, and typography on web pages. variables closed the biggest gap between preprocessors and the platform.
Why it mattered
Runtime-updatable variables enabled theming, design tokens, and responsive design without JavaScript frameworks.
What it solved
Preprocessor variables were static — changing a theme required recompiling the entire stylesheet.
Media
- ImageCascading Style Sheets
daPhyre (File:CSS3 and HTML5 logos and wordmarks.svg) Elfi (File:CSS3 logo and wordmark.svg) ExE Boss, CC BY 3.0, via Wikimedia Commons
Related
- CSS 2.1 becomes a W3C RecommendationJune 7, 2011
- Sass releasedNovember 28, 2006
- Tailwind CSS first releasedNovember 1, 2017