What’s new on the web platform?

WHAT’S NEW ON THE WEB PL ATFORM? R A C H E L A N D R E W, G O O G L E

Rachel Andrew Content lead for Chrome Web Developer Relations at Google, CSS Working Group member. rachelandrew@google.com | @rachelandrew on social media.

New web platform features are exciting! But they also give us more to learn. And, how do we work out if they are available crossbrowser and ready to use in production?

Learn more at: https://web.dev/baseline/

WHAT’S NEW? • Web platform features that are part of Baseline. • Web platform features that are newly interoperable. • Web platform features we can expect to have broadly available soon.

BASELINE FEATURES S U P P O RT E D I N T H E C U R R E N T A N D L A S T V E R S I O N O F M A J O R B R OW S E R E N G I N E S .

The <dialog> element A new HTML element for modal and non-modal dialog pop-ups.

myButton.addEventListener(‘click’, () => { myDialog.showModal(); }); Learn more at: https://web.dev/learn/html/dialog/

dialog::backdrop { background: rgba(0, 0, 0, 0.5); }

CSS trigonometric functions More mathematical functions in CSS with the sin(), cos(), tan(), asin(), acos(), atan(), and atan2() functions.

.element { width: calc(sin(30deg) * 100px); height: calc(sin(30deg) * 100px); } Learn more at: https://web.dev/css-trig-functions/

Learn more at: https://web.dev/css-trig-functions/

Viewport units Representing the large, small, and dynamic viewport.

Learn more at: https://web.dev/viewport-units/

Learn more at: https://web.dev/viewport-units/

LARGE, SMALL, AND DYNAMIC UNITS • Small: svw, svh, svi, svmin, svmax • Large: lvw, lvh, lvi, lvmin, lvmax • Dynamic: dvw, dvh, dvi, dvmin, dvmax

:focus-visible Show a different focus indicator based on the way a user is interacting with the page.

.button:focus-visible { outline: 3px solid orange; outline-offset: 3px; } Learn more at: https://hidde.blog/focus-visible-more-than-keyboard/

Cascade Layers Manage the cascade and prevent specificity problems.

@layer utilities { .padding-sm { padding: 0.5rem; } .padding-lg { padding: 0.8rem; } } Learn more at: https://developer.chrome.com/blog/cascade-layers/

@layer framework, layout, utilities; Learn more at: https://developer.chrome.com/blog/cascade-layers/

NEWLY INTEROPERABLE N OW S U P P O RT E D I N A L L M A J O R B R OW S E R E N G I N E S .

105 110 16 Size container queries Testing the size of the container, rather than the viewport.

.element { container-type: inline-size; }

.element { container-type: inline-size; container-name: sidebar; }

@container (min-width: 500px) { }

@container sidebar (min-width: 500px) { }

104 102 16.4 Media queries range syntax Streamline your media queries.

@media (min-width: 400px) { /* Styles for viewports with a width of 400 pixels or greater. */ } Learn more at: https://developer.chrome.com/blog/media-query-range-syntax/

@media (width >= 400px) { /* Styles for viewports with a width of 400 pixels or greater. */ } Learn more at: https://developer.chrome.com/blog/media-query-range-syntax/

@media (min-width: 400px) and (max-width: 600px) { /* Styles for viewports between 400px and 600px. */ } Learn more at: https://developer.chrome.com/blog/media-query-range-syntax/

@media (400px <= width <= 600px ) { /* Styles for viewports between 400px and 600px. */ } Learn more at: https://developer.chrome.com/blog/media-query-range-syntax/

111 113 16.2 New color spaces and functions The color(), lab(), lch(), oklab(), oklch(), and color-mix() CSS functions.

Learn more: https://developer.chrome.com/articles/high-definition-css-color-guide/

li { background-color: color-mix(in srgb, #34c9eb 10%, white); } li:nth-child(2) { background-color: color-mix(in srgb, #34c9eb 40%, white); } li:nth-child(3) { background-color: color-mix(in srgb, #34c9eb 70%, white); } Learn more: https://developer.chrome.com/blog/css-color-mix/

Play with color at: https://gradient.style

80 113 16.4 Compression Streams API A JavaScript API for compressing and decompressing streams of data.

const readableStream = await fetch(‘lorem.txt’).then( (response) => response.body ); const compressedReadableStream = readableStream.pipeThrough( new CompressionStream(‘gzip’) );

const decompressedStream = compressedStream.pipeThrough( new DecompressionStream(‘gzip’) ); Learn about streams at: https://web.dev/streams/

COMING SOON I N T E R O P 2 0 2 3 F E AT U R E S .

105 Soon! :has() A parent selector. 15.4

li:has(h2) { border: 5px solid red; } Learn more at: https://developer.chrome.com/blog/has-m105/

li:has(h2+p) { border: 5px solid red; } Learn more at: https://developer.chrome.com/blog/has-m105/

li:not(:has(img)):before{ content: “”; aspect-ratio: 9/6; background: rgb(131,58,180); background: radial-gradient(circle, rgba(131,58,180,1) 0%, rgba(29,182,253,1) 50%, rgba(252,69,108,.9) 100%); border-radius: .5em; }

Soon! 71 16 Subgrid for CSS grid layout Allow child grids to inherit track sizing from their parent.

.subgrid { grid-column: auto / span 3; display: grid; grid-template-columns: subgrid; } .grid { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; grid-auto-rows: minmax(100px, auto); gap: 10px; }

.grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 20px; } .card { grid-row: auto / span 2; display: grid; grid-template-rows: subgrid; gap: 1px; } Learn more at: https://12daysofweb.dev/2022/css-subgrid/

85 Soon! 16.4 @property Define type, default values, and inheritance for CSS custom properties.

:root { —colorHilite: rebeccapurple; } .element { —colorHilite: 2; background-color: var(—colorHilite); }

@property —colorHilite { syntax: ‘<color>’; initial-value: rebeccapurple; inherits: false; }

What’s next for Baseline? We want your feedback at: https://github.com/web-platform-dx/feature-set/issues

Feature grouping Aiming to complete by the end of 2023.

Baseline 24 … 25 … A yearly moment in time, showing what the state of the web platform is at that point.

https://noti.st/rachelandrew/LMVsa1/