--- title: "What you need to know about modern CSS in early 2024" publication: "Frontend Focus" issue: 636 published_at: "2024-03-27" canonical_url: "https://frontendfoc.us/issues/636" --- Plus behind Node.js's new homepage design, and keyboard focusable scrollers are rolling out. | Together with [![Sentry logo\](https://res.cloudinary.com/cpress/image/upload/c_fill,g_auto,e_trim,w_350,h_100/e_make_transparent/co_white,e_outline:7/xdmchdxkka938lxfr86f.png)](https://blog.sentry.io/what-is-inp/?utm_source=FrontEndFocus&utm_medium=paid-community&utm_campaign=general-fy25q1-launchweek&utm_content=newsletter-launchweek-learnmore) 🚀 **Frontend** Focus #​636 — March 27, 2024 | [Read on the web](https://frontendfoc.us/issues/636) [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60,q_auto/v1711545832/w3yas5q9cbsev11uehnl.png)](https://frontendmasters.com/blog/what-you-need-to-know-about-modern-css-spring-2024-edition/) [What You Need to Know About Modern CSS](https://frontendmasters.com/blog/what-you-need-to-know-about-modern-css-spring-2024-edition/) — 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 [![\](https://copm.s3.amazonaws.com/6391a78b.png)](https://blog.sentry.io/what-is-inp/?utm_source=FrontEndFocus&utm_medium=paid-community&utm_campaign=general-fy25q1-launchweek&utm_content=newsletter-launchweek-learnmore) [What Is INP and Why You Should Care](https://blog.sentry.io/what-is-inp/?utm_source=FrontEndFocus&utm_medium=paid-community&utm_campaign=general-fy25q1-launchweek&utm_content=newsletter-launchweek-learnmore) — 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](https://nodejs.org/en/blog/announcements/diving-into-the-nodejs-website-redesign) — The long running JavaScript runtime has an all new modern homepage — [which you can see here](https://nodejs.org/en). Frontend engineer Brian Muenzenmeyer shares what went into the rebuild. Brian Muenzenmeyer [On Popover Accessibility: What the Browser Does & Doesn’t Do](https://hidde.blog/popover-accessibility/) — 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 ⚡️ Quick Links - 👑 The folks behind Font Awesome are [currently kickstarting an open source library of web components](https://www.kickstarter.com/projects/fontawesome/web-awesome) called 'Web Awesome' (a new name for Shoelace). - 🦾 There's now a native version of [Chrome for Arm-based Windows PCs](https://www.theverge.com/2024/3/26/24112273/chrome-native-windows-on-arm-qualcomm-snapdragon). - 💰 The Browser Company, which makes the Arc browser, has [raised $50 million](https://techcrunch.com/2024/03/21/the-browser-company-raises-50-million-at-550-million-valuation/). 📙 **Tutorials, Articles & Opinion** [Accessible Forms with Pseudo Classes](https://css-tricks.com/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 [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60,q_auto/v1711540486/t6ziusnewgi4v2cx7yo8.png)](https://www.amitmerchant.com/spicing-up-text-with-text-emphasis-in-css/) [Spicing Up Text with `text-emphasis` in CSS](https://www.amitmerchant.com/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](https://caniuse.com/text-emphasis) `text-emphasis` property can do. Amit Merchant [Keyboard Focusable Scrollers](https://developer.chrome.com/blog/keyboard-focusable-scrollers?hl=en) — 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 ▶[How to Take Control of Flexbox](https://www.youtube.com/watch?v=Ns12ALe8aqI) — Demystifying some of the trickier bits of Flexbox and fleshing out our understanding of this CSS layout model is always time well spent. Kevin Powell [Setting and Persisting Color Scheme Preferences with CSS and a “Touch” of JavaScript](https://www.smashingmagazine.com/2024/03/setting-persisting-color-scheme-preferences-css-javascript/) — Done via a combo of `prefers-color-scheme`, `:has()`, and JavaScript `localStorage`. Henry Bley-Vroman [A Letter to My Younger Self (as an Accessibility Advocate)](https://heather-buchel.com/blog/2024/03/letters-to-an-accessibility-advocate/) Heather Buchel [Add Superpowers to Your CSS Variables with Style Queries](https://thathtml.blog/2024/03/superpowered-container-style-queries/) Jared White [How to Use the Web Bluetooth API](https://confidence.sh/blog/how-to-use-the-web-bluetooth-api/) Confidence Okoghenun 🔧 **Code, Tools & Resources** [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60,q_auto/kcwz6gvpqteqaiygzwm3.jpg)](https://maizzle.com/) 📧 [Maizzle: Quickly Build HTML Emails with Tailwind and Email-Specific Post-Processing](https://maizzle.com/) — 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](https://switchweekly.com/latest)_). Maizzle 🍩 [Glaze: A Utility-Based Animation Library Powered by GSAP](https://glaze.dev/) — 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](https://stackblitz.com/design-systems?utm_source=fe-focus&utm_medium=secondary&utm_campaign=design-systems) — 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](https://tools.paulcalvano.com/wpt-font-analysis/) — There’s a full write-up on the author’s blog [here](https://paulcalvano.com/2024-02-16-identifying-font-subsetting-opportunities/). 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](https://concrete.style/) — Works like an opinionated extension for Normalize.css and includes a media query to switch to dark mode based on system settings. Louis Merlin [play-button: A Web Component to Play Audio or Video with a Button](https://github.com/daviddarnes/play-button) David Darnes ⚽️ ... and finally [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60,q_auto/v1711538913/rr7s2nftuqzfiebydlp3.jpg)](https://robenrobin.nl/fcvariable) [F.C. Variable](https://robenrobin.nl/fcvariable) — 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 📬 **Got a new email address?** You can [change your email here](https://frontendfoc.us/edit_subscription/*|UID|*). --- **Bored of us?** Click [here to stop getting this newsletter](https://frontendfoc.us/leave/*|UID|*). --- **Got a link for us?** Reply and tell us. We can't include everything but we'll take a look. --- Published by Cooper Press Ltd. Curated by [Chris Brandrick](https://mastodon.social/@brandrick) & [Peter Cooper](https://twitter.com/cooperx86). Fairfield Enterprise Centre, Louth, LN11 0LS, United Kingdom [Stop getting this newsletter](https://frontendfoc.us/leave/*|UID|*) [Ipx.](https://frontendfoc.us/open/636/*|UID|*?ipx=t)