Se préoccuper de choses qui peuvent sembler inutiles est un jeu auquel je me prête de plus en plus. Bien évidemment, je n’envisage ni reconnaissance internationale, ni journal télévisé mais après tout, ça occupe le temps devient vite très intéressant.
Cette fois ci, je me suis arrêté quelques instants sur la gestion des images “cassées”. Une fonctionnalité fixe, qui n’a pas pour but d’évoluer dans le temps et qui ne devrait pas poser de problèmes. Mais en y regardant de plus près, la chose n’est pas si simple et les mauvais élèves ne sont pas toujours ceux qu’on croit.
Voici la base de mon exemple :
<!doctype html>
<html>
<head>
<meta charset="utf-8" >
<title>broken-image</title>
<style type="text/css">
img
{
margin: 0 20px 0 0;
vertical-align: top;
}
img.is-last { margin-right: 0; }
img
{
margin: 3px;
padding: 3px;
}
</style>
</head>
<body>
<img src="defined.jpg" alt="My beautiful image" />
<img src="undefined.jpg" />
<img src="undefined.jpg" alt="2 : My beautiful image is broken" />
<img src="undefined.jpg" alt="3 : My beautiful image is broken" width="200" />
<img src="undefined.jpg" alt="3 : My beautiful image is broken" width="200" height="200" class="is-last" />
</body>
</html>Jugez par vous même des résultats dégâts : broken-image.html ou plus généralement browsers-table.html
Firefox WTF
Il y a des fois, et il faut le dire, Internet Explorer gère plutôt bien, même mieux les situations (des fois). Dans notre cas, seul Firefox pose un réel problème. Et heureusement car il est aussi le seul à offrir une solution :
/*
* @doc: https://developer.mozilla.org/en/CSS/-moz-force-broken-image-icon
*/
-moz-force-broken-image-icon: <integer>;Je souligne honteusement que sans cette propriété, une image cassée n’occupe même pas sa largeur même si elle a été définie avec l’attribut “width”. Quoi qu’il arrive, seule, cette propriété n’est pas une solution satisfaisante : -moz-broken-image.html.
La solution ?
Que faut-il alors pour satisfaire ce caprice ? Une largeur et une hauteur définie par leur attribut sur toutes les balises image ? Pourquoi pas. Après tout c’est le critère 159 de la Checklist Opquast V2 et ajouter deux attributs n’a jamais tué personne ou alors j’ai raté un truc.
Sauf que malheureusement, nous ne maitrisons pas toujours toutes les cartes (prestataire, CMS, développeur) et que nous avons pas rarement le choix, il faut s’adapter.
Voici la solution que je vous propose :
img:-moz-any(:-moz-broken, :-moz-user-disabled)
{
-moz-force-broken-image-icon: 1;
}
img:-moz-any(:-moz-broken, :-moz-user-disabled):not([width]),
img:-moz-any(:-moz-broken, :-moz-user-disabled):not([height]),
img:-moz-any(:-moz-broken, :-moz-user-disabled)[width=""],
img:-moz-any(:-moz-broken, :-moz-user-disabled)[height=""]
{
display: inline-block;
-moz-force-broken-image-icon: 0 !important;
}
img:-moz-any(:-moz-broken, :-moz-user-disabled)::before
{
position: relative;
display: inline-block;
border: 1px inset;
padding: 3px 3px 3px 22px;
background: url(broken-image.png) 3px 3px no-repeat;
}
img:-moz-any(:-moz-broken, :-moz-user-disabled):not([alt])::before,
img:-moz-any(:-moz-broken, :-moz-user-disabled)[alt=""]::before
{
height: 16px;
padding-right: 0 !important;
}Le résultat est intéressant : broken-image.bricks.html. Toutefois, je mets un bémol à son utilisation. Cette représentation (ou correction) est très personnelle et n’est peut être pas celle attendue par l’équipe de Mozilla. Mais aussi car elle utilise de nombreuses propriétés préfixées qui peuvent disparaitre ou/et fonctionner différemment d’une version à l’autre.
Concernant l’image 
utiliser proposer par Firefox, elle se trouve normalement ici :
jar:file:///C:/Program%20Files/Mozilla%20Firefox/omni.ja!/chrome/toolkit/res/broken-image.pngUn mot pour la route
Retrouvez à tous moments le bug 58646 reporté le 31/10/2000 sur bugzilla.mozilla.org