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