Créer une carte

Fonctionnalités Web : :has() Requêtes de conteneur (taille) Sous-grille

Présentation

Une fiche regroupe un contenu associé ou un choix. Il s'agit d'un modèle visuel, et non d'un modèle sémantique ou d'interaction fixe. Conservez donc la signification du contenu et utilisez l'interaction native qui correspond à son objectif.

Consignes

Choisissez séparément la sémantique du contenu et de son interaction :

  • Utilisez <article> comme racine de la fiche, qu'elle renvoie ou non vers une destination.
  • utiliser un lien natif pour la navigation. Lorsque la fiche entière est une destination, un seul lien peut encapsuler l'élément <article> uniquement si la fiche ne contient aucun autre élément interactif (a, button, input, select, textarea).
  • conserver les liens et les boutons pour des actions indépendantes en tant que commandes natives distinctes ;
  • Utilisez une case d'option ou une case à cocher avec un <label> associé, ou un option dans un <select> natif, lorsque la fiche est un choix.

Conservez les contenus multimédias, le titre, le contenu secondaire et les actions dans un ordre source logique. N'utilisez pas la propriété CSS order pour le contredire (voir Mises en page CSS et responsive design).

Implémentation

Réduisez le balisage au minimum et laissez les sélecteurs CSS reconnaître chaque région, afin que les fiches simples restent simples et que les cartes enrichies restent possibles. Une carte peut comporter jusqu'à quatre régions, dans l'ordre source suivant, et chacune d'entre elles peut être omise. Les régions sont des enfants directs de la carte, et non regroupées dans des éléments de wrapper tels que .card__body, ce qui empêche de placer et de styliser les régions par sélecteur. Une région comportant un seul élément est cet élément lui-même, non encapsulé : un paragraphe isolé est le <p>. N'utilisez un wrapper que lorsqu'une région contient plusieurs éléments.

  • Contenu multimédia : <img>, <picture>, <video> ou <svg> comme premier enfant. Ajoutez une classe .media uniquement au contenu héros arbitraire qui ne fait pas partie de ces éléments, et n'encapsulez jamais un <img> simple dans un élément .media.
  • En-tête : un titre à part entière. Utilisez <hgroup> uniquement lorsque l'en-tête comporte un sous-titre ou un slogan, et <header> lorsque la région comporte plus qu'un titre, comme une signature ou un badge. Lorsque la fiche comporte une destination principale, le lien est placé dans l'en-tête.
  • Contenu : un seul <p>, <ul> ou <dl> est autonome. Lorsque le contenu est composé de plusieurs éléments, tels que plusieurs paragraphes ou un paragraphe et une liste, regroupez-les dans un seul <div> afin que la région soit un seul élément de grille.
  • Pied de page : un <footer> contenant des actions indépendantes sous forme de liens et de boutons natifs. Un lien "En savoir plus" peut partager l'URL du lien de l'en-tête, mais lui attribuer un nom accessible descriptif qui commence par le texte visible, en utilisant du texte masqué visuellement (par exemple, Read more<span> about poached eggs</span>), car des liens "En savoir plus" identiques sont ambigus dans la liste des liens d'un lecteur d'écran. N'ajoutez pas d'autres liens de pied de page qui répètent l'URL de l'en-tête.

La carte la plus simple est un <article> contenant un titre et un paragraphe. Choisissez le modèle de lien et d'action qui correspond au comportement de la fiche (voir Modèles d'interaction).

Pour les images ou les vidéos de fiches qui doivent remplir une zone à ratio fixe, définissez aspect-ratio et object-fit: cover sur l'élément <img> ou <video> lui-même, afin qu'il remplisse la zone sans distorsion (un recadrage peut se produire). Utilisez un aspect-ratio de conteneur .media uniquement pour d'autres contenus héros. Sinon, conservez le ratio intrinsèque du média. Fournissez un texte alternatif approprié pour les images informatives et utilisez alt="" pour les images décoratives.

S'adapter à l'espace disponible

Basez la mise en page sur l'espace disponible de la fiche, et non sur la fenêtre d'affichage. Pour adapter les descendants de la fiche (contenu multimédia, texte, actions), définissez la fiche comme conteneur de taille (container-type: inline-size) et écrivez des règles @container pour ses enfants. Évitez de dimensionner à partir du parent de la grille ou de la liste : la largeur réelle de la fiche peut dépendre du nombre de colonnes, des espaces, etc., ce qui rend les points d'arrêt basés sur le parent bruyants.

Dans un conteneur étroit, empilez les régions dans l'ordre de la source. Dans un conteneur large, placez le contenu multimédia dans une colonne latérale à côté des autres régions, mais uniquement pour les fiches qui en contiennent : appliquez ces règles avec :has() sur l'enfant multimédia (par exemple, .card:has(> img)) afin que les définitions de colonne et les emplacements grid-column ne s'appliquent jamais à une fiche sans contenu multimédia. Une fiche sans contenu multimédia reste sur une seule colonne, quelle que soit la largeur, et ne doit pas réserver de colonne vide pour le contenu multimédia.

