20 Méthodes Simples pour Personnaliser l’Élément HTML details

Tutoriels
HTML5

Dans cet article, nous examinerons quelques moyens simples de styliser l’élément HTML <details>, qui est un élément très utile pour révéler et masquer des morceaux de contenu sur une page Web.

Il est pratique d’avoir un élément de divulgation simple en HTML qui n’a pas besoin de JavaScript, mais le style par défaut de l’élément <details> pourrait rebuter certains. Heureusement, il est assez facile de changer le style de cet élément.

Le tableau des matières ci-dessous est un exemple de l’utilisation de l’élément <details>. Nous lui avons ajouté une bordure simple, ainsi que quelques espaces.

Table of Contents

Présentation de l’Élément Détails

Voici le code de base pour l’élément <details> :

<details>
  <summary>Click me!</summary>
  <p>Peekaboo! Here's some hidden content!</p>
</details>

En gros, n’importe quel contenu HTML peut être placé à l’intérieur de l’élément <details>. L’élément <summary> fournit le résumé pour que l’utilisateur clique sur l’élément pour révéler plus de contenu, et il doit être le premier enfant de l’élément <details>.

Voici un exemple en direct de ce code :

Click me!

Peekaboo ! Voici du contenu caché !

Examinons toutes les façons dont nous pouvons utiliser CSS pour améliorer l’apparence de notre élément <details>.

Couleurs d’arrière-plan, bordures et rembourrage

A really simple way to enhance the look of the <details> element is to add some padding along with a border or some background colors.

Ajout d’une bordure

Comme indiqué dans le sommaire ci-dessus, une simple bordure peut beaucoup améliorer et définir l’élément <details>, avec un peu de rembourrage et un léger rayon de bordure :

details {
  padding: 10px; 
  border: 5px solid #f7f7f7;
  border-radius: 3px;
}

C’est le code simple que nous avons utilisé ci-dessus pour styliser notre ToC.

Ajout d’une couleur d’arrière-plan

Ajoutons une couleur d’arrière-plan à notre élément <details> au lieu d’une bordure :

details {
  padding: 10px;
  background-color: #e4eaef;
  border-radius: 5px;
}

Le résultat est présenté dans le Pen ci-dessous.

La couleur d’arrière-plan donne une meilleure définition à l’élément, et le rembourrage aide à créer un peu d’espace à l’intérieur.

Nous pouvons également donner une couleur d’arrière-plan différente à l’élément <summary> pour le distinguer du reste du contenu, et changer sa couleur de texte :

summary {
  background-color: #2196F3;
  color: white;
  padding: 10px;
}

Notez que changer la couleur du texte de l’élément <summary> change également la couleur de la flèche du marqueur. C’est parce que le marqueur est en fait attaché à l’élément <summary> tout comme les marqueurs (tels que les puces) sont attachés aux éléments de liste. Nous verrons ci-dessous comment les styliser séparément.

Styliser le marqueur

L’élément <summary> est défini avec un display de list-item. Ainsi, la flèche par défaut (▶) qui l’accompagne peut être modifiée comme les marqueurs par défaut sur les éléments de liste HTML. Nous pouvons changer le caractère utilisé et modifier indépendamment sa couleur.

Changer la couleur du marqueur

Définissons le marqueur par défaut avec une couleur différente. Juste pour le plaisir, augmentons également la taille de la police du marqueur. Nous pouvons le faire avec l’élément pseudo-classe ::marker:

summary::marker {
  color: #e162bf;
  font-size: 1.2em;
}

Le résultat est présenté ci-dessous.

C’est une solution simple et agréable, bien que l’élément pseudo-classe ::marker ne soit malheureusement pas pris en charge par Safari, alors jetez un œil aux autres options ci-dessous si cela pose problème.

Changer l’espacement du marqueur

Par défaut, la flèche du marqueur est assez proche du texte du résumé. Son list-style-position est défini sur inside. Si nous le changeons en outside, nous pouvons ajouter de l’espace entre le texte du résumé et le marqueur en ajoutant une certaine marge gauche. Nous devons également ajouter une certaine marge gauche pour que le triangle ne dépasse pas du conteneur:

