A presentation at Code Europe Krakow in in Kraków, Poland by Rachel Andrew
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/tPRldw/
All three main browser engines now release updates on a regular cadence, each release bringing new features to the platform. We have seen major features such as Cascade Layers and Container Queries land across all browsers within a very short space of time. While this is really exciting, it can also feel like a lot to keep track of, and developers tell us that it can be hard to know exactly what will work across all browsers.
In this talk you’ll discover some surprising things that are built into the web platform today, things that are available now, or will be very soon across all main engines. You’ll learn how browsers are working together to make the experience of developing for the web easier. And, because rapid change means a lot to keep up with, you’ll find out how to keep track of what is ready to use in your projects today.
The following resources were mentioned during the presentation or are useful additional information.
The following code examples from the presentation can be tried out live.
