Links
Exploring :has() Again
But what I’m realising as I continue to play around with
:has()is that in practice, we can select any element in the DOM relative to another, as long as they share a common ancestor — which they should, right? As any element that we want to select is going to have the<body>as its ancestor. This makes it pretty powerful.
Container Query Units and Fluid Typography
Viewport-based fluid typography doesn't quite work for narrower spaces that flex independently of the viewport, such as a grid of cards. We'll explore three ways to create dynamic fluid typography rules by leveraging container query units and CSS custom properties.
CSS Custom Properties Beyond the :root
Everybody just seems to define most of their global custom properties (aka CSS variables) on the
:rootselector without giving it a second thought – and so am I. But why:root?
The Performance Golden Rule Revisited
For both desktop and mobile data, the 80 / 20 rule still holds strong. In fact, it’s more like the 85 / 15 rule threatening to be the 90 / 10 rule for the top 1,000 URLs.
‘Can I Use…’, but for ARIA!
When developing and creating accessible web experiences, knowing how different screen readers will interpret your web components is tricky. It’s hard to know if they’ll be interpreted at all or in the way you expect without doing a lot of manual testing across devices, assistive technologies and operating systems. Not anymore!
Videos
The problem with AI as a learning tool
They can sound like they know what they're talking about, but AI tools like ChatGPT can give you completely wrong information that sounds perfectly cromulent.
Sponsor
Sponsored by Cloud Four
Thanks to Cloud Four for sponsoring this week’s newsletter! If you’d like to help with the costs of running Friday Front-End, you can back our Patreon for as little as a dollar a month.