So, there you have it! A resilient, self-contained, content-aware component that can adapt to any language you throw at it. Newer CSS features like :has(), grid, container queries, @supports, and logical properties are great for building hyper-resilient components. They’re even more powerful when combined with the established techniques we know and rely on. I’m excited for what the future of CSS holds, and hopefully after reading this you are too!

HTML Forms have powerful validation mechanisms, but they are heavily underused. In fact, not many people even know much about them. Is this because of some flaw in their design? Let’s explore.

Unless web performance is your day job, it's probably not obvious which optimizations will be the most impactful for your site. You likely won't have time for all of them, so it's important to ask yourself what are the most impactful optimizations you can choose to improve performance for your users?

I was never a fan of HTML's whitespace behavior before as I've been burned by it a few times. But as I dug into it more deeply, I found myself discovering complex design issues that I wanted to explore… and partially to vent about how unnecessarily complicated it all is.

If you're creating a scroll-driven animation and the goal is "when the page is scrolling through this general section, animate the children" it's probably going to involve passing scrolling data through custom properties.