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

Profitez d'un CSS de qualité, performant et stable que vous pouvez utiliser dès aujourd'hui.

Je pense que tous les développeurs front-end doivent savoir que :has() est plus qu'un "sélecteur parent", comment et pourquoi un subgrid, comment procéder à l'imbrication avec la syntaxe CSS intégrée, comment permettre au navigateur d'équilibrer le retour à la ligne du titre et comment utiliser les unités de requête de conteneur.

Cet article s'inscrit dans la continuité des six extraits CSS de l'année dernière que tout développeur front-end devrait connaître en 2023.

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

:has() est disponible sur tous les principaux navigateurs à la fin de l'année 2023. Ce nouveau sélecteur semble petit et innocent, mais vous serez surpris de tous les cas d'utilisation qu'il permet de débloquer : jeux, réactivité, mise en page compatible avec le contenu, composants intelligents, et bien d'autres choses encore bien explorées dans cet article de Jhey.

Voici quelques exemples d'utilisation de :has() en tant que sélecteur parent. Il porte ce nom, 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 situé au début du sélecteur peut devenir l'objet. Dans l'exemple suivant, le bouton présente un écart s'il contient un élément avec une classe .icon. La fiche change d'orientation si elle contient une image.

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

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

Un sélecteur long souhaité est de modifier une mise en page en fonction du nombre d'éléments qu'elle contient. Cela est désormais possible avec :has(), car il peut conserver le conteneur en tant que sujet tout en interrogeant le nombre d'enfants.

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

Un autre exemple de niveau supérieur consiste à 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 changent pas le sujet du sélecteur. Si vous vous contentez de consulter ces exemples, vous pensez peut-être que :has() est limité à un sélecteur parent. Considérez cependant les exemples suivants. Ils recherchent des éléments basés sur un ancêtre commun, puis font pivoter le sélecteur de sorte qu'il corresponde à un enfant quelque part plus loin dans la page.

Celle-ci montre 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;
}

Cette commande fait sortir de la zone de contenu principal lorsqu'un panneau de navigation latérale a une classe .--is-open:

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

Voici une démonstration 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 sous forme de grille capable d'afficher élégamment entre 1 et 12 éléments en mode portrait ou paysage:

Créer une sous-grille

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

Pour en savoir plus sur les sous-grilles, cliquez ici.

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

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

Imbriquer la méthode CSS

L'imbrication CSS intégrée est disponible dans tous les principaux navigateurs depuis 2023. J'ai même mis à jour mon site Web pour supprimer le processus de compilation qui compilait 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 obtenir tous les détails, consultez une présentation de 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;
  }
}

Laissez le navigateur équilibrer les titres

Sans text-wrap: balance, les développeurs et les rédacteurs doivent laisser des indices de saut de ligne tels que les éléments <wbr> ou ­. Il s'agit avant tout d'une bataille perdue, car dès que le contenu est traduit, agrandi ou modifié de quelque façon que ce soit, il n'y a aucune garantie que ces indices d'encapsulation soient au bon endroit pour la nouvelle présentation du contenu.

Avec un retour à la ligne équilibré, vous pouvez laisser cette tâche au navigateur. Vous pouvez voir une comparaison dans le codepen suivant.

Utiliser des unités de requête du conteneur

L'article de l'année dernière suggère que chaque développeur front-end devrait savoir comment rédiger une requête de conteneur. Si vous ne savez pas encore comment faire, 2024 est l'année de votre choix et découvrez également les unités de requête de conteneurs. En guise de présentation, Ahmad Shadeed a rédigé un excellent article sur les unités de requête de conteneur en 2021.

Six nouvelles containes containes ont été ajoutées à la liste:

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 de longueur inférieure à cqmin.
6. Une variante de longueur supérieure (cqmax).

Prenons l'exemple d'un scénario d'animations relatives et intrinsèques pour un conteneur. Un élément enfant qui glisse entièrement de son conteneur à l'aide de 100cqi, soit 100% de la taille intégrée du conteneur.

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

Voici une carte avec une typographie responsive pour le conteneur et une image qui s'adapte à l'orientation du conteneur, sa taille réduite de moitié 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 ces unités ne vous sont pas familières, nous vous recommandons de passer en revue toutes celles dont vous disposez en 2024.