summary {
  list-style-position: outside;
  margin-left: 30px;
  padding: 10px 10px 10px 20px;
  border-radius: 5px;
}

Le résultat est présenté ci-dessous.

I’ve exaggerated the spacing between the arrow marker and the summary text just to make it obvious. Unfortunately, using list-style-position: outside; with the <summary> element doesn’t work in Safari. Fortunately, there are other options, as we’ll see below.

Changer la forme du marqueur

Le marqueur de notre élément <summary> n’a pas besoin d’être un triangle. Nous pouvons le remplacer par n’importe quel caractère de notre choix :

summary {
  list-style-type: '⬇ ';
}

Notez que nous avons utilisé '⬇ ' (avec un espace à côté de la flèche), qui est une alternative à l’espacement que nous avons essayé ci-dessus.

Nous avons maintenant une flèche vers le bas au lieu d’un triangle. Mais … cette flèche vers le bas ne changera pas lorsque l’élément <details> est ouvert. C’est parce que l’élément <details> a deux états — fermé et ouvert — et nous n’avons défini le style du marqueur que pour l’état fermé. Alors, définissons également un marqueur pour l’état ouvert :

details[open] > summary {
  list-style-type: '⬆ ';
}

Cette fois, nous avons utilisé une flèche pointant vers le haut. Cela nous donne le résultat indiqué ci-dessous.

Merde ! Encore une fois, Safari nous laisse tomber, car il ne prend pas en charge list-style-type sur l’élément <summary> non plus. Ne désespérez pas, cependant, car nous examinerons des solutions plus élaborées ci-dessous.

Nous pouvons essayer toutes sortes d’autres caractères, tels que + et –, ✓ et Χ ou ✗, ⋁ et ⋀, et même s’amuser avec d’autres caractères comme ★ ou des fruits colorés comme 🍏 🍌 🍓 🍋 et 🍐, mais rappelez-vous que ces caractères peuvent ne pas fonctionner sur tous les systèmes, alors faites attention, et encore une fois, list-style-type ne fonctionnera certainement pas dans Safari.

Création d’un marqueur personnalisé pour l’élément summary

Comme nous l’avons vu ci-dessus, même si nous pouvons définir un caractère différent pour le marqueur par défaut et lui donner des styles tels que la couleur et la taille de police, cela peut poser des problèmes. Une meilleure option pourrait être d’enlever le marqueur complètement et de créer une alternative totalement personnalisée.

Enlever le marqueur personnalisé

Comme avec les marqueurs d’éléments de liste, nous pouvons enlever le marqueur complètement:

summary  {
  list-style: none;
}

/* soupir, Safari encore */

summary::-webkit-details-marker {
  display: none;
}

La norme list-style: none fonctionne sur tous les navigateurs sauf … (pouvez-vous deviner?) … Safari. Au moins, il existe une option propriétaire -webkit- dans ce cas.

Note : une autre façon d’enlever le marqueur de l’élément <summary> est de donner à l’élément <summary> une valeur display autre que list-item — comme block ou flex. Cela fonctionne dans tous les navigateurs sauf … (est-ce que j’ai même besoin de le dire?) … Safari.

Maintenant, notre élément n’a pas de marqueur.

Ne pas avoir de marqueur ne donne aucun indice visuel que cet élément est cliquable, donc ce n’est pas une bonne idée de le laisser comme ça.

Utiliser une image d’arrière-plan comme marqueur

Nous pourrions placer une image sur l’arrière-plan, comme suit:

summary {
  list-style: none;
  padding: 10px 10px 10px 40px;
  background: url(arrow.svg) no-repeat 14px 50%;
  background-size: 18px;
  font-weight: bold;
}

Le résultat est présenté ci-dessous.

