Styliser HTML

Écrit par Rob O'Leary✏️

Les et Les éléments HTML, collectivement appelés widget de divulgation, ne sont pas faciles à styliser. Les gens créent souvent leur propre version avec un composant personnalisé en raison des limitations. Cependant, à mesure que CSS a évolué, ces éléments sont devenus plus faciles à personnaliser. Dans cet article, j'expliquerai comment personnaliser l'apparence et le comportement d'un widget de divulgation.

Comment les et travailler ensemble ?

est un élément HTML qui crée un widget de divulgation dans lequel des informations supplémentaires sont masquées. Un widget de divulgation est généralement présenté sous la forme d'un marqueur triangulaire accompagné d'un texte.

Lorsque l'utilisateur clique sur le widget ou se concentre dessus et appuie sur la barre d'espace, il s'ouvre et révèle des informations supplémentaires. Le marqueur triangulaire pointe vers le bas pour indiquer qu'il est dans un état ouvert :

Le widget de divulgation a une étiquette qui est toujours affichée et est fournie par le

élément. C'est le premier enfant. S'il est omis, une étiquette par défaut est fournie par le navigateur. Habituellement, il sera écrit « détails » :

Vous pouvez également fournir plusieurs éléments après le élément pour représenter les informations supplémentaires :

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

Style et

Il y a quelques problèmes d'interopérabilité qui doivent être pris en compte lors du style des éléments et éléments. Voyons les bases avant d'aborder quelques cas d'utilisation courants.

Le L'élément est similaire à un élément [

](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/li) car son style par défaut inclut display: list-item. Par conséquent, il prend en charge la propriété raccourcie [list-style](https://developer.mozilla.org/docs/Web/CSS/list-style) et ses propriétés longues. La prise en charge par le navigateur des propriétés de style liste est assez bonne, mais Safari est toujours à la traîne.

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 id="Additional-info">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 id="Additional-info">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 id="Additional-info">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 [

](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/li); il prend en charge la propriété raccourcie de style liste et ses propriétés longues. Même si cela peut paraître un peu confus, il sera plus facile de comprendre les options de style avec quelques exemples.

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

boîte englobante. Cela nous permet d'ajuster l'espace entre le texte récapitulatif et le marqueur :

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

Vous pouvez le voir dans le deuxième cas dans la capture d'écran ci-dessus.

Voici un CodePen de cet exemple :

Changer le texte/l'image du marqueur

Si vous souhaitez modifier le contenu du marqueur, vous pouvez utiliser la propriété content du pseudo-élément ::marker. En fonction de vos préférences, vous pouvez le définir sur du texte. Pour mon exemple, j'ai utilisé l'emoji bouche zippée pour l'état fermé et l'emoji bouche ouverte pour l'état ouvert :

details {
    interpolate-size: allow-keywords;
}

Pour utiliser une image pour le marqueur, vous pouvez utiliser la propriété content du pseudo-élément ::marker, ou la propriété list-style-image de

:

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

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

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

Dans l'exemple suivant, nous utilisons deux icônes de flèche provenant des symboles matériels pour le marqueur. La flèche orientée vers la droite correspond à l'état fermé et la flèche orientée vers le bas correspond à l'état ouvert :

Ces exemples fonctionneront comme prévu dans Chrome et Firefox, mais Safari ignorera les styles. Vous pouvez aborder cela comme une amélioration progressive et mettre fin à cela. Mais si vous souhaitez la même apparence dans tous les navigateurs, vous pouvez masquer le marqueur, puis ajouter votre propre image en remplacement. Cela vous donne plus de liberté :

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

Vous pouvez indiquer visuellement l'état à l'aide d'une nouvelle icône de marqueur, comme une image en ligne ou via des pseudo-éléments. Le indique déjà (principalement) l'état d'expansion/réduction. Ainsi, si vous utilisez un graphique en ligne, il doit être traité comme décoratif. Un attribut alt vide fait ceci :

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

Vous pouvez également choisir de positionner le marqueur à la fin du si vous le souhaitez :

details {
    interpolate-size: allow-keywords;
}

Cependant, il est important de noter que masquer le marqueur entraîne des problèmes d'accessibilité avec les lecteurs d'écran. Firefox, VoiceOver, JAWS et NVDA ont tous un problème pour annoncer systématiquement l'état basculé du widget de divulgation si le marqueur est supprimé. Malheureusement, le style est lié à l’État. Il est préférable d'éviter de faire cela.

Styliser la section « informations supplémentaires » de

Vous souhaiterez peut-être styliser la section « informations supplémentaires » du widget de divulgation sans divulguer de styles dans le . Parce que vous pouvez avoir un nombre variable d'éléments à l'intérieur d'un , ce serait bien d'avoir une règle fourre-tout :

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

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

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

Mon choix est d'exclure le élément en utilisant la fonction :not(). Gardez simplement à l’esprit que cela cible chaque élément plutôt que le contenu dans une seule section !

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

Vous pouvez également utiliser le pseudo-élément ::details-content, qui cible la section entière. C'est pourquoi vous souhaitez l'utiliser pour animer les transitions d'état d'ouverture et de fermeture :

>@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 */
   }
}

