Rendering-Fehler, Diagonale Sprites und mehr 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:

im Zusammenhang mit diesem Markup:

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

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.