What’s new in CSS?

What’s new in CSS DevFest 2021 North America

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

2021 turned out to be an amazing year for CSS!

Use your brand color in form inputs. accent-color

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

Use accent-color now! • Chrome ✅ • Edge ✅ • Firefox ✅ • Safari Technology Preview ✅

New color functions color-mix()

li { background-color: color-mix(in srgb, #34c9eb 10%, white); }

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

Controlling specificity @layer

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

Try out @layer In chrome://flags enable “CSS Cascade Layers”.

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 ✅

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

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

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