L’inconvénient d’utiliser une image d’arrière-plan directement sur l’élément <summary> est que nous ne pouvons pas la faire pivoter lorsque l’élément <details> est ouvert, car les animations ne peuvent pas être définies directement sur les images d’arrière-plan en CSS. (Bien sûr, nous pourrions utiliser une image différente pour l’état ouvert, mais nous ne pourrions toujours pas l’animer, ce qui est beaucoup plus amusant.) Donc, si nous allons utiliser une image d’arrière-plan, il est préférable de la placer sur un élément qui peut être pivoté et/ou animé.

Utilisation d’une image d’arrière-plan en tant que marqueur avec ::after

Plaçons l’image d’arrière-plan dans un pseudo-élément ::after:

summary {
  display: flex;
}

summary::after {
  content: '';
  width: 18px;
  height: 10px;
  background: url('arrow.svg');
  background-size: cover;
  margin-left: .75em;
  transition: 0.2s;
}

details[open] > summary::after {
  transform: rotate(180deg);
}

Voici une démo en direct de ce code.

Nous avons utilisé display: flex sur l’élément <summary> pour faciliter la position horizontale de la flèche.

Ce qui est agréable avec cette configuration, c’est que nous pouvons ajouter une animation à la flèche. (L’animation ne semble pas fonctionner dans Safari, mais le comportement est suffisamment bon, et je commence à m’ennuyer un peu avec ce navigateur!)

Donner à l’élément summary l’apparence d’une languette

Nous avons configuré l’élément <summary> à largeur maximale, mais cela n’est pas obligatoire. Nous pourrions le rendre plus semblable à une languette, avec ce simple changement:

summary {
  display: inline-flex;
}

Un exemple est présenté ci-dessous.

Limiter la largeur de l’élément details

Dans tous nos exemples jusqu’à présent, l’élément <details> s’est étendu à la pleine largeur de son conteneur, car il s’agit d’un élément de niveau bloc. Nous pouvons lui donner une largeur différente, cependant, si nous ne voulons pas qu’il soit aussi large, comme width: 50%;. Ou nous pourrions le régler en mode en ligne pour qu’il soit aussi large que son contenu:

details {
  display: inline-block;
}

Cliquez sur l’onglet ci-dessous pour révéler la largeur plus étroite de l’élément <details>.

Essayez de changer display: inline-block en width: 50% dans le Pen ci-dessus.

Placer la flèche marqueuse à l’extrémité du résumé

Faisons maintenant quelque chose d’un peu différent, plaçant la flèche marqueuse sur le côté droit de l’élément <summary>. Comme nous avons utilisé display: flex, déplacer la flèche jusqu’à l’extrême droite est aussi simple que d’ajouter justify-content: space-between à l’élément <summary>:

summary {
  display: flex;
  justify-content: space-between;
}

Utiliser ::after comme marqueur sans image de fond

Il existe d’autres façons d’utiliser ::after sans image réelle. Voici un exemple qui utilise simplement ::after avec des bordures:

summary::after {
  content: '';
  width: 0; 
  height: 0; 
  border-top: 10px solid #15171b;
  border-inline: 7px solid transparent;
  transition: 0.2s;
}

Voici une démo en direct.

Maintenant, nous avons une flèche qui tourne entre l’état fermé et ouvert. Nous avons également ajouté une jolie ombre portée à l’élément <details>.

Une autre façon d’utiliser ::after sans image est de placer des caractères Unicode dans la propriété content:

summary::after {
  content: "\25BC";
  transition: 0.2s;
}

Ceci définit une forme de triangle (▼) comme marqueur, comme indiqué dans cette démo CodePen.

Il existe des milliers de symboles Unicode, et ils sont assez amusants à explorer. Chacun vient avec un code comme U + 25BC ou U + 025BC. Pour utiliser ce code à l’intérieur de la propriété content, prenez les caractères après le + et placez-les à l’intérieur des guillemets content, avec un \ à l’avant : content: "\25BC". S’il y a un ou plusieurs zéros au début, vous pouvez les omettre. (Par exemple, U + 02248 peut devenir "\02248" ou "\2248".)

