HTML5 : la propriété <figure> c'est super !
Rédigé par uTux 2 commentairesJ'ai fait beaucoup de CSS de 2008 à 2010, j'étais capable de coder un thème dotclear ou pluxml de A à Z avec un simple éditeur de texte. Mais les choses ont beaucoup changé aujourd'hui, HTML5 est arrivé ainsi que le responsive design et javascript qui prennent une place de plus en plus importante. Donc je suis non seulement rouillé mais en plus totalement à la ramasse par rapport au code moderne.
C'est la raison pour laquelle je me suis contenté de légèrement modifier le thème de base Pluxml au lieu d'en refaire un entier. Rien de bien fracassant puisque je me suis contenté d'ajouter un fichier "local.css" invoqué dans le header afin de modifier certains éléments notamment les couleurs et les polices.
En cherchant comment gérer une image + sa légende dans un article j'ai découvert <figure>. Cette propriété HTML5 évite de devoir créer inutilement des <div> et se révèle plus élégante :
<figure>
<img src="https://utux.fr/data/medias/0005/orage.jpg" alt="" />
<figcaption>Orage à Nantes (août 2015)</figcaption>.
</figure>
Lisible non ? Plus d'infos chez alsacréations. ou w3schools. Je ne détaille pas la partie CSS car ce serait un peu lourd, mais si ça vous intéresse vous pouvez jeter un œil dans le local.css. En attendant voici le résultat :
Image extraite d'une vidéo prise avec un Lumia 735 il y a quelques temps. La tour que l'on voit entre les grues à gauche et l'éclair est bien sûr la Tour Bretagne.