Styliser HTML

et

avec du CSS moderne

Le widget de divulgation comporte deux pseudo-éléments pour styliser ses éléments constitutifs :

1. Le pseudo-élément ::marker : représente le marqueur triangulaire qui se trouve au début du
   . L’histoire du style est un peu compliquée. Nous sommes limités à un petit ensemble de propriétés CSS. La prise en charge du navigateur est bonne pour ::marker, mais Safari ne prend actuellement pas en charge l'ensemble complet des propriétés. J'en discuterai plus en détail dans la section « Style du marqueur de résumé » de cet article
2. Le pseudo-élément ::details-content : Représente les « informations supplémentaires » de
   . Il s'agit d'un ajout récent, la prise en charge du navigateur est donc actuellement limitée à Chrome.

Dans les sections suivantes, je présenterai certaines des façons les plus récentes et les moins connues de personnaliser un widget de divulgation.

Animer les actions d'ouverture et de fermeture

Lorsque vous ouvrez un widget de divulgation, il s'ouvre instantanément. Clignez des yeux, et vous le manquerez !

Il est préférable de passer d'un état à un autre de manière plus progressive pour montrer à l'utilisateur l'impact de son action. Pouvons-nous ajouter une animation de transition aux actions d'ouverture et de fermeture d'un widget de divulgation ? Bref, oui !

