Ratgeber: "HTML, CSS, Javascript & PHP"

Rendering-Fehler, Diagonale Sprites und mehr in CSS

23.7.2012 von Anna Kobylinska und Filipe Pereira Martins

Wir zeigen Ihnen unter anderen wie Sie in CSS Rendering-Fehler vermeiden und mir diagonalen Sprites umgehen.

ca. 2:10 Min
Ratgeber
Rendering-Fehler und Diagonale Sprites in CSS
Rendering-Fehler und Diagonale Sprites in CSS
© Internet Magazin

Beim Einsatz der Eigenschaft border-left im Zusammenhang mit der Eigenschaft -webkit-border-radius tritt in einigen Versionen von Safari, darunter in der Version 5.05, ein recht unschöner Rendering-Fehler auf: Der vertikale linke Rand erstreckt sich nur über die gerade Kontur des Kastens hinaus und bricht auf der Höhe, wo jeweils die abgerundeten Ecken beginnen, plötzlich weg. Dieser Code veranschaulicht das Problem:

.Kasten {
height:100px;
width:100px;
background: #ddd;
-moz-border-radius:10px;
-webkit-border-radius:10px;
border-radius:10px;
border-left: 20px;
border-color:#000;
border-style:solid;}

im Zusammenhang mit diesem Markup:

<div class="boxWithLeftBorder">Problematisch in Safari
5.05</div>

Der Fehler tritt ansonsten weder in Firefox noch in Chrome auf und wurde inzwischen von Apple behoben. Um den Fehler in Safari 5.05 zu eliminieren, genügt etwa

.Kasten {
background: #ddd;
border: 3px solid #000;
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
height: 100px;
position: relative;
width: 100px;
padding: 0;
}
.Kasten:before {
background-color: #c00;
border-bottom-left-radius: 5px;
border-top-left-radius: 5px;
-moz-border-radius-bottomleft: 5px;
-moz-border-radius-topleft: 5px;
-webkit-border-bottom-left-radius: 5px;
-webkit-border-top-left-radius: 5px;
content: "";
display: block;
float: left;
height: 100%;
width: 20px;
}

CSS: Diagonale Sprites

HTML-Elemente, die in einer der zwei Dimensionen eine vorab nicht bekannte Größe aufweisen, können trotzdem auf Sprites aufbauen. Die Lösung: Erstellen Sie ein diagonales Sprite, also ein Bild, in dem die einzelnen Teilabbildungen diagonal zueinander angeordnet sind. Die geringfügig höhere Dateigröße gegenüber einem konventionellen Sprite (also einem Sprite mit direkt benachbarten Bildern) fällt kaum ins Gewicht und Sie können sich - genau wie bei einem konventionellen Sprite - die Vorzüge von Sprites zu Nutze machen.Bezüglich der Sichtbarkeit unerwünschter Bildelemente brauchen Sie sich keine Sorgen zu machen: Sogar wenn sich das betreffende HTML-Element erweitern sollte, werden die anderen Abschnitte des Sprites nicht sichtbar werden, solange sich dieses Wachstum auf genau eine Dimension (entweder horizontal oder vertikal) beschränken lässt.

CSS, IE7: input-Elemente mit Hintergrundbild

Wer einem input-Element - sei es zur Dekoration oder zur Information - ein Hintergrundbild zuweisen möchte, sei gewarnt: Hintergrundbilder bei input-Elementen im Internet Explorer 7 behalten ihre Position nicht bei, sondern wandern während der Eingabe von Stelle zu Stelle. Um das Problem zu umschiffen, schließen Sie das betreffende input-Element in einem übergeordneten Container ein und weisen das zugehörige Hintergrundbild eben diesem übergeordneten Element zu.Außerdem sei Ihnen empfohlen, beim Einsatz von Sprites bei input-Elementen besonders großzügig bemessene Abstände zu definieren und sicherheitshalber potenziell problematisch gesetzte Werte typischer CSS-Eigenschaften ganz am Anfang mit einem Reset-Stylesheet zurückzusetzen. Dadurch vermeiden Sie unschöne Überraschungen.

CSS, Javascript: Minifizieren und Gzippen

Wer sein CSS und Javascript leistungsoptimiert abliefern möchte, ohne sich mit der Aufgabe zu lange zu befassen, sollte einen Blick auf ZBugs werfen. Damit können Sie Ihren CSS- und Javascript-Code im Blitztempo minifizieren und zippen (sofern die Dateien lokal eingebunden sind). Der Dienst ist derzeit noch in der Betaphase und dürfte im Laufe der Zeit noch besser werden, aber er funktioniert bereits und ist einen Versuch auf jeden Fall wert. Bei demselben Anbieter können Sie im Übrigen auch gleich eine XML-Sitemap bauen, um sie den Suchmaschinen anzuliefern.

Mehr lesen

Chronologische Liste und Netflix-Links

Marvel-Filme- und -Serien: Das ist die richtige Reihenfolge

Neuerscheinungen in der Übersicht

Netflix: Neue Filme und Serien

Vorschau auf Film- und Serien-Highlights

Amazon Prime Video: Neuheiten

Weiter zur Startseite  

Mehr zum Thema

internet, webdesign, adobe,  Illustrator, CS6

Webdesign

Webdesign in Adobe Illustrator CS6

Adobe Illustrator wird im Webdesign immer beliebter. Wie Sie das Tool richtig einsetzen, erfahren Sie hier.

Facebook stellte die neue Suche

Facebook

Facebooks Social Graph Search

Was sind die Implikationen für Unternehmen und Endanwender bei Facebooks neuer Suche Graph Search?

Der BGH erklärt das Internet zur Lebensgrundlage.

Online-Recht

Darauf müssen Sie bei den AGB achten

Allgemeine Geschäftsbedingungen liest sich niemand gerne durch. Sie sind jedoch notwendig und äußerst sinnvoll. Worauf sie achten sollten.

Online-Urheberrecht: Unser Ratgeber bietet Tipps für das Cloud-Recht.

Online-Recht in der Cloud

Wie sieht das Urheberrecht in der Wolke aus?

Dateien werden immer häufiger in der Cloud bereitgestellt. Rechtlich ist das jedoch durchaus problematisch. Wir klären über das Urheberrecht in der…

Logistik im E-Commerce: Prozesse rund um die Logistik.

E-Commerce-Logistik

Logistik im E-Commerce

Für den Erfolg eines Online-Shops sind zahlreiche Faktoren verantwortlich. Neben Produktvielfalt und Darstellung der Waren gehört auch die Logistik.