Ratgeber: "HTML, CSS, Javascript & PHP"

Rendering-Fehler, Diagonale Sprites und mehr in CSS

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

Rendering-Fehler und Diagonale Sprites in CSS

© Internet Magazin

Rendering-Fehler und Diagonale Sprites in CSS

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 zum Thema

Youtube Sperre umgehen GEMA
Videos freischalten

So umgehen Sie die GEMA-Sperre bei Youtube. Was Sie dazu brauchen, und wie es am einfachsten geht.
Neue Fritzboxen unterstützen den AC-Standard.
WLAN-Geschwindigkeit verdoppeln

Mehr WLAN-Geschwindigkeit: Mit dem WLAN-Standard 802.11ac und den richtigen Geräten und Einstellungen verdoppeln Sie den Datendurchsatz.
Netflix auf dem TV
Programm in der Übersicht

Welche Filme und Serien gibt es bei Netflix eigentlich zu sehen? Was ist neu im Streaming-Angebot? Diese Antworten helfen weiter.
Netflix
Streaming

Preise, kompatible Geräte, Datenrate, Serien- und Filmangebot von Netflix: Wir beantworten die wichtigsten Fragen rund um den Streaming-Dienst.
E.T. – Der Außerirdische
Vorschau auf Film- und Serien-Highlights

Amazon Prime Instant Video lockt im Dezember 2016 mit Film-Highlights wie "E.T.", "Fast & Furious 7" und der Serie "Ku’damm 56​".