J'essaye une nouvelle fonctionalité de CSS3 : les transitions.
En CSS on peut depuis longtemps définir une couleur pour les éléments, et une autre à afficher quand l'utilisateur passe la souris dessus.
En CSS 3, on peut dorénavant spécifier la durée de la transformation; elle n'est plus obligatoirement instantanée.
J'ai donc ajouté les instructions suivantes à mon code CSS :
transition: all .5s linear; -o-transition: all .5s linear; -moz-transition: all .5s linear; -webkit-transition: all .5s linear;
ainsi, si avant on avait :
 |
Maintenant on a :
 |
Cela fonctionne avec Safari, Opera, Chrome, mais pas avec Internet Explorer (pour changer). Quant à Firefox, il devrait afficher les transitions dans une prochaine version.
Ce qui est bien avec ça, c'est que pour les navigateurs qui ne supportent pas le css3, la transition reste instantanée. On a donc une nouvelle fonctionalité sans casser l'existant, ce qui respecte le principe de "Graceful Degradation".
Commentaires
Ah cool ! Je met en effet un max de CSS3 sur le template d'un de mes sites, notamment pour les bordures arrondies, ombres et "gradients". Ca permet d'alléger la page (pas de gradients avec une image, pas de javascript ou d'images pour faire les arrondis...). JQuery permet de faire facilement des transitions mais bon, si c'est carrément intégré au navigateur, c'est mieux !
Tant pis pour IE, qui effectivement affichera une version dégradée mais pas trop, ce qui est plutot sympa.
Par contre FF le gère pas encore ? Pas glop.
C'est beau mais comme dit KG balot que ça marche pas avec les deux principaux navigateur :(
L'ajout de commentaires est désactivé.
