A presentation at DevFest North America by Rachel Andrew
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
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.
