Hello, I’m Vinch

And this is my website.

Une alternative à sIFR : Facelift Image Replacement

07/31/08

This post is more than 6 years old. It might not reflect my current skills and convictions.

D’habitude, je range ce genre d’informations dans un billet en vrak mais comme chez Facelift, on m’a gentiment et rapidement répondu dès que j’ai eu un problème, je récompense le travail et le dévouement du développeur (car il est seul en fait) en consacrant un billet à part entière à son projet (ça doit lui faire une belle jambe mais bon).

Facelift

Avant de vous expliquer à quoi sert Facelift, mettons nous en situation… Actuellement, seules quelques polices standards peuvent être utilisées sur le Web car elles sont communes à tous les systèmes d’exploitation et garantissent que le site sera visible de la même façon, quel que soit l’environnement. Ces polices sont listées sur cet article Wikipédia. Comme vous voyez, elles ne sont pas nombreuses et pas très originales… De temps en temps, les designers aiment utiliser des polices un peu exotique pour styliser certains éléments textuels (les titres généralement) et c’est là que ça devient chiant à gérer pour les pauvres petits intégrateurs que nous sommes. Plusieurs solutions se présentent à nous :

* Afficher une image en arrière plan et cacher le texte via la propriété CSS text-indent: -9999px (ce qui va décaler le texte super loin donc on ne le voit plus). Ce n’est pas une bonne solution car si les titres changent, on est bon pour refaire les images.
* Utiliser sIFR qui remplace les titres dynamiquement (via JavaScript) par un fichier SWF. C’était la meilleure solution jusqu’il y a peu (avant que je ne découvre Facelift) mais par expérience : c’est très lourd, ça marche de façon aléatoire et ce n’est très peu flexible au niveau style. Autrement dit, au moins je dois utiliser cette chose, au mieux je me porte…

Même si un projet relativement jeune et porté par un seul développeur (qui doit faire ça après le boulot), Facelift me semble être beaucoup plus pratique et prometteur que sIFR. Au contraire de ce dernier, Facelift génère le contenu de remplacement côté serveur, en PHP. Ca peut sembler être un inconvénient mais c’est pour moi un avantage car ça garantit que le titre sera affiché de la même façon dans tous les navigateurs. Il suffit de l’initialiser en deux lignes de JavaScript et Facelift va générer les images très rapidement avec les styles définis dans vos fichiers CSS. La mise en cache permet d’améliorer encore les performances.

Pour ces quelques raisons, je vous recommande donc l’utilisation de Facelift et de foutre ce bon vieux sIFR à la poubelle. Allez jeter un oeil aux démos pour vous en convaincre définitivement…

La bonne nouvelle, c’est que des outils comme sIFR et Facelift vont disparaitre peu à peu car on pourra bientôt afficher n’importe quel police dans les navigateurs via CSS (version 3) et son module Web Fonts. J’y reviendrai certainement dans un prochain billet mais sachez que c’est déjà implémenté dans Safari, Opera et Internet Explorer 8. Patience donc… (plus que 10 ans à tenir)

Merci à Ced pour le tuyau ;-)

Test des propriétés CSS extraordinaires de Safari !

07/26/08

This post is more than 6 years old. It might not reflect my current skills and convictions.

Cela faisait un petit temps que je voulais tester -webkit-transform et -webkit-transition, deux propriétés CSS qui fonctionnent exclusivement avec Safari (et son moteur de rendu WebKit) mais qui augurent de bonnes choses pour l’avenir du Web.

Safari

Sans plus attendre, voyez l’exemple qui vous démontrera les extraordinaires capacités de ces deux propriétés CSS (je rappelle que ça ne fonctionne qu’avec les dernières versions de Safari).

La première propriété CSS utilisée est -webkit-transform. On peut la voir à l’oeuvre quand la souris passe sur la photo :

#kelly:hover {
	-webkit-transform: scale(1.5) rotate(360deg) skew(10deg);
}

* scale permet de zoomer sur la photo. Ici, on zoome à 150%.
* rotate permet de faire une rotation sur l’image. Ici, on fait une rotation de 360°, c’est à dire un tour complet.
* skew permet de biaiser l’image et prend un angle en argument (10° ici). En chipotant un peu, cela pourrait servir à faire de la 3D…

Je ne l’ai pas fait ici mais il est également possible de faire des translations via translate.

-webkit-transition permet d’animer tout ça :

#kelly {
	(...)
	-webkit-transition: all 0.5s ease-in;
}

Elle nécessite trois arguments :

* la propriété sur laquelle porte la transition. Ici, la transition porte sur toutes les propriétés mais j’aurais très bien pu remplacer all par -webkit-transform.
* la durée de la transition en secondes.
* le type de transition (linear, ease-in, etc.)

Inspirations :

* CSS Transforms sur Surfin’ Safari
* CSS Animation sur Surfin’ Safari