Broken Image Elemente grafisch verbessern

Broken Image Elemente grafisch verbessern

 

CSS-Tipp zur grafischen Optimierung von Broken Image Elemente

 

√úber den Geschmack zu manchen Standard-Designs in Browsern kann man wirklich streiten. Die Scroll-Bar, Tabellen, Radio-Buttons und Dropdowns sind nur wenige Elemente, die viele Designer in den Wahnsinn treiben.

Zum Gl√ľck k√∂nnen alle Elemente vom Webdesigner mit ein paar Kniffen und Drehungen bearbeitet werden.

Eines dieser weniger sch√∂nen Elemente sind Broken Images, die an den ung√ľnstigsten Stellen auftauchen, wo eigentlich ein sch√∂nes, semantisch passendes Bild erscheinen sollte, das den Inhalt auf der Webseite visuell vielleicht nicht unterstreicht, aber die Webseite zumindest nicht Defekt erscheinen l√§sst.

Ein Broken Image kommt dann zustande, wenn der Redakteur oder Entwickler einen fehlerhaften Pfad zum Bild angibt, oder wenn das Bild aus verschiedenen Gr√ľnden nicht vom Server geladen werden kann.

Damit die Ausgabe nicht nur ein 16x16 Pixel gro√ües Icon darstellt (wenn √ľberhaupt), sondern ein Element, das das Webseiten-Design grafisch bewahrt, gibt es eine Reihe von Methoden die Du als Entwickler zur Webseite hinzuf√ľgen kannst.

Eine Performance-starke Variante ist die Verwendung von CSS, die Du in den <head>-Bereich Deiner Seite integrierst. In meinem Beispiel unterscheide ich zwischen notwendigen und optionalen Formatierungen.

Alle optionalen Formatierungen kannst Du nach belieben anpassen. Das sind zum Beispiel der Hintergrund, die Rahmenlinie und ein Textfeld, das auf diesen "Broken Image"-Block gesetzt wird.

 

Notwendige Formatierungen

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

 

Optionale Formatierungen

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

 

Das Ergebnis sollte nun so aussehen:

Broken Image - Alternative 1

 

F√ľr die Klammer in der Textbox kannst Du den Zeichen-Code von FontAwesome verwenden. Alternativ kannst Du Dir in der Icon-Bibliothek von FontAwesome ein anderes Icon aussuchen.

Seit einiger Zeit gibt es √ľber 800 Emojis und Icons in der ASCII-Codierung. Diese Sonderzeichen kannst Du auch ganz einfach kopieren und in den Content des CSS einf√ľgen. Es ist m√∂glich, dass das Icon nicht in Deinem Text-Editor erscheint. √Ąltere Rechner, die schon seit langem kein Update mehr erfahren haben k√∂nnen die ASCII-Icons ebenfalls nicht darstellen.

Wir verwenden in der grafischen Ausgabe des Broken Images das CSS-Pseudo-Element "attr(alt)", um das HTML title-Attribut wiederzuverwenden. Dadurch kann der Benutzer wenigstens erkennen, was hier dargestellt werden sollte.

Wenn du Bedenken zum Pseudo-Elements bez√ľglich der Browser-Kompatibilit√§t haben solltest kann ich Dich beruhigen. Das Element wird sogar teilweise in Internet Explorer 8 unterst√ľtzt.

 

Browser Support des Pseudo-Elements 'attr'

 

 

Du hast nat√ľrlich freie Wahl, wie Du diese Box gestalten m√∂chtest. Es ist auch m√∂glich ein Hintergrundbild f√ľr die Broken Images zu setzen. Bei dieser Variante solltest Du aber sicherstellen, dass das gew√§hlte Hintergrundbild immer aufrufbar ist.

Zudem kannst Du eine andere Schriftart, Schriftgr√∂√üe, Farbe, Rahmenlinie oder sogar eine halbtransparente Farbfl√§che √ľber das Hintergrundbild setzen. Eine halbtransparente Fl√§che setze ich immer sehr gerne bei Elementen auf der Schrift liegt, um den Text erkenntlicher zu aufzubereiten.

 

Eine Variante der optionalen Formatierung

img.bg:before {
    background-image: url( 'background.jpg' );
    background-size: cover;
    border: 2px solid rgb(0,0,0);
    border-radius: 3px;
}
img.bg:after {
    padding: 10px 0;
    background-color: rgba(0,0,0,.5);
    border-radius: 3px;
    content: "\f127   Fehlerhaftes Bild '" attr(alt) "'";
    display: block;
    font-size: 16px;
    font-style: normal;
    font-family: FontAwesome,Arial,sans-serif;
    color: rgb(255,255,255);
    text-align: center;
}

Hier kannst du das Ergebnis der alternativen Formatierung betrachten:

Broken Image - Alternative 2
 

Codepalm
Broken Image Elemente grafisch verbessern

Abonniere die Fanpage von Codepalm und verpasse keine Beiträge mehr

Codepalm auf Facebook
 
 
 
 
Das könnte Dir gefallen:

Razer Electra V2

EUR 69,99

Zu Amazon Mehr erfahren

Sharkoon T9 Value Red

EUR 73,36

Zu Amazon Mehr erfahren

Einstieg in C# mit Visual Studio 2017

EUR 29,90

Zu Amazon Mehr erfahren

Kommentare

Sei der Erste, der einen Kommentar erstellt!

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.