Broken Images mit Styles besser formatieren

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 dir 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 auskennen.

Notwendige CSS Formatierungen für die Broken Image Elemente

Die notwendigen Formatierungen kannst du in deine globale CSS-Datei hinterlegen.

Sollte deine Webseite noch keine anderen Formatierungen für die Broken Images beinhalten, sollte es keine Rolle spielen, an welche Stelle du diese Formatierungen platzierst. Andernfalls empfehlen wir diese Formatierungen als eines der letzten Elemente zu laden. Du solltest auch darauf achten, dass zu viele CSS-Regeln eines Elements die Website-Performance spürbar reduzieren können.

Vorhandene Formatierungen für diese Elemente können von ihrem Webseiten-Template oder einem Plugin stammen. Diese solltest du im besten Fall entfernen, oder die neuen Elemente mit einer höheren Kaskade ausstatten.

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

Die editierbaren Formatierungen können nach belieben bearbeitet werden, um die Broken Image Elemente an den Stil deiner Webseite anzupassen.

In diesen Formatierungen können Icons mit Font Awesome, Farben und Rahmen hinzugefügt werden. Wir verwenden auch sehr gerne ein Hintergrundbild, dass zur Webseite passt.

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

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 machen, können wir dich beruhigen. Bei einer kurzen Suche auf CanIUse.com wirst du feststellen, dass alle gängigen Browser mit diesem Pseudo-Element umgehen können.