Divers Extras

Jusqu’ici, les choses que nous avons faites ci-dessus sont plus que suffisantes, mais il y a d’autres choses avec lesquelles nous pouvons nous amuser, alors jouons avec quelques-unes d’entre elles ici.

Effet de survol sur l’élément details

Nous pouvons définir divers effets de survol sur l’élément <details>. Par exemple, nous pourrions faire quelque chose comme ceci:

details {
  transition: 0.2s background linear;
}

details:hover {
  background: #dad3b1;
}

Pendant que nous y sommes, transposons également la couleur du texte de l’élément <summary> dans l’état open:

details > summary {
  transition: color 1s;
}

details[open] > summary {
  color: #d9103e;
}

Le résultat est présenté ci-dessous.

Nous pourrions également simplement définir un changement de fond sur l’élément <summary> à la place.

Animant l’ouverture et la fermeture de l’élément details

Haha, je t’ai eu ! Il semble qu’il ne soit pas possible d’animer l’ouverture et la fermeture de l’élément <details>. Selon MDN:

Malheureusement, à l’heure actuelle, il n’y a pas de moyen intégré pour animer la transition entre ouvert et fermé.

Néanmoins, nous pouvons nous amuser en animant le contenu de l’élément <details>. Par exemple, nous pourrions faire apparaître le contenu en fondu une fois révélé :

details article {
  opacity: 0;
}

details[open] article {
  animation: fadeIn .75s linear forwards;
}

@keyframes fadeIn {
 0% {
   opacity: 0;
 }
 100% {
   opacity: 1;
 }
}

Le résultat est présenté ci-dessous.

Une autre astuce pourrait être de faire glisser le contenu, comme ceci :

details {
  overflow: hidden;
}

details[open] article {
  animation: animateUp .5s linear forwards;
}

@keyframes animateUp {
  0% {
    opacity: 0;
    transform: translatey(100%);
  }
  100% {
    opacity: 1;
    transform: translatey(0);
  }
}

Le résultat est présenté ci-dessous.

C’est un peu limite, et peut-être excessif, mais ça vaut le coup d’essayer quand même. Malheureusement, ces animations ne fonctionnent que la première fois que l’élément est cliqué (sauf si les outils de développement du navigateur sont ouverts, pour une raison étrange !). Vous avez essentiellement besoin de l’intervention de JavaScript pour que l’effet fonctionne de manière répétée.

Changement du contenu du résumé dans les états ouvert et fermé

Dans les démos ci-dessus, le <select> a toujours eu le même texte, que l’élément <details> soit ouvert ou fermé. Mais nous pourrions changer cela. Tout d’abord, laissons le texte actuel « Cliquez-moi » en place, mais ajoutons également un peu de texte supplémentaire pour chaque état en utilisant l’élément pseudo-::after:

summary::after {
  content: " to show hidden content";
}

details[open] summary::after {
  content: " to hide extra content";
}

Cela nous donne le résultat présenté ci-dessous.

Changement du curseur du résumé

Le curseur par défaut (ou pointeur de la souris) pour l’élément `<details>` est plutôt étrange. C’est une flèche standard pour la plupart des cas, et un pointeur de texte (ou I-beam) lorsque l’on survole le texte de `<summary>`.

Pour le plaisir, changeons-le en curseur en forme de main (ou « pointeur ») :

summary {
  cursor: pointer;
}

Cela définit le pointeur de la souris en forme de main lorsque l’on survole n’importe où sur l’élément `<summary>`, comme illustré ci-dessous.

Nous pourrions définir le curseur sur l’élément `<details>` au lieu de cela, ce qui forcerait le curseur en forme de main sur l’ensemble de l’élément `<details>`. Cependant, je préfère le garder uniquement sur ce sur quoi nous sommes censés cliquer.

Modification des styles de focus d’accessibilité

