What’s new on the web platform?

A presentation at Code Europe Warsaw in May 2023 in Warsaw, Poland by Rachel Andrew

Slide 1

Slide 1

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

Slide 2

Slide 2

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

Slide 3

Slide 3

Slide 4

Slide 4

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?

Slide 5

Slide 5

Slide 6

Slide 6

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

Slide 7

Slide 7

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.

Slide 8

Slide 8

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 .

Slide 9

Slide 9

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

Slide 10

Slide 10

<dialog id=”myDialog”> <form method=”dialog”> <p>This is a dialog.</p> <button>Close</button> </form> </dialog> Learn more at: https://web.dev/learn/html/dialog/

Slide 11

Slide 11

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

Slide 12

Slide 12

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

Slide 13

Slide 13

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

Slide 14

Slide 14

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

Slide 15

Slide 15

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

Slide 16

Slide 16

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

Slide 17

Slide 17

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

Slide 18

Slide 18

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

Slide 19

Slide 19

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

Slide 20

Slide 20

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

Slide 21

Slide 21

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

Slide 22

Slide 22

Cascade Layers Manage the cascade and prevent specificity problems.

Slide 23

Slide 23

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

Slide 24

Slide 24

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

Slide 25

Slide 25

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 .

Slide 26

Slide 26

Slide 27

Slide 27

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

Slide 28

Slide 28

Slide 29

Slide 29

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

Slide 30

Slide 30

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

Slide 31

Slide 31

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

Slide 32

Slide 32

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

Slide 33

Slide 33

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

Slide 34

Slide 34

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

Slide 35

Slide 35

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

Slide 36

Slide 36

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

Slide 37

Slide 37

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

Slide 38

Slide 38

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

Slide 39

Slide 39

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

Slide 40

Slide 40

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/

Slide 41

Slide 41

Slide 42

Slide 42

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

Slide 43

Slide 43

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

Slide 44

Slide 44

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

Slide 45

Slide 45

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

Slide 46

Slide 46

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

Slide 47

Slide 47

Slide 48

Slide 48

Slide 49

Slide 49

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

Slide 50

Slide 50

<ul> <li>I do not contain any headings</li> <li><p>I contain a paragraph.</p></li> <li><h2>I’m a level 2 heading!</h2></li> <li><h2>I’m a level 2 heading!</h2> <p>Followed by a paragraph.</p> </li> </ul> Learn more at: https://developer.chrome.com/blog/has-m105/

Slide 51

Slide 51

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

Slide 52

Slide 52

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

Slide 53

Slide 53

Slide 54

Slide 54

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

Slide 55

Slide 55

Slide 56

Slide 56

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

Slide 57

Slide 57

.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; }

Slide 58

Slide 58

Slide 59

Slide 59

Slide 60

Slide 60

Slide 61

Slide 61

Slide 62

Slide 62

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

Slide 63

Slide 63

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

Slide 64

Slide 64

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

Slide 65

Slide 65

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

Slide 66

Slide 66

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

Slide 67

Slide 67

Feature grouping Aiming to complete by the end of 2023.

Slide 68

Slide 68

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

Slide 69

Slide 69

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