What You Need to Know About Modern CSS — A bookmarkable guide with a list of all the new additions to CSS (think nesting, view transitions, :has(), etc). This is very handy, as there’s an explainer, demo, code example, and quick bit of detail as to why you should care about each entry.

Chris Coyier

What Is INP and Why You Should Care — Learn how you’ll be able to take action on poor INP in Sentry and see what you can do with other Web Vitals.

Sentry sponsor

Diving into the Node.js Website Redesign — The long running JavaScript runtime has an all new modern homepage — which you can see here. Frontend engineer Brian Muenzenmeyer shares what went into the rebuild.

Brian Muenzenmeyer

On Popover Accessibility: What the Browser Does & Doesn’t Do — This should go some way to help you understand better what accessibility is actually “built-in” when you use a popover, and what is not.

Scott O'Hara and Hidde de Vries

Accessible Forms with Pseudo Classes — How to create a simple contact form using semantic HTML and the :focus-within CSS class. (Sidebar: Nice to see CSS Tricks is back publishing again!)

Chris DeMars

Spicing Up Text with text-emphasis in CSS — There’s plenty of neat ways to style text in CSS — and here’s a quick, fun look at what the well-supported text-emphasis property can do.

Amit Merchant

Keyboard Focusable Scrollers — A change is rolling out (from Chrome 124) to make scrollers without tabindex value set and with no focusable children keyboard focusable.

Chrome for Developers

Setting and Persisting Color Scheme Preferences with CSS and a “Touch” of JavaScript — Done via a combo of prefers-color-scheme, :has(), and JavaScript localStorage.

Henry Bley-Vroman

📧 Maizzle: Quickly Build HTML Emails with Tailwind and Email-Specific Post-Processing — Includes a CLI tool that lets you customize the build according to your needs. (Note: I use this for the template in my Nintendo newsletter).

Maizzle

🍩 Glaze: A Utility-Based Animation Library Powered by GSAP — Tailwind users will enjoy the HTML-based approach to customizing animation, in addition to the powerful breakpoint and timeline features.

Dennis Josek

Get More Out of Your Design Systems with StackBlitz — Design systems makes development more efficient and consistent. StackBlitz makes design systems easier to share, maintain, and evolve.

StackBlitz sponsor

Web Font Analyzer: A Tool to Help Identify Font Subsetting Opportunities — There’s a full write-up on the author’s blog here. The tool accepts a WebPageTest “result” URL, from which you can analyze fonts and potential performance improvements.

Paul Calvano

concrete.css: A Simple Classless CSS Stylesheet — Works like an opinionated extension for Normalize.css and includes a media query to switch to dark mode based on system settings.

Louis Merlin

F.C. Variable — What if we applied the same principles behind variable fonts to illustrations? Well, this is an amazing and I'd say successful (footy/soccer-based) exploration of just that.

Rob en Robin