A presentation at Pixel Pioneers in in Bristol, UK by Rachel Andrew
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
It’s an exciting time to be a CSS developer. New features land with every browser update, and many more are in testing, being developed behind browser flags for you to try out. In this talk you’ll discover what is ready now, and what is just around the corner.
The following code examples from the presentation can be tried out live.
The following resources were mentioned during the presentation or are useful additional information.
