5 extraits CSS que tout développeur front-end devrait connaître en 2024

Un CSS puissant, stable et digne de confiance que vous pouvez utiliser dès aujourd'hui.

Adam Argyle

Je pense que chaque développeur front-end devrait savoir que :has() est plus qu'un "sélecteur parent", comment et pourquoi utiliser subgrid, comment imbriquer avec la syntaxe CSS intégrée, comment laisser le navigateur équilibrer l'habillage du texte de titre et comment utiliser les unités de requête de conteneur.

Cet article fait suite à l'article 6 extraits de code CSS que tout développeur front-end devrait connaître en 2023.

CSS:has(.potential-beyond-being-a-parent-selector)

:has() est disponible dans tous les principaux navigateurs depuis fin 2023. Ce nouveau sélecteur semble petit et innocent, mais vous serez surpris de tous les cas d'utilisation qu'il peut débloquer : jeux, réactivité, mise en page sensible au contenu, composants intelligents et bien d'autres, comme l'explique en détail cet article de Jhey.

Voici quelques exemples d'utilisation de :has() comme sélecteur parent. Il a été nommé ainsi, car le sujet d'un sélecteur se trouve généralement à la fin, comme ul li, où li est le sujet et obtient les styles. Avec :has(), l'élément au début du sélecteur peut devenir le sujet. Dans l'exemple suivant, le bouton comporte un espace s'il contient un élément avec la classe .icon. La carte change d'orientation si elle contient une image.

button:has(.icon) {
  gap: 1ch;
}

.card:has(img) {
  grid-auto-flow: row;
}

Un sélecteur très demandé permet de modifier une mise en page en fonction du nombre d'éléments qu'elle contient. C'est désormais possible avec :has(), car il peut conserver le conteneur comme sujet tout en interrogeant le nombre d'enfants.

main:has(> :nth-child(5)) {…}

Voici un autre exemple de niveau supérieur : modifier les styles définis sur l'ensemble du document lorsqu'une case à cocher spécifique sur la page est activée :

html:has(#dark-mode:checked) {…}

Il s'agit de cas d'utilisation simples qui ne modifient pas le sujet du sélecteur. Si vous ne regardez que des exemples comme celui-ci, vous pourriez penser que :has() est limité à un sélecteur parent. Prenons les exemples suivants. Ces vérifications recherchent un élément en fonction d'un ancêtre commun, puis pivotent le sélecteur vers un enfant situé plus loin dans la page.

Celui-ci affiche un élément d'erreur de formulaire si l'une de ses entrées n'est pas valide :

form:has(:user-invalid) .error {
  display: block;
}

Celui-ci fait glisser la zone de contenu principal lorsqu'un sidenav a une classe de .--is-open :

html:has(#sidenav.--is-open) main {
  translate: -320px;
}

Voici une démo amusante qui utilise :has() comme sélecteur parent, :has() avec des requêtes de quantité et des requêtes de conteneur pour créer une mise en page en grille capable d'afficher élégamment 1 à 12 éléments en orientation portrait ou paysage :

Créer une sous-grille

Pendant de nombreuses années, la communauté Web front-end a demandé l'ajout de la sous-grille pour compléter et finaliser le moteur de mise en page CSS Grid, qui est extrêmement populaire et puissant. Il est désormais disponible dans les trois principaux moteurs.

Pour obtenir une vue d'ensemble, cliquez ici pour en savoir plus sur les sous-grilles.

body {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(30ch, 1fr));

  > article {
    display: grid;
    grid-row: span 4; 
    grid-template-rows: subgrid;
  }
}

Embrasser la méthode CSS

L'imbrication CSS intégrée est devenue disponible dans tous les principaux navigateurs en 2023. J'ai même mis à jour mon site Web pour supprimer le processus de compilation qui éliminait l'imbrication. Maintenant, j'envoie une feuille de style plus petite ! Oui, les feuilles de style avec imbrication sont plus petites et tous les outils de développement du navigateur sont prêts à les représenter.

Pour en savoir plus, consultez la syntaxe d'imbrication CSS. L'exemple de code suivant montre un exemple de syntaxe.

.you {
  .can-totally-ship-this {
    &.if-you-wanted {
      /* it's VERY MUCH like SCSS */
      
      &:is(:hover, :focus-visible) {
        /* put a bird on it */
      }
    }
  }
}

.for-theming {
  @media (prefers-color-scheme: dark) {
    /* you can nest media queries */
  }
}

/* or for theming with [data-theme="dark"] */
.button {
  background: black;
  color: white;

  /* nest and do more than just append, flip it and reverse it */
  [data-theme="dark"] & {
    background: white;
    color: black;
  }
}

Laisser le navigateur équilibrer les titres

Sans text-wrap: balance, les développeurs et les rédacteurs doivent se contenter d'indices de saut de ligne tels que les éléments <wbr> ou ­. C'est généralement une bataille perdue d'avance, car dès que le contenu est traduit, zoomé ou modifié de quelque manière que ce soit, il n'y a aucune garantie que ces indications d'habillage seront au bon endroit pour la nouvelle présentation du contenu.

Avec l'habillage de texte équilibré, vous pouvez laisser le navigateur s'en charger. Vous pouvez voir une comparaison dans le Codepen suivant.

Utiliser des unités de requête de conteneur

L'article de l'année dernière suggérait que chaque développeur front-end devrait savoir comment écrire une requête de conteneur. Si vous ne l'avez pas encore fait, lancez-vous en 2024 et découvrez également les unités de requête de conteneur. Pour commencer, Ahmad Shadeed a écrit un excellent article sur les unités de requête de conteneur en 2021.

Six nouvelles unités de requête de conteneur sont disponibles :

1. Une variante intégrée cqi.
2. Une variante de largeur cqw.
3. Une variante de bloc cqb.
4. Une variante de hauteur cqh.
5. Une variante pour la longueur la plus courte cqmin.
6. Une variante pour la longueur la plus grande : cqmax.

Prenons l'exemple d'un scénario d'animations relatives et intrinsèques à un conteneur. Un élément enfant qui sort complètement de son conteneur en utilisant 100cqi, soit 100 % de la taille en ligne du conteneur.

@keyframes slide-out-of-container {
  to {
    translate: -100cqi;
  }
}

Voici une fiche avec une typographie responsive pour les conteneurs et une image qui s'adapte à l'orientation du conteneur, en devenant deux fois plus petite si l'orientation est en mode paysage.

.card {
  :is(h2,h3) {
    font-size: clamp(1.5rem, 5cqi, 4rem);
  }

  img {
    inline-size: 100cqi;

    @container (orientation: landscape) {
      inline-size: 50cqi;
    }
  }
}

Si vous ne connaissez pas ces unités, nous vous conseillons de consulter toutes les unités disponibles en 2024.