Il y a quelques mois, je suis tombé sur ce poème de Vinay Krishan sur Twitter : « there’s laundry to do and a genocide to stop ». L’auteur a publié son écrit sous la forme d’une capture d’écran sur Twitter. Cela donne une image de 162 Ko dans une page de 2,3 Mo.

Alors j’ai repris le texte du poème. J’en ai fait une page HTML. J’ai ajouté quelques styles pour respecter la mise en forme originelle. Et le tout pèse 2 Ko. Deux. Kilo. Octets. Deux tout petits Kilo-octets. J’ai divisé par plus de 1000 le poids de la page initiale.

Behind the scenes, all major browser vendors and the CSS specification authors have been working together to deliver tons of highly-requested CSS features. Things like container queries, native CSS nesting, relative color syntax, balanced text, and so much more.

One of these new features is the :has pseudo-class. And, honestly, I wasn’t sure how useful it would be for me. I mostly build webapps using React, which means I tend not to use complex selectors. Would the :has pseudo-class really offer much benefit in this context?

Well, I’ve spent the past few months rebuilding this blog, using all of the modern CSS bells and whistles. And my goodness, I was wrong about :has. It’s an incredibly handy utility, even in a CSS-in-JS context!

In this blog post, I'll introduce you to :has and share some of the most interesting real-world use cases I’ve found so far, along with some truly mindblowing experiments.

Hardest Problem in Computer Science: Centering Things
This is my claim: we, as a civilization, forgot how to center things.
I mean, we know how to do it. It has never been simpler.

Cet enfer…