Chose promise dans les commentaires de l’article précédent, chose due, voilà ma petite surprise. Vous vous souvenez tous (ou pas) de l’extraterrestre en flash que j’avais réalisé en cours il y a de ça plus de 6 mois…. Et bien le revoilà, mais cette foi-ci version space-invader en mode css3 :
Pour ceux qui ne voient rien (les yeux sont censés bouger), qui vont dire que les yeux sont décalés, il va vous falloir passer sous chrome ou safari. En effet, j’utilise les transitions mais surtout les animations css3 pour le réaliser. Pour les plus curieux, vous pouvez jeter un petit coup d’oeil au css. Le plus long a été de créer les images clés. Je trouve qu’une fois qu’on a compris le concept d’image clés et d’interpolations dans flash, les animations css3 sont construites un peu sur le même principe. Le plus dur dans mon cas, a été de faire en sorte que les yeux ne bougent pas d’une façon fluide, mais par accoues. J’ai un peu triché pour ça en définissant 2 images clés par position au lieu d’une.
Pour le moment les animations ne sont supportées que par deux navigateurs, mais firefox 3.7 devrait s’y mettre dans pas très longtemps. Certes je suis encore loin du spiderman en pure css3 html5 et jquery, mais bon, c’était pour tester un peu les nouvelles possibilités et j’avoue que j’en suis plutôt enchantée.
J’ai lu pas mal de blogs et d’articles ces derniers temps sur faut-il ou non utiliser le css3 et toutes ces nouvelles techniques même si elles ne sont pas compatibles avec certains vieux navigateurs (suivez mon regard vers IE …). Je suis tombée sur un concept que je trouve pas mal, qui est le concept de « progressiv enhancement ». Le principe est de créer un site « basique », qui tient la route, donc le design est stable sans trop de tra la la qui passe sur tous les navigateurs. Ceci fait, on peut, comme pour un tableau à l’aquarelle, rajouter des petites surcouches de ci de là pour rendre le site plus agréable pour les nouveaux navigateurs. On peut rajouter du fade sur les images, des transitions sur les couleurs de liens, des rotations sur les images, au survol, des bords arrondis, etc etc. Je suis partisane du fait qu’il faut aujourd’hui oublier l’idée d’avoir un site pareil au pixel près sur tous les navigateurs. Pour moi il faut un site, dont on puisse lire le contenu sur tous, dont le design ne parte pas en sucette dans tous les coins, un site « classique » pour nos vieux amis IE6 e IE7, qui sera plus esthétique, plus fluide et plus « design » sur les navigateurs modernes.
Je vais vous illustrer le fond de ma pensée. Le projet sur lequel je travaille actuellement comporte une ombre autour du container blanc de la page principale. Franchement, qu’elle soit là, ou pas, je pense que le lecteur n’en a strictement rien à faire. Cette ombre donne du relief au site, de la profondeur, certes. Du coup j’ai utilisé les box-shadow pour qu’elle soit présente sur chrome safari et firefox, mais les utilisateurs d’IE n’y auront pas droit. Un gain énorme pour moi, tout d’abord en terme de temps. Si j’avais du créer des images pour refaire artificiellement cette ombre, j’aurai perdu un temps fou. Un gain pour la rapidité du site aussi, imaginez le temps de chargement des mes images ! A l’heure où de plus en plus de sites sont visités depuis des applications mobiles, je pense que le gain de temps de chargement d’une page n’est pas négligeable par rapport aux détails esthétiques que cette ombre peut ou non apporter. Un gain sémantique également, j’ aurai du recourir à des div vides juste pour placer mes ombres.
Au passage, nous avons reçu un Ipad aujourd’hui au boulot, et le site est niquel. Encore mieux, mon chef de projet le trouve « plus beau sur ipad que sur pc, les couleurs du site sont magnifiques ». Le site se charge vite, les transitions sont fluides, bref un plaisir. Par contre je ne pourrais jamais m’habituer à naviguer avec les doigts, après 3 minutes j’en avais déjà marre.
Comme je l’avais dit dans les commentaires et l’article précédent, je suis vraiment très enthousiaste quant aux évolutions actuelles dans le domaine du web, et, j’ai presque honte de le dire, j’ai hâte que IE9 sortes pour voir si ils vont vraiment réussir à implémenter toutes les spécifications du CSS3.
hors sujet : si quelqu’un connait un plugin pour insérer directement du css dans l’éditeur wordpress dans des balises conditionnelles, l’éditeur s’amuse à me mettre des < p >autour de mon css ce qui le rend inutilisable. Ça m’ennuie un peu d’avoir une css pour l’extraterrestre qui ne servira que pour cette page, je pense qu’il doit exister un plug-in, mais j’ai rien trouvé.
