Styler les images non affichées

Aaah, les images qui ne s'affichent pas... une petite icône misérable à la place et notre texte alternatif tout penaud... Mais avec l'incroyable Ire Aderinokun tout cela est du passé!

Par

Les images qui ne s’affichent pas, quelle horreur...

Cette image ne s’affiche pas ! Vraiment moche, pas vrai ?

Pourtant, elles ne sont pas condamnées à le rester. Nous pouvons utiliser CSS pour appliquer des styles à l’élément <img> afin de fournir une meilleure expérience à nos utilisateurs que celles qu’ils connaissent par défaut.

Deux faits à propos de l’élément img

Pour comprendre comment nous pouvons styler les images qui ne s’affichent pas, il y a deux faits importants à comprendre sur le comportement de l’élément <img>.

  1. Nous pouvons appliquer à l’élément <img> les styles utilisés pour la typographie. Ces styles seront appliqués au texte alternatif, s’il est affiché, et n’affecteront pas l’image si elle s’affiche normalement.
  2. L’élément <img> est un élément remplacé. C’est un élément “dont l’apparence et les dimensions sont définies par une source extérieure” (Sitepoint). L’élément étant contrôlé par une source extérieure, les pseudo-éléments :before et :after ne peuvent pas fonctionner avec <img>. Cependant, lorsqu’une image ne s’affiche pas, et donc n’est pas chargée, ces pseudo-éléments peuvent apparaître.

Connaissant ces deux points, nous sommes capables d’appliquer des styles à l’élément <img> qui apparaîtront uniquement lorsque le lien de l’image est corrompu, ces styles n’affectant pas l’image lorsque le lien fonctionne.

Application pratique

Voici quelques exemples d’applications de styles à des images ne s’affichant pas. Le HTML initial est le suivant :

<img src="http://bitsofco.de/broken.jpg" alt="Kanye Laughing">  

Ajoutons quelques informations utiles

Une façon de gérer les images ne s’affichant pas consiste à fournir un message indiquant à l’utilisateur que le lien est corrompu. Nous pouvons le faire avec les pseudo-éléments, et grâce à l’expression attr() nous pouvons même ajouter le lien vers l’image.

texte alternatif, message spécifique et lien vers l’image sont affichés.
img {  
  font-family: ’Helvetica’;
  font-weight: 300;
  line-height: 2;  
  text-align: center;

  width: 100%;
  height: auto;
  display: block;
  position: relative;
}

img:before {  
  content: "We’re sorry, the image below is broken :(";
  display: block;
  margin-bottom: 10px;
}

img:after {  
  content: "(url: " attr(src) ")";
  display: block;
  font-size: 12px;
}

Remplacer le texte alternatif par défaut

Une alternative possible est d’utiliser les pseudo-éléments pour remplacer le texte alternatif affiché par défaut, en positionnant le pseudo-élément par-dessus le texte par défaut pour le cacher.

img { /* Comme dans le premier exemple */ }

img:after {  
  content: "\f1c5" " " attr(alt);

  font-size: 16px;
  font-family: FontAwesome;
  color: rgb(100, 100, 100);

  display: block;
  position: absolute;
  z-index: 2;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #fff;
}

Style additionnel

En plus (ou au lieu) d’afficher un message personnalisé, nous pouvons utiliser les pseudo-éléments pour appliquer d’autres styles à l’image non affichée.

img {  
  /* Comme dans le premier exemple */
  min-height: 50px;
}

img:before {  
  content: " ";
  display: block;

  position: absolute;
  top: -10px;
  left: 0;
  height: calc(100% + 10px);
  width: 100%;
  background-color: rgb(230, 230, 230);
  border: 2px dotted rgb(200, 200, 200);
  border-radius: 5px;
}

img:after {  
  content: "\f127" " Broken Image of " attr(alt);
  display: block;
  font-size: 16px;
  font-style: normal;
  font-family: FontAwesome;
  color: rgb(100, 100, 100);

  position: absolute;
  top: 5px;
  left: 0;
  width: 100%;
  text-align: center;
}

Si l’image s’affiche correctement, avec les mêmes styles appliqués à l’élément, l’image s’affiche normalement. Les pseudo-éléments ne sont pas générés.

Kanye West laughing
Kanye West riant.

Compatibilité navigateurs

Malheureusement, les navigateurs ne gèrent pas tous de la même manière les images non affichées. Pour certains, même quand l’image ne s’affiche pas, le pseudo-élément n’apparaît pas non plus.

Voici les résultats de mes tests.

BrowserAlt Text:before:after
Chrome (Desktop and Android)
Firefox (Desktop and Android)
Opera (Desktop)
Opera Mini✓ **
Safari (Desktop and iOS)✓ *
iOS Webview (Chrome, Firefox, others)✓ *

* Le texte alternatif s’affichera seulement si la largeur de l’image est suffisante pour le contenir. Si aucune largeur n’est spécifiée pour l’image, le texte alternatif pourrait ne pas être affiché du tout.
** Style typo ne s’applique pas.

Pour les navigateurs qui ne supportent pas les pseudo-éléments, les styles appliqués sont tout simplement ignorés, par conséquent ils n’ont pas d’effet négatif. Cela signifie que nous pouvons appliquer les styles sans souci afin d’offrir une meilleure expérience à nos utilisateurs sur les navigateurs compatibles.


Intéressé par CSS ? Retrouvez une liste des meilleurs articles et ressources du web.

Tous les articles sur CSS parus dans la Cascade.

Du même auteur, dans la Cascade :

Comment fonctionne CSS float
Comment fonctionne z-index
Contrôler le modèle de boîte
Cacher des éléments avec CSS
Styler les images non affichées
Sur :not et la spécificité
CSS Grid et le Saint Graal
CSS Initial, Inherit, Unset et Revert

Articles sur les mêmes thèmes dans la Cascade :

Qu’est-ce qu’un élément remplacé ?
Les pseudo-éléments :before et :after
Combinateurs et pseudo-classes CSS


Article original paru le 8 mars 2016 dans Bits of Code.

Sur l’auteur : est UI Designer et Front-End Developer à Lagos, au Nigéria. Son blog Bits of Code s’adresse aux développeurs autodidactes comme elle, elle y explore la théorie cachée derrière les morceaux de code que nous écrivons, afin de mieux comprendre le développement web. On peut la suivre sur Twitter ou sur Github.

Traduit avec l’aimable autorisation de Bits of Code et de l’auteur.
Copyright Bits of Code © 2016.