6 Balises HTML5 intéressantes

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

en savoir plus - compatibilité 92% et pas sur edge

<dialog>

Crée une boîte de dialogue dans laquelle on peut mettre ce que l'on veut. L'attribut open contrôle l'ouverture et la fermeture

en savoir plus - compatibilité 75%, c'est peu...

<data>

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.

<p>New Products:</p>
<ul>
    <li><data value="398">Mini Ketchup</data></li>
    <li><data value="399">Jumbo Ketchup</data></li>
    <li><data value="400">Mega Jumbo Ketchup</data></li>
</ul>

en savoir plus - compatibilité 99%

<base>

Fournit l'url de base et le target pour tous les liens relatifs de la page. en savoir plus - compatibilité 98%

<meter>

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%
2 out of 10 60%

en savoir plus - compatibilité 95%

<progress>

Comme meter, progress crée une... barre de progression. Elle utilise les attribut max et value.

Il faudra prévoir l'affichage de la valeur courante (et cette balise n'accepte pas non plus les pseudo-éléments before et after)


<progress value="2" min="0" max="10" low="2">2 out of 10</progress>
progress value="0.6">60%
2 out of 10 60%

en savoir plus - compatibilité 98%

image

❝ 2 commentaires ❞

1  jerry wham le

Merci pour le partage et bien la nouvelle mouture de ton site (non, ce n'est pas une contrepèterie. Ne cherche pas... Tu cherches là ?! ).

Il y a une ch'tite erreur sur la 2ème avant dernière balise script ce qui fait que le bas de page ne s'affiche pas bien.
Il y a aussi un `p` qui traine (et ça pue ) après le ok de la balise de recherche.

La bise

 
2  Bronco le

Merci !
(et OUI, J'AI CHERCHÉ)

 

Fil RSS des commentaires de cet article

✍ Écrire un commentaire

Inutile de poster un commentaire à la con pour vous faire de la pub, ce sera filtré et dégagé direct...

Quelle est la troisième lettre du mot mdknl ?