Dans l’article Nouvelle méthode de remplacement d’image en CSS, je vous faisais part d’une nouvelle méthode de remplacement de texte par l’image en CSS proposée par Scott Kellum qui utilise la propriété text-indent avec un décalage en pourcentage. Cette méthode n’étant pas dénuée d’effets de bord (voir dans la suite de l’article), une nouvelle technique a fait son apparition lors de la mise à jour de HTML5 Boilerplate. Je vous propose une traduction de l’article Another CSS image replacement technique écrit par Nicolas Gallagher qui détaille une technique avec font-size : →
Il est courant d’afficher le logo d’un site web sous la forme d’une image au lieu de mettre le nom du site au format texte HTML. Les préoccupations grandissantes des webmasters concernant l’optimisation SEO ont popularisées les titres HTML composés de mots-clés optimisés puis masqués au profit d’un logo sous forme d’image. Pour y parvenir, les intégrateurs HTML & CSS ont plusieurs cordes à leur arc. Malheureusement certaines solutions présentent des défauts, notamment en ce qui concerne l’accessibilité des contenus cachés, qui peuvent rester inaccessibles pour certains (agents) utilisateurs. Sans parler du risque (faible dans ce cas) de passer aux yeux de Google pour un vilain petit cachottier. Voici donc un florilège de techniques CSS pour cacher ce texte que l’on ne saurait voir, mais qui a son importance. →
Text Resizing width jQuery — Même s’il vaut mieux laisser les visiteurs se débrouiller avec les fonctionnalités intégrées à leur navigateur préféré, voici un script de plus pour modifier la taille du texte sur votre site web. Petit bonus avec le retour à la taille par défaut.
Si la modification de la taille du texte fait déjà partie des fonctionnalités du navigateur, il peut être utile de proposer aux visiteurs une alternative sur la page web. Avec Simple jQuery Text Resizer et une simple liste HTML vos visiteurs choisiront la taille qui leur convient et un cookie gardera leur préférence en mémoire tout au long de la navigation ou lors de leur prochaine visite selon la date d’expiration indiquée.
jQuery Flash Plugin — Inspiré par SWFObject, UFO et sIFR, jQuery Flash Plugin a été complètement réécrit via jQuery pour éviter les redondances telles que recherche des éléments par leurs sélecteurs, la détection du navigateur, détection de Flash et améliorer les temps de chargement (si vous utilisez déjà jQuery, bien entendu). Sert aussi bien à faire du simple remplacement des contenus alternatifs par une animation Flash ou remplace le texte contenu dans une balise par l’équivalent avec la police de caractère de votre choix (comme sIFR) !
Il suffit parfois d’une coupure de fin de phrase malheureuse pour que le sens global nous échappe ou qu’un double sens politiquement incorrecte voit le jour… Par ailleurs, un mot seul sur sa ligne n’est pas très esthétique visuellement. Voici une fonction jQuery pour remettre les choses en place ^_^ →
