Web Specs • Lea Verou

This section contains an overview of web technologies I have designed, proposed, or significantly influenced. Each feature includes a complete timeline from proposal to shipping across browsers. Beyond listing my body of work, I’m hoping it can provide insight into the process and timeline of how the Web evolves.

This does not incude any of my high level web architecture work as a W3C TAG member, spread across two areas: a) design reviews of web technology proposals, and b) documenting Design Principles for the Web Platform, an effort I took the lead on since my early days as a TAG member.

2 proposals 2011 1 proposal 2012 0 proposals 2013 0 proposals 2014 0 proposals 2015 0 proposals 2016 3 proposals 2017 4 proposals 2018 0 proposals 2019 0 proposals 2020 3 proposals 2021 3 proposals 2022 5 proposals 2023 4 proposals 2024

Index (26 proposals)

Status	Description
Baseline	The feature has been shipped in all major browsers. 7 proposals Relaxed CSS Nesting Syntax Conical gradients Decouple selector logic from specificity (`:where()`) CSS Trigonometric functions CSS-wide syntax for color interpolation `caret-color` Relaxed `box-shadow` syntax
Shipped	The feature has shipped in one or more major browsers, but not all. 1 proposal Relative Colors
Developer Trial	The feature has only shipped in browsers behind a flag. 1 proposal Auto-size text fields and dropdowns
In spec	The feature has been added to the official specification (by me or someone else). Keep in mind that often additional fleshing out may be needed to bring the spec to a state that it can be implemented in browsers. 5 proposals Use OKLab for gradient color interpolation by default Color API `contrast-color()` MVP Value clamping in one direction Multi-color borders via `stripes()`
Accepted	There a resolution that there is Working Group consesnsus to work on the feature, but it has not yet been added to the specification. 8 proposals Simplified `:local-link` Continuous image borders Arbitrary rounded polygons Tooltip styling (`::tooltip`) Reading parent values of arbitrary CSS properties via `inherit()` `@image` `color-extract()` Conditionless container queries
Proposal	The feature does not yet have WG consensus. 4 proposals CSS Variable Groups CSS Color Scales Improve DX of element reference attributes by allowing relative references instead of only ids Custom attributes

Relaxed CSS Nesting Syntax Baseline

Drove several milestones to progressively refine and simplify the syntax in a way that prioritizes user needs by reducing boilerplate and thus inreasing efficiency, readability, and reducing error-proneness.

Interim syntax Superseded

Oct 2022 – May 2023

This was a proposal for a simplified CSS nesting syntax that significantly reduced the use cases that had to explicitly include a nesting selector (&). It was also fully compatible with the North Star syntax, and basically got us halfway there. Originally known as “Lea’s proposal”, and later as “Option 3” due to its position in the pros & cons table.

Proposal 3 m Accepted 3 m Shipped 4 m In spec

Proposal
WG Resolution
Specced (by Tab & Adam)
Shipped in Chrome 112
Shipped in Safari 16.5

Note: Firefox shipped the North Star syntax directly (see below), without shipping the interim syntax.

North Star CSS Nesting Syntax Baseline

Oct 2022 – Dec 2023

This was the ideal syntax where the nesting selector (&) is only needed to express user intent, and never for technical reasons. We knew all along that this was the ideal syntax, but for many years it was considered infeasible.

Proposal 6 m Accepted 3 w In spec 3 m Shipped 4 m Baseline

Proposal
Feasibility confirmed for Chrome (by andruud)
WG Resolution
Specced (by Tab)
Shipped in Firefox 117
Shipped in Chrome 120
Shipped in Safari 17.2

Relative Colors Shipped

Oct 2018 –

Adds the capability of creating new colors by tweaking the components of existing colors in any color space, to facilitate dynamic design systems that generate several hues and tints from a few input colors.

Proposal 8 m Accepted 7 m In spec 3 y Shipped

Proposal
WG Resolution
Specced
Shipped in Safari 16.4
Shipped in Chrome 118
Shipped in Chrome 119
Interop 2024 focus area

Conical gradients Baseline

Mar 2011 – Nov 2020

Conical gradients are a type of gradient that allows for smooth color transitions around a center point. Possibly my earliest proposal that actually got implemented in browsers.

Proposal 8 m In spec 7 y Shipped 2 y Baseline

Proposal
Specced
Refined spec and integrated to CSS Images (by Tab)
Polyfill
Shipped in Chrome 69
Shipped in Safari 12.1
Shipped in Firefox 83

Decouple selector logic from specificity (`:where()`) Baseline

Apr 2017 – Jan 2021

Traditionally, CSS included a heuristic that inferred selector importance from its querying logic. Often this inference was wrong, and authors had little recourse, giving rise to patterns like BEM that avoided the issue by giving up on most querying logic altogether. :where() was a new pseudo-class that allows CSS authors to include querying criteria in their selectors without affecting specificity (the selector score that determines precedence), decoupling the two.

Proposal 7 m Accepted 3 y Shipped 7 m Baseline

Proposal
WG Resolution
Naming resolution
Shipped in Firefox 78
Shipped in Safari 14
Shipped in Chrome 88

CSS Trigonometric functions Baseline

Feb 2018 – Mar 2023

Adds trigonometric functions to CSS, to facilitate the creation of complex shapes and animations.

