Bienvenue à Mammouthland,

Mercredi 10/08/11

Vignettes façon thumbnail en CSS 3

Sur CSS débutant j'avais, il y a bieeeen longtemps, mis en ligne un tutoriel sur la façon de zoomer des vignettes façon thumbnail.. Ce tutoriel était bien entendu basé sur des CSS 2.1.

Les CSS3 offrent de nouvelles possibilités et j'ai voulu modifier ce tuto pour le mettre à la sauce transform:scale() et transition.

• scale() indique le facteur d'agrandissement à appliquer en indiquant le nombre voulu dans les parenthèses.
• transition admet plusieurs valeurs : la propriété sur la/les/quelle(s) doit s'affectuer la transition, la durée de celle-ci et son type d'effet (linéaire, ou rapide au début, ou à la fin, etc.)

Côté compatibilité avec les navigateurs, transform fonctionne avec tous les navigateurs récents, même IE9. Par contre transition n'est pas pris en charge par IE9, mais on s'en moque un peu : cet effet n'est pas crucial en soi, c'est juste pour donner de la fluidité à l'agrandissement.

J'ai constaté par contre une non prise en charge de transform sur la pseudo classe :focus par chrome. C'est bien dommage car cela permet d'obtenir un zoom en tabulant avec le clavier et pas seulement au survol de la souris.
Opera a aussi un comportement un peu sacadé en fin de transition.
Cependant, on va se garder de crier après les navigateurs "déficients" : la spec du W3C étant encore à l'état de brouillon, les navigateurs font ce qu'ils peuvent avec les moyens du bord.

Voici de quoi tester ce que ça donne avec quelques magnifiques photos de mes magnifiques vacances en Bretagne :

Le code (x)html utilisé est des plus simples :

<div class="zoom" id="zoom" >
<p>
<a href="#zoom"><img src="mine.jpg" alt="" /></a> 
<a href="#zoom"><img src="port-navallo.jpg" alt="" /></a>
<a href="#zoom"><img src="eau.jpg" alt="" /></a>
</p>
</div>

Oui, je sais : l'utilisation des liens fictifs, c'est discutable. Mais ça permet donc le zoom au clavier et aussi d'adapter quelque chose pour IE6, même s'il meurt inexorablement...

Par défaut l'agrandissement se fait à partir du centre de l'image. On peut le modifier grâce à transform-origin qui admet les mots clés top, bottom, left, right, ou un pourcentage, ou encore une longueur.

Il convient tout de même de faire attention à la taille globale de la page. En effet, l'image zoomée peut déborder de la fenêtre. Donc à moins que ce soit le clavier qui ait été utilisé et qui donc "fixe" l'image à l'écran, on ne peut pas atteindre l'ascenceur pour la voir entièrement.

L'option transform:translate() ne donne hélas pas, d'autre part, de résultats satisfaisants pour tenter de recadrer l'image dans la page. L'image peut en effet "s'échapper" du contrôle de la souris. Dans ce cas, soit on n'arrive pas à retenir l'image agrandie, soit on a des sauts intempestifs très désagréables.

Code CSS

.zoom p img {
width:120px;
height:90px;	    
display:inline-block;
}
.zoom p a {
outline:none
}
.zoom p a:hover img, .zoom p a:focus img {	
/*webkit*/
-webkit-transform:scale(5);	
-webkit-transform-origin:top left;
-webkit-transition:all 0.7s linear;	 
-webkit-box-shadow:1px 1px 10px dimgray;
/*mozilla*/
-moz-transform:scale(5);
-moz-transform-origin:top left;
-moz-transition:all 0.7s linear;
-moz-box-shadow:1px 1px 10px dimgray;
/*internet explorer*/
-ms-transform:scale(5);
-ms-transform-origin:top left;
-ms-transition:all 0.7s linear;
/*opera*/
-o-transform:scale(5);
-o-transform-origin:top left;
-o-transition:all 0.7s linear;
/*w3c*/
transform:scale(5);
transform-origin:top left;
transition:all 0.7s linear;	
box-shadow:1px 1px 10px dimgray; 
}

Pour les versions antérieures à IE9, on rajoutera le code suivant dans un commentaire conditionnel excluant IE9 :

.zoom p {
position:relative;
}
.zoom p a:hover img, .zoom p a:focus img {
position:absolute;
width:600px;
height:400px;
}

[Edit 11/08]

1. Florian, qui se gausse qu'on puisse encore s'intéresser à IE6 en 2011 (die IE6, die), propose d'attribuer un tabindex pour donner un focus aux images, plutôt que de mettre des liens fictifs. Effectivement, c'est une solution ;
2. Pour Chrome, déclarer les tailles des images en pourcentages donne des résultats incohérents... Je ne comprends pas bien quel calcul il fait, mais les images sont complètement déformées si on déclare width et height en %. Il y a un cours de math sur les % qui a du mal passer au niveau des développeurs  ;
3. Opera windows ne semble pas du tout aimer le line-height hérité d'une déclaration sur les paragraphes. Cela donne des résultats... surprenants. La solution : enlever <p> du code s'il y a un line-height de déclaré quelque part.