~frontendfocus | Issue 636 - What you need to know about modern CSS in early 2024 (15)

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.

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.

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.

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.

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!)

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.

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.

▶  How to Take Control of Flexbox — Demystifying some of the trickier bits of Flexbox and fleshing out our understanding of this CSS layout model is always time well spent.

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.

📧 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).

🍩 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.

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.

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.

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.

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.