Baseline 2023

Baseline is coming to caniuse.com! In this station study astir nan integration, and besides observe immoderate of nan features that became portion of Baseline successful 2023.

With nan new meaning of Baseline, location are 2 stages successful a feature's lifecycle. Firstly, erstwhile it becomes newly available, and past erstwhile it becomes widely available aft 30 months. A characteristic becomes portion of Baseline recently disposable erstwhile it becomes interoperable successful nan pursuing browsers:

• Safari (macOS and iOS)
• Firefox (desktop and Android)
• Chrome (desktop and Android)
• Edge (desktop)

Baseline lands connected Can I Use

As nan adjacent measurement successful clarifying characteristic availability, Baseline is opening to onshore connected Can I Use from today. When visiting immoderate pages connected Can I Use, you'll spot a badge telling you whether nan characteristic is successful Baseline wide available.

Features that are successful Baseline recently disposable will besides show a badge, on pinch nan twelvemonth that they became available. So, thing that became interoperable crossed nan halfway browser group this twelvemonth is portion of Baseline 2023.

In nan remainder of this post, find retired astir nan features that deed this milestone during 2023. All of these features are Baseline 2023—newly available.

Size instrumentality queries and instrumentality query units

Size container queries fto you query nan size of an element, successful overmuch nan aforesaid measurement that media queries fto you query nan size of nan viewport. They make creating reusable components overmuch easier, arsenic you tin create components that respond to nan size of nan area they are placed in.

The creation of nan pursuing paper changes depending connected nan width of nan component. Learn much successful Container queries onshore successful unchangeable browsers.

New colour spaces and functions

CSS now supports colour spaces that let you to entree colors extracurricular of nan sRGB gamut. This intends that you tin support HD (high definition) displays, utilizing colors from HD gamuts.

New colour models

Now successful Baseline, nan colour functions lch(), lab(), oklch(), and oklab() springiness entree to nan LCH, Lab, OKLCH, and OKLab colour models.

Try retired nan caller colour spaces utilizing gradient.style.

The color-mix() function

In addition, caller colour functions person go portion of Baseline. The color-mix() usability enables mixing of 1 colour into another, successful immoderate of nan colour spaces. In nan pursuing CSS, 25% of bluish is mixed into white, successful nan srgb colour space.

.example { background-color: color-mix(in srgb, bluish 25%, white); }

Learn much astir color-mix().

The color() function

The color() usability tin beryllium utilized for immoderate colour abstraction that specifies colors pinch R, G and B channels. color() takes a colour abstraction parameter first, past a bid of transmission values for RGB and optionally immoderate alpha. You tin usage immoderate of: srgb, srgb-linear, display-p3, a98-rgb, prophoto-rgb, rec2020, xyz, xyz-d50, and xyz-d65. For example:

.valid-css-color-function-colors { --srgb: color(srgb 1 1 1); --srgb-linear: color(srgb-linear 100% 100% 100% / 50%); --display-p3: color(display-p3 1 1 1); --rec2020: color(rec2020 0 0 0); --a98-rgb: color(a98-rgb 1 1 1 / 25%); --prophoto: color(prophoto-rgb 0% 0% 0%); --xyz: color(xyz 1 1 1); }

The CSS precocious meaning colour guide gives you galore much examples of nan caller colour spaces and functions, on pinch accusation astir which to usage when.

Compression streams

The Compression Streams API is simply a JavaScript API for compressing and decompressing streams of data. By utilizing this built-in compression, applications nary longer request to see a compression library.

Learn much successful Compression streams are now supported successful each browsers.

Offscreen canvas

Before OffscreenCanvas, canvas drafting capabilities were tied to nan <canvas> element, which meant it was straight depending connected nan DOM. OffscreenCanvas, arsenic nan sanction implies, decouples nan DOM and nan Canvas API by moving it off-screen.

