Catégories
Astuces et Design

Explorer ce que les détails et les éléments récapitulatifs peuvent faire

Nous avons déjà mentionné à quel point le

et

les éléments sont. Ils sont parfaits pour créer rapidement des accordéons accessibles au toucher, à la souris et au clavier:

et

peut même être utilisé pour lire / mettre en pause des gifs! Cliquez sur le bouton Pause en haut à droite de cette image pour la voir en action:

Neat, hein? Mais que peuvent faire ces éléments d'autre? Pendant longtemps, je n'ai pensé qu'à details comme moyen de fabriquer des accordéons. Mais l'autre jour, j'ai commencé à y réfléchir un peu, et la première chose que j'ai réalisé était que nous pourrions peut-être faire de meilleures notes de bas de page avec eux.

Aujourd'hui, nous faisons généralement des notes de bas de page avec uniquement du HTML:

Cliquer sur un lien dans un paragraphe vous pousse au bas de la page où se trouve la description de la note de bas de page. Et nous faisons cela en établissant des liens vers l'ID des éléments dans les deux sens. Mais! Il existe des plugins jQuery comme BigFoot qui vous permettent d'avoir des notes de bas de page en ligne.

Voici le même exemple avec le script BigFoot et jQuery qui lui sont appliqués:

Neat hein? BigFoot prend notre balisage accessible, supprime tous ces éléments de lien et le jette directement en ligne comme un petit bouton et une info-bulle.

Mais et si nous pouvions utiliser

et

remplacer ce jQuery et le simple HTML pour nos notes de bas de page? Eh bien, malheureusement, nous ne pouvons pas. Si vous essayez de placer l'un de ces éléments dans un

balise, les navigateurs rendent ces éléments en dehors de

élément:

Blabla! C'est ennuyeux mais je comprends en quelque sorte pourquoi cela fonctionne comme ça. Ce serait formidable si nous pouvions remplacer la complexité de tous ces liens et l'expérience merdique de sauter de haut en bas de la page. Mais nous ne pouvons pas.

Eh bien, si nous ne pouvons pas faire cela, que pouvons-nous utiliser d’autre

et

pour? Cela m'a fait réfléchir… qu'en est-il des info-bulles? Hé bien oui! Nous pouvons absolument le faire. Supposons que nous ayons un balisage comme celui-ci qui étend la date affichée:

Assez standard, nous avons déjà vu cela. Mais passons maintenant au style qui est le plus intéressant. Tout d'abord, nous devons nous attaquer au

élément:

details {
  border-radius: 3px;
  cursor: pointer;
  display: inline-block;
  position: relative;
  transition: 0.15s background linear;
}

details:hover,
details:focus {
  background: #d4d1ec;
}

Cela nous permet de positionner absolument les informations dans notre élément de détails, mais cela permet également à l'info-bulle de se sentir un peu plus comme un bouton sur clic avec l'arrière-plan. Ensuite, nous pouvons annuler la flèche par défaut pour le summary élément en faisant ceci:

summary {
  background: url("https://assets.codepen.io/14179/Info.svg") 11px 11.5px no-repeat;
  list-style: none;
  padding: 10px;
  padding-left: 33px;
}

Et enfin, nous devons absolument positionner le paragraphe que nous avons dans le details élément. Et faites un tout petit triangle qui pointe vers le reste de l'info-bulle:

details p {
  cursor: auto;
  background: #eee;
  padding: 15px;
  width: 250px;
  position: absolute;
  left: 0;
  top: 35px;
  border-radius: 4px;
  right: 0;
}

// Tiny triangle that points up
details p:before {
  content: "";
  border-bottom: 12px solid #eee;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  height: 0;
  left: 10px;
  position: absolute;
  top: -10px;
  width: 0;
}

Ce qui conduit à quelque chose comme ça. Assurez-vous de cliquer sur l'info-bulle pour voir la description apparaître en dessous:

Une bonne chose que nous pouvons faire ici pour peaufiner un tout petit peu les choses est d'ajouter une animation lorsque l'info-bulle est ouverte:

details(open) p {
  animation: animateDown 0.2s linear forwards;
}

@keyframes animateDown {
  0% {
    opacity: 0;
    transform: translatey(-15px);
  }
  100% {
    opacity: 1;
    transform: translatey(0);
  }
}

Et voila! Si vous cliquez sur l'info-bulle, elle s'ouvrira et si vous tabulez et cliquez sur l'espace, elle s'ouvrira également.

Mais nous pouvons prendre ça peu plus loin. Quelque chose que nous ne voulons probablement pas, c'est un tas de ces info-bulles qui s'ouvrent partout. Si nous utilisons beaucoup les info-bulles, cela pourrait devenir très maladroit et distrayant visuellement. Ce que nous devons faire est de fermer l'info-bulle lorsque nous cliquons en dehors de celle-ci. Et nous pouvons le faire avec du JavaScript léger:

const tooltip = document.querySelector(".tooltip");

document.addEventListener("click", function (e) {
  var insideTooltip = tooltip.contains(e.target);

  if (!insideTooltip) {
    tooltip.removeAttribute("open");
  }
});

Désormais, lorsque vous cliquerez sur l'info-bulle, elle la fermera. Neato!


le

et

Les éléments ne peuvent pas tout faire, mais ils peuvent certainement faire beaucoup de choses pratiques – et je pense que cette combinaison d’éléments peut faire beaucoup plus. Nous devons juste aller les trouver. En fait, voici d'autres articles intéressants sur le sujet.

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *