New CSS features you can use today

A presentation at Revo.js in October 2023 in Timișoara, Romania by Rachel Andrew

Slide 1

New CSS features you can use today! RACHEL ANDREW, GOOGLE

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 4

New CSS features are exciting! But they often aren’t useful to us if they don’t work in all major browsers.

Slide 5

Interoperable Features CSS THAT WORKS IN ALL MAJOR BROWSER ENGINES.

Slide 6

Slide 7

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

Slide 8

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

Slide 9

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

Slide 10

108 101 15.4 Viewport units Representing the large, small, and dynamic viewport.

Slide 11

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

Slide 12

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

Slide 13

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

Slide 14

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

Slide 15

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

Slide 16

99 97 15.4 Cascade Layers Manage the cascade and prevent specificity problems.

Slide 17

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

Slide 18

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

Slide 19

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

Slide 20

Slide 21

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

Slide 22

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

Slide 23

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

Slide 24

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

Slide 25

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

Slide 26

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

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

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

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

Slide 30

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

Slide 31

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

Slide 32

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 33

Slide 34

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

Slide 35

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

Slide 36

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

Slide 38

Slide 39

Slide 40

Slide 41

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

Coming soon INTEROP 2023 FEATURES.

Slide 43

Slide 44

Slide 45

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

Slide 46

<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 47

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

Slide 48

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

Slide 49

Slide 50

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 51

Slide 52

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

Slide 53

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

Slide 54

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

Slide 55

Interop 2024 is happening https://web.dev/interop-2024-proposals/

Slide 56

https://web.dev/baseline/