Hello, I’m Vinch

And this is my blog.

Une alternative à sIFR : Facelift Image Replacement

07/31/08

This post is more than 5 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 ;-)

10 comments

Leave a comment