Rempla­cer du texte par une image en CSS


Dans les années 2007 à 2009 on avait une collec­tion d’hor­ribles bidouilles CSS pour insé­rer des images à la place de certains textes via CSS. L’idée c’est que certaines images ne sont pas du contenu mais bien de la présen­ta­tion, poten­tiel­le­ment dépen­dantes du contexte.

Le besoin était tel que c’était un des sujets les plus en vue en CSS pendant des années avec « comment centrer un contenu verti­ca­le­ment ».

h3.nir {
   height: 75px;
   width: 300px;
   overflow: hidden;
   margin: 0;
   padding: 0;
 }
 h3.nir:before {
   content: url(http://…/test.png);
   display: inline-block;
   font-size: 0;
   line-height: 0;
 }

Fran­che­ment c’était de la bidouille de haut vol, avec plein de défauts. On rêvait d’un truc plus simple, qui fonc­tionne correc­te­ment quand l’image ne se charge pas et sur les lecteurs d’écran, sans flash de contenu non stylé. Je me demande même ce qui suit n’a fonc­tionné sur certains navi­ga­teurs, mais on n’y est visi­ble­ment pas encore :

h3 { content: url(http://…/test.png); }

CSS a beau­coup évolué, les navi­ga­teurs aussi. J’es­pé­rais qu’on avait enfin résolu ce problème ultra bateau. Visi­ble­ment non. La seule solu­tion passe par des polices de carac­tères d’icônes et des recon­nais­sances de liga­ture. Le reste n’a que peu changé en 10 ans, on a juste enlevé les besoins de compa­ti­bi­lité sur les vieux navi­ga­teurs.

J’avoue que je ne comprends pas. On ajoute des fonc­tion­na­li­tés de folie et on ne gère toujours pas la base qui a généré des milliers de pages en bidouilles de contour­ne­ment. Qu’on m’ex­plique…


2 réponses à “Rempla­cer du texte par une image en CSS”

    • Content est supporté mais sauf erreur uniquement sur les pseudo éléments, donc pas pour remplacer un contenu.

      Le musée des horreurs est mon premier lien, mais toutes les techniques ont leur défaut et toutes sont quand même des bidouilles

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée.