Ire Aderinokun a brisé un mythe il y a quelques jours à propos des pseudos-éléments sur la balise img.
On récapitule, pour ceux du fond
Lʼélément img est ce quʼon appelle un élément remplacé. Je vous conseille à ce propos la lecture de « Qu’est-ce qu’un élément remplacé ? », traduction en français sur La Cascade de « What The Heck Is A Replaced Element? » écrit par Dudley Storey.
Cela signifie que la balise nʼest fonctionnelle que si le contenu qui est censé le remplacer est présent. Pour la plupart des éléments remplacés, ça a peu dʼincidence puisque cʼest le système qui sʼen charge — cʼest notamment le cas des éléments de formulaire tels que input, textarea ou select.
En revanche dʼautres éléments ont besoin quʼon leur dise par quoi ils vont être remplacés, et le système nʼintervient pas. Cʼest donc le cas des img. Ainsi, si malencontreusement la source est introuvable, lʼélément nʼest pas remplacé et peut alors supporter les pseudos-éléments. Voilà, vous savez tout.
Le test de la source manquante dans a11y.css
Comble de lʼironie, ça fait bientôt deux ans que jʼapplique un test dans a11y.css pour vérifier que la source est mentionnée.[1]
Mais alors, se pourrait-il que cette astuce fonctionne également sur ce type de champ ? Et bien oui. Je vous ai préparé un codePen de démonstration avec le champ de type image.
Ce nʼest pas une révolution — et globalement personne ne sʼen servira — mais allez savoir.
Notons tout de même que si la technique est amusante, vous ne devriez jamais avoir à vous en servir et vous assurer systématiquement que vos images sont bien là. Les alternatives sont primordiales, mais si vous nʼavez pas dʼimage à afficher, mettez du texte 🙂
Impossible de vérifier, lorsque la source est présente, quʼelle est bel et bien valide. Dommage. ↩︎