L'article présente 10 fonctionnalités récentes des CSS :

• Min, max and clamp - min et max se passent de commentaires, et clamp permet de combiner les deux - une valeur minimale, une valeur préférée, et une valeur maximale
• Container queries - les container query font que les éléments répondent à la taille du conteneur de leur parent plutôt qu'à celle du viewport
• text-wrap: balance & pretty - cette propriété contrôle comment le texte est réparti entre les lignes pour améliorer la lisibilité, la valeur "balance" crée des lignes de longueur égale, alors que "pretty" évite les orphelines (mots se retrouvant seuls sur la dernière ligne)
• CSS Relative Color Syntax - la syntaxe "from" permet d'extraire et de modifier des composants individuels pour toute source de couleur
• Margin Block/Inline Properties - ces propriétés de marge et de padding (margin-block, margin-inline, padding-block, padding-inline) répondent aux besoins induits par différents modes d'écriture et de direction de lecture en CSS, remplaçant les propriétés left / right / top / bottom
• @starting-style - permet d'animer des éléments depuis display:none, en définissant des styles initiaux quand un élément apparaît
• :has() - permet de sélectionner des éléments parents, en se basant sur leurs enfants
  
- Media Query Ranges - simplifie la syntaxe pour définir des intervalles min/max
• light-dark - est un raccourci pour définir différentes valeurs basées sur les préférences de l'utilisateur sur le mode (sombre / light)
• color-scheme - est utile en combinaison avec light-dark, pour informer le navigateur quel jeu de couleurs est supporté par un composant, ce qui permet aux éléments natifs de correspondre automatiquement aux préférences de l'utilisateur
• Nesting - permet d'écrire des CSS en imbriquant les sélecteurs enfants dans leurs parents
• Units - de nouvelles unités comme dvh sont apparues (pour les navigateurs mobiles)
• @layer - permet de gérer des conflits de spécificité en ordonnant explicitement les groupes de styles.

L'auteur montre les possibilités du sélecteur :has en CSS

Tout est dans le titre

Un article explorant les applications des différentes avancées CSS : couleur, :has, détection des capacités, etc.

Tout est dans le titre

Un excellent article très complet sur la pseudo classe :has -elle permet de changer le style d'un élément selon qu'il contienne tel ou tel enfant

Tout est dans le titre

Tout est dans le titre

Firefox ne tient pas compte du sélecteur :has après mise à jour du DOM (les autres navigateurs si) Eric Meyer partage une astuce pour que ça fonctionne

Tout est dans le titre

Un autre cas d'utilisation de :has()

Des exemples de cas d'usages pour le sélecteur :has()

L'auteur présente des cas d'utilisation du sélecteur CSS :has()

:has est un sélecteur CSS3 qui "plante" en cas d'erreur sur le contenu de la sélection. Par exemple :has(h2) fonctionne alors :has(h2, ul, ::-truc-qui-rate) ne fonctionnera même pas pour h2 ou ul.

Tout est dans le titre

Tout est dans le titre

Tout est dans le titre

Tout est dans le titre