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 ergebnis
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.
Browser-Support des Pseudo-Elements “attr”
Weitere Beispiel-Formatierungen und eine ausführlichere Erklärung findest du im Beitrag Broken Image Elemente Grafisch verbessern auf Codepalm.
Das könnte dich auch interessieren
-
Sicherer E-Mail Versand aus Lexware via OAuth2 – So richtest du Microsoft 365 in Lexware ein
Diese Anleitung zeigt Schritt für Schritt, wie der Versand aus Lexware über Microsoft 365 sicher und komfortabel bleibt. Warum die Umstellung wichtig ist, wie die Einrichtung funktioniert und wie du mit der BCC-Funktion alle Mails archivieren kannst – das alles erfährst du hier übersichtlich und praxisnah.
-
Hubspot ohne Google Fonts verwenden
Im Januar 2021 hat das LG München ein Urteil bezüglich der Verwendung von Google Fonts auf Websites gefällt und somit generell die Möglichkeit eingeräumt, Schadenersatz für die Verwendung von Google Fonts zu fordern. Wie man dennoch die Google Fonts DSGVO-konform verwenden kann, erfährt du hier.
-
symfony CLI 5.3 App in ein PHAR packen
Portables PHAR stellt bestimmte Anforderungen an eine App. Eine CLI App eignet sich hervorragend, um wiederkehrende Probleme der Software-Entwicklung nachhaltig zu lösen. Die Stolperfallen einer Standard-CLI in ein PHAR zu packen sind vielfältig. So geht’s bei Symfony 5.3
