Chrome 144 recently shipped ::search-text, which is now one of several highlight-related pseudo-elements. This one selects find-in-page text, which is the text that gets highlighted when you do a Ctrl/Command + F-type search for something on a page and matches are found.
Powered by
DigitalOcean
Stu Robson’s ReliCSS (clever name!) tool can excavate outdated CSS in your codebase that have modern CSS solutions.
Accessibility advice around modals have commonly taught us to trap focus within the modal. Upon further research, it seems like we no longer need to trap focus within the <dialog> (even in modal mode).
A while back, Temani tacked a repeating grid of hexagon shapes. Well, he’s updated it with modern CSS features that result in fewer magic numbers. And it’s impressive!
The @custom-media at-rule has landed in Firefox Nightly! I couldn’t find it in the release notes but Adam Argyle’s on […]
Semantic HTML does a lot more accessibility work than we usually give it credit for already — and ARIA is simple to abuse when we use it both as a shortcut and as a supplement.
.element { filter: blur(5px); }
.element { corner-shape: superellipse(2); }
.element { corner-shape: scoop; }
.element { transform: translateY(calc(sin(20deg * var(--i)) * 100px)); }
.element { transform: translateY(calc(cos(20deg * var(--i)) * 100px)); }
.element { transform: translateY(calc(tan(15deg * var(--i)) * 5dvh)); }
.element { rotate: asin(-0.5); }
.element { rotate: acos(0.5) }
.element { rotate: atan(1); }
.element { rotate: atan2(200px, 200px); }
.element { background-image: cross-fade(url(a), url(b)); }
::picker-icon { content: "✓"; }
.element { animation-range: cover; }
