Je me suis aperçu récemment de l'existence de la balise details et je me suis dit que je pourrais me noter celles qui me feraient de l'usage dans un éventuel avenir.
<details>
L'élément HTML details sert à créer une ligne de résumé permettant de révéler plus d'informations sur un clic.
L'attribut [open] permet de styler l'ensemble lorsqu'il est ouvert.
<style>
details{font-style:italic;cursor:pointer}
details:after summary{content:"▶"}
details[open]:after summary{content:"▼"}
details p{margin-left: 25px}
</style>
<details>
<summary>Ligne de résumé.</summary>
<p>Tout plein de détails extrêmement intéressants pour ceux qui veulent mais inutiles pour les autres...</p>
</details>
Ligne de résumé.
Tout plein de détails extrêmement intéressants pour ceux qui veulent mais inutiles pour les autres...
La balise data permet d'ajouter une valeur interprétable par une machine à une valeur lisible par un humain: plus simplement, on peut relier le nom d'un produit à son ID dans la base de données par exemple.
Crée une jolie jauge dont on définit le remplissage afin de représenter visuellement une proportion. Elle utilise les mêmes attributs qu'input number (min, max, value) et y ajoute high, low et optimum qui définissent respectivement à partir de quel nombre la valeur est haute ou basse ainsi que la valeur considérée comme optimale.
Il faudra prévoir l'affichage de la valeur courante (et cette balise n'accepte pas les pseudo-éléments before et after)
<meter value="2" min="0" max="10" low="2">2 out of 10</meter>
meter value="0.6">60%
.jpg)