Thanks to this decoupling, rendering of OffscreenCanvas is afloat detached from nan DOM and therefore offers immoderate velocity improvements complete nan regular canvas arsenic location is nary synchronization betwixt nan two. What is more, though, is that it tin beryllium utilized to move rendering activity to a Web Worker, moreover though location is nary DOM available, freeing nan main thread and making nan exertion much responsive.

Learn much successful OffscreenCanvas—speed up your canvas operations pinch a web worker

Module preload

Preloading modules tin trim download and processing time. Add rel="modulepreload" to nan nexus constituent referencing a JavaScript module, and nan browser gets nan module, parses and compiles it, and puts nan results into nan module representation fresh to execute.

Learn much successful nan article Preload modules.

Trigonometric functions successful CSS

In 2023 trigonometric functions from nan CSS Values and Units Level 4 specification became interoperable. This intends that nan functions sin(), cos(), tan(), asin(), acos(), atan(), and atan2() are portion of Baseline 2023.

This demo uses nan trigonometric functions to move items connected a information way information a cardinal point.

Learn really to usage these functions, and observe immoderate usage cases successful Trigonometric functions successful CSS.

The inert attribute

Inert intends lacking nan expertise to move, truthful erstwhile you people thing inert, you region activity aliases relationship from those DOM elements. The inert property causes nan browser to disregard nan element.

• The click arena does not occurrence if a personification clicks connected nan element.
• The constituent won't summation focus.
• The constituent and its contented is excluded from nan accessibility tree.

This property should beryllium added to elements that are offscreen aliases different hidden. You tin study much successful The inert attribute.

Subgrid successful CSS grid layout

The subgrid worth for grid-template-columns and grid-template-rows lets you usage nan tracks defined connected a genitor grid, connected nested grids. This intends that you tin align elements wrong these nested grids pinch each other.

In nan article CSS subgrid you will find immoderate examples and links to galore different posts and examples highlighting subgrid usage cases.

NumberFormat V3

Intl.NumberFormat V3 is simply a group of caller features for Intl.NumberFormat, that became portion of Baseline during 2023. The further features are:

• Three caller functions to format ranges of numbers: formatRange, formatRangeToParts, and selectRange.
• Grouping enum
• New rounding and precision options
• Rounding priority
• Interpret strings arsenic decimals
• Rounding modes
• Sign show negative

The proposal for NumberFormat V3 specifications each of nan caller features.

The Fullscreen API

The Fullscreen API lets you spot an element, specified arsenic a <video> into fullscreen mode, by calling nan requestFullscreen() method. It besides provides methods for detecting if an constituent is successful fullscreen mode, and whether nan archive is successful a authorities that will fto you petition fullscreen mode.

Learn much successful this Guide to nan Fullscreen API connected MDN.

The CSS :has() selector

Just making Baseline 2023 is nan :has() selector, which will onshore successful Firefox 121 connected nan 19th of December. Among different uses, this selector acts arsenic a parent selector, letting you prime an constituent based connected things that are wrong it. For example, you tin use different CSS depending connected whether location is an image wrong an constituent aliases not.

Find retired much successful :has(): nan family selector.

More features that joined Baseline this year

This station has shared immoderate of nan cardinal features that became portion of Baseline this year, but there's more.

• Constructable Stylesheets
• Complex nth-child selectors successful CSS
• The scope syntax for media queries
• Import Maps
• Multiple values for CSS display
• @counter-style
• The counter-set CSS property
• The linear() easing function
• Origin Private File System (OPFS)
• CSS Nesting, including nan alteration that adds relaxed parsing.
• CSS :dir() pseudo-class selector
• CSS headdress magnitude unit
• CSS masking
• Media query support for HTML video <source> elements
• The HTML <search> element
• Lazy loading of <iframe> elements (landing successful Firefox 121 connected December 19th)
• The lh and rlh CSS line-height units

Many of these features reached interoperability done nan collaborative activity connected Interop 2023. It's breathtaking to spot really features tin beryllium brought done that process, and onshore successful Baseline arsenic recently available, which sets disconnected nan timer for them to go wide available. This creates a clearer way for decisions connected erstwhile to adopt features successful your ain projects.