Baseline 2023: The year in interoperable web features

Baseline is the project that tracks when web platform features can be used across the core browser set. A feature enters the newly available stage once it works interoperably in Safari (macOS and iOS), Firefox (desktop and Android), Chrome (desktop and Android), and Edge (desktop). After 30 months of support, it becomes widely available. This year, Baseline data began appearing on caniuse.com pages, with badges indicating whether a feature is widely available or newly available along with the year it crossed that threshold. The features that became newly available in 2023 are now collectively known as Baseline 2023.

CSS container queries and query units

Size container queries let you style an element based on the size of its container, much the way media queries style based on viewport size. This makes components truly reusable: instead of reacting to the page layout, a component responds to the dimensions of the area holding it. Container query units are part of the same feature set.

New CSS color spaces and functions

CSS can now express colors outside the sRGB gamut, enabling HD (high definition) color on capable displays.

New color models

Four new color functions reached Baseline in 2023: lch(), lab(), oklch(), and oklab(). These give access to the LCH, Lab, OKLCH, and OKLab color models, respectively.

The color-mix() function

Also newly available is color-mix(), which mixes one color into another in any supported color space. For instance, you can mix 25% blue into white in the srgb color space.

The color() function

The color() function lets you specify colors in any RGB-style color space. It takes a color space parameter first, followed by R, G, and B channel values and optionally an alpha value. Supported color spaces include srgb, srgb-linear, display-p3, a98-rgb, prophoto-rgb, rec2020, xyz, xyz-d50, and xyz-d65.

Compression Streams API

The Compression Streams API is a JavaScript interface for compressing and decompressing streams of data. Developers can use built-in compression without shipping a third-party compression library in their app.

OffscreenCanvas

OffscreenCanvas decouples the Canvas API from the DOM. Because rendering is fully detached from the <canvas> element, there is no DOM synchronization overhead, offering speed improvements over traditional canvas usage. It also enables moving rendering work to a Web Worker, keeping the main thread free and improving application responsiveness.

Module preload

Adding rel="modulepreload" to a link element pointing at a JavaScript module tells the browser to fetch, parse, and compile the module ahead of time. The module is placed into the module map so execution can begin as soon as it's needed, reducing download and processing delays.

CSS trigonometric functions

Seven trigonometric functions from the CSS Values and Units Level 4 specification became interoperable in 2023: sin(), cos(), tan(), asin(), acos(), atan(), and atan2(). These are all part of Baseline 2023.

The inert attribute

The inert attribute is a global HTML attribute that makes browsers ignore an element entirely. When an element is marked inert: the click event doesn't fire, the element cannot receive focus, and it is excluded from the accessibility tree. It's meant for elements that are offscreen or otherwise hidden from user interaction.

Subgrid in CSS grid layout

The subgrid value for grid-template-columns and grid-template-rows lets nested grids use the track definitions of their parent grid. This aligns elements across separate nested grids, since they all share a common set of tracks.

Intl.NumberFormat V3

Intl.NumberFormat V3 landed in 2023, adding a set of new capabilities: range formatting methods (formatRange, formatRangeToParts, and selectRange), a grouping enum, new rounding and precision options, rounding priority controls, string-as-decimal interpretation, rounding modes, and negative sign display options.

The Fullscreen API

The Fullscreen API lets you put an element like a <video> into fullscreen mode with requestFullscreen(). It also provides methods to detect whether an element is fullscreen and whether the document is in a state that would permit fullscreen to be requested.

The CSS :has() selector

The :has() selector finishes off Baseline 2023, reaching Firefox 121 on the 19th of December. It functions as a parent selector, matching an element based on its descendants—for example, styling a figure differently when it contains an image.

The other features that achieved Baseline status

A broader set of web platform capabilities also joined Baseline this year, spanning CSS, JavaScript, and file system APIs:

  • CSS enhancements: including CSS Nesting (with the relaxed parsing update), multiple values for display, complex nth-child() selectors, the range syntax for media queries, the :dir() pseudo-class, the @counter-style rule and counter-set property, the linear() easing function, the lh/rlh line-height units, the cap length unit, CSS masking, and Constructable Stylesheets.
  • HTML & platform features: Import Maps, Origin Private File System (OPFS), the <search> element, lazy loading for <iframe>s (arriving in Firefox 121 on December 19th), and media query support for video <source> elements.

Many of these features crossed the finish line thanks to the coordinated efforts of the Interop 2023 project. The process demonstrates how cross-browser work can push a feature forward until it registers as Baseline Newly available, at which point the clock starts on its journey to broadly available status. That trajectory gives developers a more predictable basis for making adoption decisions in their own work.