What’s new in CSS?

What’s new in CSS SydCSS 2022

Rachel Andrew Technical writer for Chrome. Content lead web.dev and developer.chrome.com. CSS Working Group member.

CSS is amazing right now!

Use your brand color in form inputs. accent-color

input { accent-color: var(—blue-sapphire); }

Use accent-color now!

New color functions color-mix()

li { background-color: color-mix(in lch, white 10%, darkblue); }

Try out color-mix() In Safari Technology Preview enable CSS color-mix() in the develop menu In Firefox, in about:config enable layout.css.color-mix.enabled

Solving font layout shifts size-adjust, ascent-override, descent-override, line-gap-override

@font-face { font-family: “fallback”; src: local(Arial); size-adjust: 90%; ascent-override: 110%; descent-override: 110%; line-gap-override: 99%; } @font-face { font-family: “Webfont”; src: url(/path/to/webfont.woff2) format(‘woff2’); } html { font-family: “Webfont”, “fallback”; }

Use size-adjust, ascent-override, descent-override, and line-gap-override now!

Controlling specificity @layer

@layer base special @layer special { .item { color: rebeccapurple; } } @layer base { .item { color: green; } }

Use Cascade Layers now!

Small, large, and dynamic viewport units Units that account for mobile viewports with and without UI elements.

Viewport concepts • Large viewport: the viewport with no dynamic UI elements visible. • Small viewport: the viewport with the dynamic UI elements visible.

.wrapper { block-size: 100lvh; /* large / } .wrapper { block-size: 100svh; / small / } .wrapper { block-size: 100dvh; / dynamic */ }

Use the new viewport units now!

Aspect Ratios aspect-ratio

The “padding hack” https://css-tricks.com/aspect-ratio-boxes/

aspect-ratio: 16/9;

.wrapper { display: grid; grid-template-columns: 200px 350px; } .box16x9 { aspect-ratio: 16/9; } .box4x3 { aspect-ratio: 4/3; }

1fr 1fr 1fr

Use aspect-ratio now!

Subgrid Allow nested grids to inherit the track sizing from the parent.

.container { display: grid; grid-template-columns: 1fr 1fr 1fr; } .container .item { grid-column: 1 / 3; display: grid; grid-template-columns: subgrid; }

.container figure { display: grid; grid-template-rows: subgrid; } .caption { grid-row: 2; }

Subgrid

wpt.fyi/interop-2022 - November 2022

CSS Containment This box and children are independent from the rest of the layout.

.sidebar { contain: layout; }

Use the contain property now!

Container Queries Design components that can react to the available space in their container.

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

Using container-type creates a containment context. This also turns on layout, style, and inline-size containment, in the same way as using the contain property does.

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

@container (min-width: 400px) { .card { display: grid; grid-template-columns: 1fr 2fr; } }

@container sidebar (min-width: 400px) { .card { display: grid; grid-template-columns: 1fr 2fr; } }

.wrapper > div { container-type: inline-size; } @container (min-width: 220px) { .box { background-color: var(—blue-sapphire); } }

.fig-panel { display: grid; grid-template-columns: 1fr 1fr; }

@container (min-width: 700px) { grid-template-columns: repeat(3,1fr); }

Container Queries

This seems so simple! Why did it take so long?

Putting it together Container Queries and subgrid

@container grid (min-width: 600px) { .item { display: grid; grid-template-columns: subgrid; } }

Thank you! Find me @rachelandrew Slides at: https://noti.st/rachelandrew