Ahmad Shadeed explains how container queries work, how you can use them, and what the syntax looks like, and shares a few real-life examples and use cases.
I announced in January that I’m working on a course. And I’m thrilled to say that I finally have more to reveal. The course is called “Mastering Prettier & Stylelint” and is available for preorder today.
I’ve initially imagined it as a few short lessons, but as I started digging into Prettier & Stylelint, the material kept growing, as those tools are incredible and much more powerful than they might seem—I truly believe setting them up properly can massively improve the quality of your CSS, from avoiding bugs to enforcing sensible conventions.
The course covers everything from the basics of setting them up to integrating them fully into your workflow with pre-commit hooks, task runners, continuous Integration, and more. The first module is being recorded as we speak, and the entire course should be out in October.
If you want to support CSS Weekly, this is the most direct path you can take to help me make it financially sustainable—while leveling up your skills and expanding your CSS expertise.
Jhey Tompkins introduces
:modal, a handy pseudo-selector that gives you a way to select elements that are “modals.”
Join us at An Event Apart Denver this coming October 10–12 for three days of expert sessions to raise your skill set to the next level.
Topics include new CSS features, design system tooling, accessibility, responsive animation, global design, allying UX with SEO, and more.
As a CSS Weekly subscriber, you can save $100 on any multi-day pass with promo code AEACSSW22.
Articles & Tutorials
Harry Roberts explains why in practice, in the real world, critical CSS often falls short as a fragile and expensive technique to implement and seldom provides the benefits that many developers expect.
Kitty Giraudel shows how to author a component for hiding content behind a warning.
Lu Wang explains how and why to alter the properties of running CSS animations when building an interactive CSS game.
Karolina Szczur outlines four proven methods to help you find and correct performance issues holding your page back.
Ashlee M Boyer explores when you should use a button and when a link.
A weekly newsletter for senior React developers willing to stay up-to-date.
This newsletter is different: it assumes you already know React and just want to keep up with the most relevant news.
A practical overview of the current browser versions and release notes as site, feed, or API.
An online tool that lets you seamlessly visualize your JSON data instantly.
Yusuke Nakaya created a stunning animation using only CSS.