Si nous naviguons sur une page à l’aide du clavier, nous pouvons appuyer sur la touche Tab pour accéder à l’élément `<details>` et l’ouvrir en appuyant sur retour. Lorsque cet élément est en focus, l’élément `<summary>` a un contour par défaut. L’image ci-dessous montre à quoi cela ressemble dans différents navigateurs.

Ils sont assez similaires : principalement un simple contour sombre (bleu ou noir), en trait plein, d’environ `3px` de large.

Nous pourrions définir de nombreux styles pour l’élément `<details>` en focus, mais faisons ici quelque chose de simple pour illustrer le concept, en changeant le contour en ligne pointillée rouge :

summary:focus {outline: none;}
summary:focus-visible {outline: 3px dotted #ff0060;}
summary {padding: 10px;}

Par défaut, la bordure de focus ne s’affiche pas lorsque nous cliquons sur l’élément <summary>. Mais si nous modifions le style de focus, ce style s’affiche même aux utilisateurs non-clavier (c’est-à-dire lorsque nous cliquons sur l’élément <details> avec une souris). Ainsi, dans le code ci-dessus, nous avons défini outline sur none et avons utilisé focus-visible pour définir les styles, ce qui signifie que les styles de focus ne seront visibles que pour les utilisateurs de clavier (pour qui cela est réellement utile).

L’image ci-dessous montre notre nouveau style.

Voici une démo en direct.

Nous pourrions nous amuser avec cela, en utilisant des animations, des couleurs d’arrière-plan et ainsi de suite lorsque l’élément <details> est en focus. Je vous laisse expérimenter davantage.

Utiliser plusieurs éléments details comme une liste d’accordéon

Il existe des propositions pour coordonner plusieurs éléments details de manière à ce qu’un élément se ferme lorsqu’un autre s’ouvre. La spécification HTML propose même un attribut name partagé entre plusieurs éléments <details> à cet effet.

Il n’y a actuellement aucun moyen de faire cela avec HTML et CSS seuls, mais il existe des exemples astucieux de le faire avec JavaScript (comme ici, ici, et ici).

Le mieux que nous puissions faire avec CSS est de styliser l’élément actuellement ouvert différemment des autres, en utilisant certaines des techniques que nous avons abordées ci-dessus.

Voici un exemple simple:

details {
  background-color: #2196F3;
}

details[open] {
  background-color: #ce0e99;
}

Styliser un titre à l’intérieur du résumé

Certains développeurs, soucieux de la structure de leur HTML, aiment placer un élément de titre à l’intérieur de l’élément <summary>. Que cela soit utile ou non est en débat, mais le rendu par défaut n’est pas agréable, avec le titre situé sur la ligne en dessous de la flèche. Cela peut être corrigé en définissant le titre sur display: inline ou display: inline-block:

summary h2 {
  display: inline;
}

Vous pouvez consulter une démo de cela sur CodePen.

Conclusion

Comme nous avons essayé de le montrer ci-dessus, il existe de nombreuses façons simples de mettre en forme l’élément <details>. Définir les bordures, les rembourrages et les couleurs de fond est facile, et cela améliore considérablement l’apparence. Certaines méthodes pour styliser le marqueur par défaut sont très pratiques, mais étant donné que Forrest’s fruit company () rencontre de nombreux problèmes pour styliser le marqueur, il pourrait être préférable d’éviter cette option, au profit de la création d’un marqueur entièrement personnalisé. (Cela dit, styliser le marqueur ne rompt pas l’élément <details> dans Safari.)

Il y a eu des tentatives d’animer l’ouverture et la fermeture de l’élément <details> uniquement avec CSS, mais elles sont au mieux hasardeuses, donc il n’est pas utile d’essayer de plonger dans ce gouffre. Si vous voulez vraiment animer l’ouverture et la fermeture, vous aurez besoin de JavaScript.

Pour en savoir plus sur l’élément <details>, consultez les éléments suivants :

Si vous trouvez d’autres façons cool de styliser l’élément <details>, faites-le moi savoir sur Twitter, et nous pourrions les présenter ici.

Source:
https://www.sitepoint.com/style-html-details-element/