Avec ce billet, j'initie une petite série intitulée Gist de la semaine (qui risque fortement de ne pas se faire toute les semaines :))
J'essaierais de vous fournir, régulièrement, des extraits de codes qui m'ont amusé ou intrigué. Celui-ci parlera des rotations de texte en CSS et du bout de code que j'ai écrit pour faciliter le processus pour la nouvelle page 404 de ce blog et le "logo" (pas vraiment un, juste du texte). Cela s'accompagne d'un léger lifting sur le thème utilisé, avec l'adoption d'un ton plus "darky" et un peu d'exotisme sur les liens (text-shadow) mais tout ceci est un peu hors du propos de ce billet.
Mr. Frown
Il y a vraiment plein de bonnes choses dans HTML5 Boilerplate. Mon coup de coeur reste la page 404.html, là ou j'ai fait la connaissance de Mr. Frown (qui se cache aussi ici ou là le bougre) (Edit 27/12/10: Plus vraiment à jour, le nouveau moteur de blog étant Wheat, les erreurs 404 sont configurés pour retourner la réponse de l'index, plus de Mr Frown donc sur une mauvaise URL, mais il reste ci-dessous...)
Sans plus attendre, un extrait de ce fameux fichier 404 :
La partie nous intéressant le plus étant:
Je ne sais pas si cela voulu de la part des auteurs ou s'il s'agit d'un "bug", mais j'ai du ajouter ces préfixes (-webkit; -moz) pour permettre à la rotation de se faire sur les navigateurs webkit et gecko.
Cela nous permet d'inviter la Frown Family (et même de les amener en soirée):
Ces "smileys", par rapport à des images, ont l'avantage de n'avoir pratiquement aucun poids sur la page, aucune requête http, complètement intégré dans votre sémantique, leur taille peut-être changée à volonté, le spectre de couleur est infini et le tout est entièrement scriptable. Si vous êtes assez fou pour cliquer sur Mr. Frown (le patriarche en haut), vous pourrez vous en rendre compte ;)
Vous pourrez trouver l'ensemble du code relatif à ce post sur ce gist.