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

Utilisez le CSS digne de ce nom, performant et stable.

Adam Argyle

Je pense que tous les développeurs front-end devraient savoir que :has() est bien plus qu'un "sélecteur parent", comment et pourquoi d'un subgrid, comment imbriquer la syntaxe CSS intégrée, comment laisser le comment encapsuler le texte du titre pour l'équilibre du navigateur et comment utiliser les unités de requête de conteneur.

Ce post s'inscrit dans la continuité de les 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()

Navigateurs pris en charge

  • Chrome: 105. <ph type="x-smartling-placeholder">
  • Edge: 105 <ph type="x-smartling-placeholder">
  • Firefox: 121 <ph type="x-smartling-placeholder">
  • Safari: 15.4. <ph type="x-smartling-placeholder">

Source

:has() est disponible sur tous les principaux navigateurs fin 2023 ! Ce nouveau sélecteur semble petit et innocent, mais vous serez surpris de tous les cas d'utilisation qu'il offre: réactivité, mise en page avec détection de contenu, composants intelligents bien d'autres sujets abordés dans cet article de Jhey.

Quatre panneaux affichés, chacun avec une image et une légende. Chaque image montre un cerveau qui active de plus en plus le cerveau. Le premier panneau est dit :has(). Le deuxième panneau indique &quot;figure:has(caption)&quot; comme sélecteur de parent. Le troisième panneau indique .layout:has(> :nth-child(5)) comme sélecteur de quantité. Le quatrième panneau indique html:has(#checked) .new-subject comme sélecteur de changement conditionnel de sujet.

Voici quelques exemples d'utilisation de :has() comme sélecteur parent. Elle porte ce nom parce que généralement l'objet d'un sélecteur se trouve à la fin, comme ul li, où li est l'objet et obtient les styles. Avec :has(), l'élément situé au début du sélecteur peut devenir le sujet. Dans l'exemple suivant, le bouton a un espace s'il y a un élément à l'intérieur. avec une classe de .icon. La carte change d'orientation si elle contient une image.

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

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

Un long sélecteur souhaité consiste à 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 en tant que sujet tout en interrogeant le nombre d'enfants.

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

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

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 des exemples. comme ceci, vous pourriez penser que :has() est limité au sélecteur parent. Tenez compte des points suivants à titre d'exemple. Elles recherchent un élément basé sur un ancêtre commun, puis elles font pivoter le sélecteur à un enfant plus loin dans la page.

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

Celle-ci fait glisser la zone de contenu principal lorsqu'un panneau de navigation latéral comporte une classe de .--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 en grille capable d'afficher élégamment 1 à 12 éléments en mode portrait ou paysage:

<ph type="x-smartling-placeholder">
</ph> <ph type="x-smartling-placeholder">
</ph> Essayer Codepen

Créer une sous-grille

subgrid

Navigateurs pris en charge

  • Chrome: 117 <ph type="x-smartling-placeholder">
  • Edge: 117 <ph type="x-smartling-placeholder">
  • Firefox: 71 <ph type="x-smartling-placeholder">
  • Safari: 16. <ph type="x-smartling-placeholder">

Source

Pendant de nombreuses années, la communauté web front-end a demandé une sous-grille pour l’aider à compléter et à terminer le moteur de mise en page en grille CSS extrêmement populaire et puissant. Il est désormais disponible dans les trois principaux moteurs.

En savoir plus sur la sous-grille (si vous souhaitez obtenir un aperçu)

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

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

Imbriquez le CSS

nesting

Navigateurs pris en charge

  • Chrome: 120 <ph type="x-smartling-placeholder">
  • Edge: 120 <ph type="x-smartling-placeholder">
  • Firefox: 117 <ph type="x-smartling-placeholder">
  • Safari: 17.2. <ph type="x-smartling-placeholder">

Source

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 compilation l'imbrication, et maintenant je livre une feuille de style plus petite ! Les feuilles de style avec imbrication sont plus petites et toutes les outils de développement du navigateur sont prêts à la représenter.

Pour en savoir plus sur la syntaxe d'imbrication CSS, cliquez ici. pour en savoir plus. 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

balance

Navigateurs pris en charge

  • Chrome: 114 <ph type="x-smartling-placeholder">
  • Edge: 114 <ph type="x-smartling-placeholder">
  • Firefox: 121 <ph type="x-smartling-placeholder">
  • Safari: 17.5. <ph type="x-smartling-placeholder">

Source

pretty

Navigateurs pris en charge

  • Chrome: 117 <ph type="x-smartling-placeholder">
  • Edge: 117 <ph type="x-smartling-placeholder">
  • Firefox: non compatible. <ph type="x-smartling-placeholder">
  • Safari: non compatible. <ph type="x-smartling-placeholder">

Source

Sans text-wrap: balance, les développeurs et les rédacteurs doivent laisser les suggestions de saut de ligne comme des éléments <wbr> ou &shy;. Il s'agit surtout d'une bataille perdante parce que dès que contenu est traduit, zoomé ou modifié de quelque façon que ce soit, il n'y a aucune garantie que ces les conseils de retour seront au bon endroit pour la nouvelle présentation du contenu.

Grâce à l'équilibre du retour automatique à la ligne, vous pouvez laisser cette tâche au navigateur. Vous pouvez voir une comparaison dans Codepen suivant.

Utiliser des unités de requête de conteneur

cqw

Navigateurs pris en charge

  • Chrome: 105. <ph type="x-smartling-placeholder">
  • Edge: 105 <ph type="x-smartling-placeholder">
  • Firefox: 110 <ph type="x-smartling-placeholder">
  • Safari: 16. <ph type="x-smartling-placeholder">

Source

Le post de l'année dernière suggérait que chaque développeur front-end devait savoir comment rédiger un à votre requête de conteneur. Si vous ne l'avez pas encore appris, faites de 2024 l'année de l'aventure, et les unités de requête de conteneur. En guise de présentation, Ahmad Shadeed a rédigé un excellent article sur les unités de requête de conteneur en 2021.

Il existe six nouvelles autres sur la qualité du client:

  1. Variante intégrée cqi.
  2. Variante de largeur cqw.
  3. Une variante de bloc cqb.
  4. Variante de hauteur cqh.
  5. Variante d'une longueur plus petite (cqmin).
  6. Il s'agit d'une variante pour la longueur la plus élevée cqmax.

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

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

Voici une fiche avec une typographie responsive de conteneur et une image qui s'adapte l'orientation du conteneur, la moitié étant réduite 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, découvrez toutes les unités disponibles en 2024.