Proposal 1 y Accepted 4 w In spec 3 y Shipped 1 y Baseline

Proposal
WG Resolution
Specced (by Tab)
Shipped in Safari 15.4
Shipped in Firefox 108
Shipped in Chrome 111

Auto-size text fields and dropdowns Developer Trial

Jul 2022 –

A way to specify that form elements should be sized by their input value. This is a big pain point for authors, as it is very commonly needed and quite tricky to implement manually.

Proposal 1 y 3 m In spec 3 d Developer Trial

Initial proposal for <textarea> (by Ian Kilpatrick)
Proposal to extend to <input> and <select>
Specced (by Florian & Kent Tamura)
Shipped in Chrome 119
Shipped in Chrome 123

CSS-wide syntax for color interpolation Baseline

Nov 2021 – Nov 2021

Color

Defined the syntax used across CSS to specify how color interpolate. It is currently used in color-mix() and gradients, and soon in transitions, animations, and more.

Specced

Use OKLab for gradient color interpolation by default In spec

Oct 2022 –

Minor feature, Color

Proposal 5 m Accepted 3 m In spec

Proposal
WG Resolution
Specced (by Chris Lilley)

`caret-color` Baseline

Nov 2011 – Mar 2018

caret-color is a property that allows authors to customize the color of the text input caret.

Proposal 3 y Accepted 2 y Shipped 1 y 1 m Baseline

Proposal
WG Resolution
Shipped in Chrome 57
Shipped in Firefox 53
Shipped in Safari 11.1

Relaxed `box-shadow` syntax Baseline

Oct 2012 – Oct 2012

Minor feature

One of my first web standards proposals. Relaxed the syntax of box-shadow to minimize author errors. Gave birth to one of CSS’s design principles, which Elika called “Lea Verou reordering principle”.

Proposal

Color API In spec

May 2021 –

JS, Color

A proposal for a Color object API for the web platform. The purpose is twofold: to give APIs a way to represent color inputs and outputs that does not depend on strings, and to give authors a way to manipulate colors.

In spec 2 m Accepted

Proposal
WG Resolution
Initial spec draft (by me & Chris Lilley)

`contrast-color()` MVP In spec

Aug 2023 –

a11y, Color, MVP

Automatically generating contrasting colors is a big author pain point, but discussusions around fleshing out a full contrast-color() function were taking too long. I proposed an MVP that would cover the most common use cases, and got it accepted. While I did not initially propose contrast-color(), I drove aggressively reducing scope to facilitate shipping an MVP that would cover >80% of use cases.

Proposal 6 m In spec

Proposal
Tweak (by Tab & Nicole)
Specced

Simplified `:local-link` Accepted

Nov 2017 –

Selectors

This addresses the common author pain point of styling links to the current page (e.g. in a navigation menu) in a different way. It built on an existing proposal that had been removed, but simplified it to cover the most common use cases without the complexity of the previous proposal.

Proposal 1 m Accepted

Proposal
WG Resolution
Specced (by Elika)

Continuous image borders Accepted

Oct 2023 –

Address a common pain point by adding a border-area keyword to background-clip

Proposal 4 m Accepted

Proposal
WG Resolution

Arbitrary rounded polygons Accepted

Jan 2024 –

This proposal allows authors to add rounding to arbitrary polygon shapes, addressing a common pain point that previously required pre-generated images

Proposal 3 w Accepted

Proposal
WG Resolution

Value clamping in one direction In spec

Dec 2023 –

Minor feature

…by allowing none values for clamp()

Proposal 2 m Accepted 3 w In spec

Proposal
WG Resolution
Specced (by Tab)

Multi-color borders via `stripes()` In spec

Apr 2018 –

This is a reusable primitive that was designed to allow borders of multiple colors, something that was requested by accessiblity groups.

Proposal 3 m Accepted 5 y In spec

Proposal
WG Resolution
Specced (by Sebastian)

Jun 2023 –

Styling tooltips in a custom way is a huge author pain point. Since browser-generated tooltips cannot be styled, authors end up having to recreate the tooltip functionality entirely from scratch, with significantly worse DX and accessibility. This proposal would allow browser-generated tooltips to be styled in a limited way.

Proposal 1 m Accepted

Proposal
WG Resolution

Reading parent values of arbitrary CSS properties via `inherit()` Accepted

Jul 2018 –

Web Components

Allow authors to read arbitary properties from their parent and use them in calculations, solving several diverse use cases at once.

Proposal 3 y Accepted

Proposal
WG Resolution
Second WG resolution (naming & MVP)

`@image` Accepted

Aug 2021 –

A new at-rule to define and manipulate images in CSS, solving several image-related pain points at once.

Proposal 1 y 1 m Accepted

Proposal
WG Resolution

`color-extract()` Accepted

Jan 2022 –

Color

A function to extract individual color components (e.g. lightness) from an arbitrary CSS color, facilitating the creation of dynamic design systems.

Proposal 3 d Accepted

Proposal
WG Resolution

Conditionless container queries Accepted

Aug 2023 –

Minor feature

Make the query part of container queries optional.

Proposal 3 m Accepted

Proposal
WG Resolution

CSS Variable Groups Proposal

Feb 2024 –

Design systems, Web Components, Color

A way to group related variables and pass them around, to make it less painful to write CSS for design systems and to integrate third-party components.