Aligner les fiches dans une grille

Lorsque les fiches d'une ligne doivent partager la hauteur de leurs régions, utilisez subgrid : faites en sorte que chaque fiche s'étende sur quatre pistes de ligne partagées (média, en-tête, contenu, pied de page) et placez les régions par sélecteur d'élément, en traitant tout ce qui n'est pas un média, un titre ou un <footer> comme du contenu. Une carte qui omet une région laisse sa piste vide, de sorte que les régions restantes s'alignent toujours avec les cartes voisines. Chaque piste contient un élément de grille. Par conséquent, n'encapsulez la zone de contenu dans un <div> que lorsqu'elle comporte plusieurs éléments et que les fiches partagent des pistes. Les fiches qui ne sont pas alignées avec des fiches sœurs n'ont pas besoin de wrapper ni de sous-grille.

Modèles d'interaction

Cartes de contenu

Utilisez un <article> comme racine de la carte. Conservez les liens et les boutons en tant que commandes natives distinctes.

Cartes à destination unique

Lorsque la fiche entière correspond à une seule destination et ne comporte aucune action indépendante, utilisez un seul lien natif. Le lien peut encapsuler le <article>. N'imbriquez pas d'autres liens, boutons ou commandes de formulaire dans le lien, et conservez le texte "En savoir plus" sous la forme d'un simple <p> ou <span>. Comme le nom accessible du lien correspond à l'intégralité du texte de la fiche, veillez à ce que le contenu soit court. Si la fiche contient beaucoup de texte ou d'autres actions, utilisez le modèle de lien étendu ci-dessous pour que seul l'en-tête soit le lien :

<a href="/recipes/poached-eggs">
  <article class="card">
    <h3>Poached eggs</h3>
    <p>Two poached eggs served on toasted sourdough.</p>
  </article>
</a>

Fiches cliquables avec actions indépendantes

Si un clic sur la fiche déclenche une action plutôt qu'une navigation, utilisez un <button> au lieu d'un lien.

Lorsqu'une fiche de contenu renvoie vers une destination principale, contient d'autres éléments interactifs et doit être cliquable dans son ensemble :

  • Utilisez un seul opt-in sur le lien principal lui-même : placez .card-link sur un seul lien par fiche (le lien du titre). Le pied de page et les autres liens ne l'obtiennent jamais, sinon chacun d'eux étirerait sa propre superposition et le dernier capturerait l'intégralité de la fiche.
  • Associez son titre et étendez la zone de clic du pointeur sur la fiche avec ::after
.card:has(a.card-link) {
    position: relative;
}

.card a.card-link::after {
    content: "";
    position: absolute;
    inset: 0;
}
  • Élevez les éléments interactifs avec position: relative; z-index: 1 pour qu'ils restent utilisables. Ciblez des types d'éléments (par exemple, a, button) plutôt que d'exiger une activation via des classes.
  • N'appliquez PAS z-index à des conteneurs entiers, car ils captureraient des événements de pointeur qui ne produisent aucune action.
.card:has(a.card-link) {
    /* Keep other interactive elements above the overlay */
    a:not(.card-link), button, input, x-button {
        position: relative;
        z-index: 1;
    }
}
  • Appliquez un style à la carte elle-même au survol/focus, plutôt qu'au lien étiré :
.card {
    a.card-link {
        &:focus-visible {
            outline: none; /* Draw it on the card instead */
        }
    }
    
    &:has(a.card-link:focus-visible) {
        /* Focus ring */
    }

    &:has(a.card-link:hover) {
        /* Hover styles */
    }
}

Fiches de choix

Pour les fiches qui représentent des choix prédéfinis, utilisez <label class="card"> avec une case à cocher ou un bouton d'option comme enfant direct.

Appliquez le style :has(:checked) à la carte sélectionnée. Ne modifiez jamais les propriétés qui affectent la mise en page, telles que border-width, padding ou font-weight, lors de la sélection, car la fiche et ses voisines sautent. Dessinez la mise en évidence avec outline, box-shadow ou une bordure transparente qui ne change que de couleur :

.card {
  border: 2px solid transparent;

  &:has(> :checked) {
    border-color: var(--accent);
  }
}

La case à cocher ou la case d'option visible est elle-même un indicateur de sélection non coloré. Le changement de couleur est donc suffisant. Si le contrôle est masqué visuellement (gardez-le sélectionnable et dans l'arborescence d'accessibilité, jamais display: none), ajoutez un indicateur non coloré qui n'affecte pas la mise en page, comme une icône de coche ou un outline plus épais.

Lorsque les choix appartiennent à un sélecteur déroulant dont les options sont présentées sous forme de fiches, utilisez un élément <select> natif avec appearance: base-select et appliquez un style aux éléments ::picker(select) et <option> plutôt que de remplacer la sélection par des fiches <div>. Pour en savoir plus et découvrir les solutions de remplacement, consultez Custom Select Picker Layouts (Mises en page de sélecteurs personnalisés).