Browser haben schon seit Jahren in vielen Fällen einen eher schlechten Geschmack in Standard-Formatierungen bewiesen. Eines dieser grafischen Fehlentscheidungen von Chrome und Co. sind Bilder, die nicht gefunden werden können. Nicht nur, dass die Darstellung der „Broken Images“ den Fauxpas des Redakteurs grafisch Darstellt. Das kleine Bildchen kann es sogar schaffen, dass das hart erarbeitete CSS-Gerüst des Web-Entwicklers jeden Designer Tränen in die Augen treibt, wenn sich Elemente plötzlich anders anordnen als gewollt. Wir haben einen genialen CSS-Trick für Deine Webseite vorbereitet, den Du verwenden kannst um „Broken Images“ elegant auszugeben.
Wir unterscheiden bei der CSS-Formatierung zwischen Notwendige und Editierbare Formatierungen. Die editierbaren Formatierungen kannst Du nach belieben gestalten, wenn Du Dich ein wenig mit CSS auskennst.

Notwendige Formatierungen

img {
    min-height: 50px;
    position: relative;
}
img:before {
    content: " ";
    display: block;
    position: absolute;
    top: -10px; 
    left: 0;
    height: calc(100% + 10px);
    width: 100%;
}
img:after {
    position: absolute;
    top: 5px;
    left: 0px;
    width: 100%;
}

Editierbare Formatierungen

img:before {
    background-color: rgb(230,230,230);
    border: 2px dotted rgb(200,200,200);
    border-radius: 3px;
}
img:after {
    display: block;
    content: "\f127" " Broken Image of " attr(alt);
    display: block;
    font-size: 16px;
    font-style: normal;
    font-family: FontAwesome;
    color: rgb(100,100,100);
    text-align: center;
}

Das Endergebnis

broken image
Um die Klammer in diesem Element zu verwenden benötigst Du Font Awesome, das in wenigen Schritten auf Deiner Webseite eingebunden werden kann. In der Symbol-Bibliothek kannst Du Dir neben der Klammer ein anderes Icon für die Darstellung im Container aussuchen. Eine Alternative bieten ASCII-Symbole, die auf jedem Modernem Rechner bereits installiert sind. Eine kurze Google-Suche nach „ASCII Symbole“ sollte Dir helfen Dein gewünschtes Symbol im ASCII-Format zu finden.
In unserem Beispiel der Editierbaren Formatierungen findest Du ein Attribut „attr(alt)“. Dieses Pseudo-Element verwenden wir um das Alt-Attribut des Bildes grafisch in unseren Container zu setzen. Falls Du Dir Sorgen wegen der Verfügbarkeit auf verschiedenen Geräten machst, kann ich Dich beruhigen. Bei einer kurzen Suche auf CanIUse.com wirst Du feststellen, dass alle gängigen Browser mit diesem Pseudo-Element umgehen können.

Browser-Support des Pseudo-Elements "attr"