Vous remarquez la différence ? Il n'y a qu'une seule marge au début de la section. Le

et

n'ont pas de marges. L'inconvénient de l'utilisation du pseudo-élément ::details-content est que la prise en charge du navigateur est actuellement limitée à Chrome.

Erreurs courantes lors du style des widgets de divulgation

• Historiquement, il n'était pas possible de modifier le type d'affichage de la fenêtre élément. Cette restriction a été assouplie dans Chrome
• Soyez prudent en modifiant le type d'affichage . La valeur par défaut est display: list-item;; si vous le modifiez pour display: block;, cela peut entraîner le masquage du marqueur dans certains navigateurs. Il s'agissait d'un problème dans Firefox :

<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>

• Vous ne pouvez pas imbriquer

• Parce que le L'élément a un rôle ARIA par défaut de bouton, il supprime tous les rôles des éléments enfants. Par conséquent, si vous souhaitez avoir un en-tête tel que

  dans un , les technologies d'assistance telles que les lecteurs d'écran ne le reconnaîtront pas comme un titre. Essayez d'éviter ce modèle :
  

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

• Masquer le marqueur entraîne des problèmes d'accessibilité avec certains lecteurs d'écran. Firefox, VoiceOver, JAWS et NVDA ont tous un problème pour annoncer systématiquement l'état basculé du widget de divulgation si le marqueur est supprimé

Y a-t-il d'autres changements à venir ?

Récemment, il y a eu une grande proposition pour aider à faire des plus personnalisable et interopérable entre les navigateurs. La phase 1 comprend une partie de ce que j'ai couvert dans cet article :

1. Supprimez les restrictions de propriétés d'affichage CSS afin de pouvoir utiliser d'autres types d'affichage comme flex et grille
2. Précisez plus clairement la structure de l'arbre d'ombre. Cela devrait faciliter l'interopérabilité avec Flexbox et CSS Grid
3. Ajoutez un pseudo-élément ::details-content pour adresser le deuxième emplacement afin qu'un conteneur pour les "informations supplémentaires" dans le
   l'élément peut être stylisé

La nouvelle intéressante est que les éléments 1 et 3 de la liste ci-dessus ont été livrés dans Chrome 131 (en novembre 2024). La prochaine phase devrait consister à améliorer le style du marqueur. De plus, il existe un ensemble de changements connexes qui contribueront à améliorer la capacité d'animer ces éléments.

Conclusion

Les L'élément HTML est devenu beaucoup plus facile à personnaliser en CSS. Vous pouvez désormais créer des groupes exclusifs avec une prise en charge complète du navigateur, animer la transition des états d'ouverture/fermeture en tant qu'amélioration progressive et effectuer un style simple du marqueur.

Le talon d'Achille de est le style du marqueur. La bonne nouvelle est qu’il existe une proposition active qui résout ce problème ainsi que d’autres problèmes. Cela devrait supprimer toutes les pierres d'achoppement lors de l'utilisation de . Dans un avenir proche, vous n’aurez plus besoin d’écrire votre propre widget de divulgation ni d’utiliser un composant Web tiers ! ?

---

Votre interface monopolise-t-elle le processeur de vos utilisateurs ?

À mesure que les interfaces Web deviennent de plus en plus complexes, les fonctionnalités gourmandes en ressources exigent de plus en plus du navigateur. Si vous souhaitez surveiller et suivre l'utilisation du processeur côté client, l'utilisation de la mémoire et bien plus encore pour tous vos utilisateurs en production, essayez LogRocket.

LogRocket est comme un DVR pour les applications Web et mobiles, enregistrant tout ce qui se passe dans votre application Web, votre application mobile ou votre site Web. Au lieu de deviner pourquoi les problèmes surviennent, vous pouvez regrouper et créer des rapports sur les principales mesures de performances du front-end, rejouer les sessions utilisateur avec l'état de l'application, enregistrer les requêtes réseau et faire apparaître automatiquement toutes les erreurs.

Modernisez la façon dont vous déboguez les applications Web et mobiles : démarrez la surveillance gratuitement.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!