What’s Too Good to Be True?

The web platform is changing rapidly these days. With every major browser release, more and more powerful features get added, many of which are based on previous input about what web developers need to build better for the web. One way for browser vendors and developer advocates to get this useful input is to ask web developers about what features they are interested in or where their biggest pain points are. Last year, for example, many people shared their CSS wishlists.

Brian Kardell, developer advocate at Igalia, just asked the opposite question: which of the features that got shipped in the last few years have actually proved to be the most valuable? Which features do you use all the time? An interesting question to think about for a little while. Also because we tend to overlook how fantastic it is to be able to use those features which would have been unimaginable just a few years ago. Or, as Jeremy demonstrated in his talk at border:none last year, many of the features we now take for granted actually almost sound “too good to be true”.

So, what features are this for me? What features am I using almost daily or don’t want to miss anymore? Here’s a quick list:

• CSS math functions min(), max() and clamp() – I use clamp() all the time, both as a smarter replacement of min-width and max-width in fluid layouts, as well as to dynamically scale my typography based on the viewport width.

• Lazy loading via attribute for images & iframes – Being able to lazily slap a loading="lazy" attribute on all images in my HTML (except for the images within the first viewport) for a considerable performance boost without a single line of JavaScript is just amazing.

• :focus-visible CSS pseudo-class – I’ve already written about how useful this seemingly little addition to CSS can be to improve the accessibility of our sites. I’m now using :focus-visible in every single project I build.

• CSS font-display – Another seemingly small addition to CSS with an invaluable impact: using font-display: swap as the most basic but also a performant and robust font loading strategy.

• CSS selectors: :where() and :is() – I’ve started using both selectors, but especially :where() because it always has 0 specificity, in my base style sheets whenever I’m declaring something that might later be overwritten. Like heading styles, for example.

• prefers-color-scheme media query – Isn’t it amazing that we now can sit in our bed in the evening and write blog posts in the dark with dark mode turned on? And isn’t it too good to be true to be able to adjust our designs to that preference?

I’m sure I’m forgetting a few things and you might have your own favorites, so feel free to reply with your own blog post. I’m curious to see what features you can’t live without anymore.

~