CSS is filling the gaps with rules. A way to style gaps in grid and flex. | utilitybend

A practical walkthrough of CSS gap decorations: column-rule, row-rule, rule-break, rule-inset, rule-visibility-items, repeat(), and animation.

Slytherin - SSS - Steevs Soft Synth

The HTML Sanitizer API

The HTML Sanitizer API is a new browser feature that helps developers prevent XSS vulnerabilities by safely sanitizing HTML content.

Never Lose Form Progress Again :: Aaron Gustafson

Few things are more annoying than losing your progress halfway through a form. Maybe the browser crashes. Maybe the tab gets closed. Maybe your kid yells from the other room and you come back three hours later wondering why you ever thought now was a good time to fill out a mortgage application. Whatever the cause, form-saver makes those interruptions a lot less obnoxious. Which is nice, because forms are usually annoying enough on their own.

Never Lose Form Progress Again :: Aaron Gustafson

Few things are more annoying than losing your progress halfway through a form. Maybe the browser crashes. Maybe the tab gets closed. Maybe your kid yells from the other room and you come back three hours later wondering why you ever thought now was a good time to fill out a mortgage application. Whatever the cause, form-saver makes those interruptions a lot less obnoxious. Which is nice, because forms are usually annoying enough on their own.

Scroll Spy with Pure CSS using scroll-target-group - Roland Franke

How the new CSS scroll-target-group and :target-current let you build a table of contents scroll spy without JavaScript.

Inverted themes with light-dark()

We rolled out adaptive light-dark() support on our design system themes and it’s been a delightful upgrade. Creating light and dark variable sets isn’t difficult, but delivery has trade-offs. Most apps that do this probably ship both sets of token values in a single stylesheet. That’s fine until you have multiple kilobytes of duplicate definitions. To get around the performance problems we built two separate stylesheets –which is also not great– but my coworker Zacky found a good trick with <link disabled> to make it tolerable. Ultimately, we wanted to offer a single stylesheet for our human (and agent) friends to control theming.

CSS position: sticky now sticks to the nearest scroller on a per axis basis!

If you’ve ever tried to build a data table with a sticky header and a sticky first column, you know the pain. You’d think a simple position: sticky with top: 0 and left: 0 would be enough, but the reality was that only one of both would stick. A recent change to CSS fixes this: position: sticky now plays nice with single-axis scrollers, allowing you to have sticky elements that track different scroll containers on different axes. This change is available in Chrome 148 with the experimental web platform features flag flipped.

Elena | Progressive Web Components

Elena is a simple, tiny library for building Progressive Web Components.

Building dynamic toggletips using anchored container queries

Anchored container queries are only available in Chrome 143 upwards right now, but here’s Daniel Schwarz to show you how to use progressive enhancement to build up to using that new capability in the context of position-aware toggle tips.