What’s new in CSS?

What’s new in CSS Pixel Pioneers 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! • Chrome ✅ • Edge ✅ • Firefox ✅ • Safari ✅

New color functions color-mix() and color-contrast()

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

li { color: color-contrast(var(—background) vs #000, #fff); }

Try out color-contrast() In Safari Technology Preview enable CSS color-contrast() in the develop menu

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! • Chrome ✅ • Edge ✅ • Firefox ✅

Controlling specificity @layer

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

Use Cascade Layers now! • Chrome ✅ • Edge ✅ • Firefox ✅ • Safari ✅

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! • Chrome ✅ • Edge ✅ • Firefox ✅ • Safari ✅

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

.sidebar { contain: layout; }

Use the contain property now! • Chrome ✅ • Edge ✅ • Firefox ✅ • Safari ✅

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

wpt.fyi/interop-2022 - June 2022

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

Try out Container Queries In chrome://flags enable “CSS Container Queries” or use Safari 16 beta, or Safari Technology Preview.

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

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

Please try out features behind flags! It’s the best time to offer feedback that can change things.

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