Pour animer cela, nous voulons que la hauteur du contenu caché passe de zéro à sa hauteur finale. La valeur par défaut de la propriété height est auto, ce qui laisse au navigateur le soin de calculer la hauteur en fonction du contenu. L'animation sur une valeur auto n'était pas possible en CSS jusqu'à l'ajout de la propriété [interpolate-size](https://nerdy.dev/interpolate-size). Bien que la prise en charge du navigateur soit un peu limitée pour les nouvelles fonctionnalités CSS que nous devons utiliser (principalement interpolate-size et ::details-content), il s'agit d'un excellent exemple d'amélioration progressive. Cela fonctionnera actuellement dans Chrome !

Voici un exemple CodePen de l'animation.

Comment fonctionne l’animation de divulgation ?

Tout d'abord, nous ajoutons une taille d'interpolation afin de pouvoir passer à une hauteur automatique :

<details>
  <summary>Do you want to know more?</summary>
  <h3>Additional info</h3>
  <p>The average human head weighs around 10 to 11 pounds (approximately 4.5 to 5 kg).</p>
</details>

Ensuite, nous voulons décrire le style fermé. Nous voulons que le contenu « informations supplémentaires » ait une hauteur de zéro et garantisse qu'aucun contenu n'est visible, c'est-à-dire que nous voulons éviter tout débordement.

Nous utilisons le pseudo-élément ::details-content pour cibler le contenu caché. J'utilise la propriété block-size plutôt que la propriété height car c'est une bonne habitude d'utiliser des propriétés logiques. Nous devons inclure la visibilité du contenu dans la transition car le navigateur définit la visibilité du contenu : caché sur le contenu lorsqu'il est dans un état fermé — l'animation de fermeture ne fonctionnera pas sans l'inclure :

<details>
  <summary>Do you want to know more?</summary>
  <h3>Additional info</h3>
  <p>The average human head weighs around 10 to 11 pounds (approximately 4.5 to 5 kg).</p>
</details>

L'animation ne fonctionnera toujours pas comme prévu car la propriété content-visibility est une propriété animée discrète. Cela signifie qu'il n'y a pas d'interpolation ; le navigateur basculera entre les deux valeurs afin que le contenu en transition soit affiché pendant toute la durée de l'animation. Nous ne voulons pas de cela.

Si nous incluons transition-behavior:allow-discrete;, la valeur s'inverse à la toute fin de l'animation, nous obtenons donc notre transition progressive.

De plus, nous obtenons un débordement de contenu en définissant la taille du bloc sur 0 lorsque le widget de divulgation est dans un état intermédiaire. Nous montrons la plupart du contenu dès son ouverture. Pour éviter que cela ne se produise, nous ajoutons overflow: Hidden.

Enfin, nous ajoutons le style pour l'état ouvert. Nous voulons que l'état final ait une taille auto :

details {
    interpolate-size: allow-keywords;
}

Ce sont les grandes lignes. Si vous préférez une explication vidéo plus détaillée, consultez la procédure pas à pas de Kevin Powell pour savoir comment animer et .

Existe-t-il d'autres considérations lors de l'animation d'un widget de divulgation ?

Le widget de divulgation peut s'agrandir horizontalement si le contenu des « informations supplémentaires » est plus large que le contenu. Cela peut entraîner un changement de disposition indésirable. Dans ce cas, vous souhaiterez peut-être définir une largeur sur .

Comme toute animation, vous devez prendre en compte les utilisateurs sensibles au mouvement. Vous pouvez utiliser la requête multimédia préfère-réduire le mouvement pour répondre à ce scénario :

/* closed state */
details::details-content {
  block-size: 0;

  transition: content-visibility, block-size;
  transition-duration: 750ms;

  transition-behavior: allow-discrete;
  overflow: hidden;
}

Implémentation d'une fonctionnalité exclusive groupe (accordéon exclusif)

Un modèle d'interface utilisateur courant est un composant accordéon. Il consiste en une pile de widgets de divulgation qui peuvent être étendus pour révéler leur contenu. Pour implémenter ce modèle, vous avez juste besoin de plusieurs éléments. Vous pouvez les styliser pour indiquer visuellement qu'ils vont ensemble :

/* open state */
details[open]::details-content {
  block-size: auto;
}

Le style par défaut est assez simple :

Chaque occupe sa propre ligne. Ils sont positionnés rapprochés (pas de marge ni de remplissage) et sont perçus comme un groupe en raison de leur proximité. Si vous souhaitez souligner qu'ils sont regroupés, vous pouvez ajouter une bordure et leur donner les mêmes styles d'arrière-plan comme indiqué dans l'exemple ci-dessous :

Une variante de ce modèle consiste à rendre l'accordéon exclusif afin qu'un seul des widgets de divulgation puisse être ouvert à la fois. Dès que l’un est ouvert, le navigateur ferme l’autre. Vous pouvez créer des groupes exclusifs via l'attribut de nom . Avoir le même nom forme un groupe sémantique :

<details>
  <summary>Do you want to know more?</summary>
  <h3>Additional info</h3>
  <p>The average human head weighs around 10 to 11 pounds (approximately 4.5 to 5 kg).</p>
</details>

Avant d'utiliser des accordéons exclusifs, déterminez si cela est utile aux utilisateurs. Si les utilisateurs sont susceptibles de vouloir consommer davantage d’informations, cela les obligera à ouvrir souvent les éléments, ce qui peut s’avérer frustrant.

Cette fonctionnalité est actuellement prise en charge dans tous les navigateurs modernes, vous pouvez donc l'utiliser immédiatement.

Styliser le marqueur de résumé

Un widget de divulgation est généralement présenté avec un petit marqueur triangulaire à côté. Dans cette section, nous aborderons le processus de style de ce marqueur.

Le marqueur est associé au élément. L'ajout du pseudo-élément [::marker](https://developer.mozilla.org/docs/Web/CSS/::marker) signifie que nous pouvons styliser directement la boîte de marqueur. Cependant, nous sommes limités à un petit ensemble de propriétés CSS :

• Toutes les propriétés de la police
• couleur
• espace blanc
• text-combine-upright, [unicode-bidi](https://developer.mozilla.org/en-US/docs/Web/CSS/unicode-bidi) et propriétés de direction
• contenu
• Toutes les propriétés d'animation et de transition

Comme mentionné précédemment, est similaire à un [

Avant de passer aux exemples, un petit mot sur la prise en charge des navigateurs. Au moment de la rédaction, Safari est le seul navigateur majeur qui ne prend pas entièrement en charge le style du marqueur :

• La prise en charge de Safari est actuellement limitée au style des propriétés de couleur et de taille de police du pseudo-élément ::marker. Safari prend en charge le pseudo-élément non standard ::-webkit-details-marker
• Safari ne prend pas du tout en charge le style des propriétés de style liste. Voir CanIUse pour référence

Changer la couleur et la taille d'un marqueur

Disons que nous voulions changer la couleur du marqueur triangulaire en rouge et l'agrandir de 50 %. Nous pouvons faire ce qui suit :

details {
    interpolate-size: allow-keywords;
}

Cela devrait fonctionner sur tous les navigateurs. Voici l'exemple de CodePen.

Ajustement de l'espacement du marqueur

Par défaut, le marqueur se trouve à côté du contenu du texte et ils sont dans la même boîte englobante. La position de style de liste est définie sur intérieur. Lorsqu'il s'agit d'un état ouvert, les « informations supplémentaires » se trouvent directement sous le marqueur. Peut-être souhaitez-vous modifier l'espacement et l'alignement de ceci :

Si nous définissons list-style-position sur outside, le marqueur se trouve à l'extérieur du

<details>
  <summary>Do you want to know more?</summary>
  <h3>Additional info</h3>
  <p>The average human head weighs around 10 to 11 pounds (approximately 4.5 to 5 kg).</p>
</details>

details {
    interpolate-size: allow-keywords;
}

/* closed state */
details::details-content {
  block-size: 0;

  transition: content-visibility, block-size;
  transition-duration: 750ms;

  transition-behavior: allow-discrete;
  overflow: hidden;
}

/* open state */
details[open]::details-content {
  block-size: auto;
}

<details>
  <summary>Do you want to know more?</summary>
  <h3>Additional info</h3>
  <p>The average human head weighs around 10 to 11 pounds (approximately 4.5 to 5 kg).</p>
</details>

details {
    interpolate-size: allow-keywords;
}

/* closed state */
details::details-content {
  block-size: 0;

  transition: content-visibility, block-size;
  transition-duration: 750ms;

  transition-behavior: allow-discrete;
  overflow: hidden;
}

/* open state */
details[open]::details-content {
  block-size: auto;
}

>@media (prefers-reduced-motion) {
  /* styles to apply if a user's device settings are set to reduced motion */

   details::details-content {
      transition-duration: 0.8s; /* slower speed */
   }
}

<details>
    <summary>Payment Options</summary>
    <p>...</p>
</details>
<details>
    <summary>Personalise your PIN</summary>
    <p>...</p>
</details>
<details>
    <summary>How can I add an additional cardholder to my Platinum Mastercard</summary>
    <p>...</p>
</details>