HTML5, images, border-radius et rognage

Je suis en train de me familiariser avec HTML5 et CSS3. C’est assez plaisant, et permet d’atteindre les résultats de présentations recherchés en un rien de temps, comparativement aux efforts que l’on doit fournir dans certains cas en CSS2. La sémantique est plus poussée, plus appropriée ; cela demande une adaptation pour bien saisir le sens de chacune des nouvelles balises, mais au final, la structure logique obtenue est plutôt sympathique !

Passé les plaisirs de la découverte, quand on commence à approfondir, on s’aperçoit vite de certaines limites et du chemin encore long à parcourir avant une adoption uniforme et cohérente des nouvelles normes par les navigateurs… et, bien entendu, par la pénétration des dernières versions des butineurs chez le plus grand nombre.

Le problème que j’évoque ici concerne la propriété border-radius appliquée à une balise <img />. Je développais sous Chrome (donc via le moteur de rendu Webkit – résultats identiques avec Safari) et tout se passait bien. En allant voir ce qui se passait sous Firefox, j’ai eu la surprise de découvrir que la bordure arrondie ne s’appliquait pas aux images.

J’ai le code suivant :

1
2
3
4
<figure>
	<a title="..." href="...">
		<img title="..." src="..." alt="..." /></a>
</figure>

Si l’on applique une bordure arrondie à la figure, aucun problème ; que l’on soit avec Webkit ou Gecko, le rendu est le même. En revanche, sous Gecko, la bordure arrondie appliquée à l’image ne fonctionne pas. Du coup les images restent rectangulaires. C’est un problème connu… qui aura peut être son correctif dans Firefox 4.

Il y a bien une solution simple à mettre en oeuvre : ne pas mettre de balise img et utiliser l’image en tant qu’image de fond du lien de la figure via la directive background-image de CSS.

L’inconvénient ? Si votre figure est un élément décoratif de votre charte graphique, aucun problème tout est fait depuis la feuille de styles. Mais si votre figure est un élément de donnée (provenant de la base de données par exemple), que vous ne connaissez pas à l’avance, il devient nécessaire d’ajouter l’attribut style à votre lien dynamiquement construit dans votre boucle de génération du code HTML. Vous perdez alors un peu de sémantique puisque l’image n’est plus reconnu en tant que contenu propre mais en tant que simple élément décoratif. Je modère la perte avec « un peu » car grâce à HTML5, la balise figure est toujours là et représente toujours une image. Avant HTML5, cela aurait été une simple division, sans aucune sémantique. Tout n’est pas perdu ;-).

Leave a comment

Merci d'utiliser le forum pour toute demande de support relatif aux ressources proposées sur ce site.