Web Specs

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.
8 proposals
Shipped The feature has shipped in one or more major browsers, but not all.
0 proposals
Developer Trial The feature has only shipped in browsers behind a flag.
1 proposal
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
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
Proposal The feature does not yet have WG consensus.
4 proposals

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

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

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 (RCS) Baseline

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 1 y 3 m Baseline
Proposal
WG Resolution
Specced
Shipped in Safari 16.4
Shipped in Chrome 118
Shipped in Chrome 119
Interop 2024 focus area
Shipped in Firefox 128

Conical gradients Baseline

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

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

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

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

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

Proposal 5 m Accepted 3 m In spec
Proposal
WG Resolution
Specced (by Chris Lilley)

caret-color Baseline

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

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

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

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
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

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

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

…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

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)

Tooltip styling (::tooltip) Accepted

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

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

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

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

Make the query part of container queries optional.
Proposal 3 m Accepted
Proposal
WG Resolution

CSS Variable Groups Proposal

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.
Proposal

CSS Color Scales Proposal

A way to define continuous color scales in CSS and pick arbitrary colors on them, to facilitate the creation of dynamic design systems.
Proposal

Improve DX of element reference attributes by allowing relative references instead of only ids Proposal

An attempt to improve usability of HTML across several APIs by improving the ergonomics of how an element can reference another.
Proposal

Custom attributes Proposal

An ambitious attempt to solve several web components pain points at once
Original proposal (naming only)
Proposal