Peter Kröner, Webdesigner & Frontendentwickler - Weblog und Portfolio von Peter Kröner, einem Webdesigner und Frontendentwickler aus Westerkappeln bei Osnabrück.

Ich habe ja eigentlich dem IE6 abgeschworen und halte das bisher auch gegen erbitterten Widerstand von allen möglichen Seiten durch, aber dieser eine Hack ist einfach zu genial um ihn nicht zu bloggen. Für mich ist er eine unterhaltsame Kuriosität, aber vielleicht hilft es ja dem einen oder anderen noch-IE6-Unterstützer auch mal wirklich – insbesondere wenn besagte IE6-Unterstützer HTML5 verwenden wollen.

HTML5 belebt, wie wir alle wissen, das <hr>-Element wieder. Es dient nicht mehr horizontaler Trennstrich, sondern markiert thematische Umbrüche in Texten – für Szenenwechsel innerhalb eines Kapitels in einer Geschichte zum Beispiel. Diese neue Rolle ändert freilich nichts daran, dass Browser das Element immer noch als horizontalen Strich anzeigen, was in den neueren Versionen aller Browser auch kein Problem darstellt. Entweder will man das <hr>-Element gar nicht mehr sehen und schafft es mit display:none; aus der sichtbaren Welt oder man entfernt seinen Rahmen mit border:none;. Das ist besonders dann sinnvoll, wenn man es als Container für ein dekoratives Hintergrundbild einsetzen möchte, ähnlich wie die Trenner mit Zweig in meinem Blogdesign. Das Problem: Da macht der IE6 nicht mit, border:none; bewirkt in ihm bei <hr>-Elementen rein gar nichts.

Wenn der Hintergrund einfarbig ist, lässt sich das Problem dadurch lösen, dass man im IE6 color für die <hr> auf den Wert der Hintergrundfarbe setzt, denn im IE6 ist offenbar border-color nicht für Rahmenfarben zuständig. Wenn man allerdings keinen einfarbigen Hintergrund hat, nützt das freilich nichts mehr. Also macht man das Folgende:

hr {
	display: list-item;
	list-style: url(hintergrund.png) inside;
	height: 48px;
	filter: alpha(opacity=0);
}

Ja, der IE6 unterstützt display:list-item; und list-style die man durch kreativen Mißbrauch ganz wunderbar instrumentalisieren kann. Einfach das Hintergrundbild als Bulletpoint einsetzen und das ganze Element via Alpha-Filter unsichtbar machen. Liegt ja auch ganz nahe, sowas. Respekt an den Autoren dieses Hacks, dessen Blogpost ich beim googlen zu einem ganz anderen Thema gefunden habe.

Eine Frage, die mich in letzter Zeit öfter mal via E-Mail und Blog-Kommentar erreicht hat, ist die nach dem Sinn der browserspezifischen CSS-Präfixe wie bei -moz-box-shadow und -webkit-border-radius. Die Antwort auf die Frage wieso bauen die das nicht gleich richtig ein? ist recht einfach: Die CSS-Eigenschaften sind in 90% aller Fälle Work-In-Progress-Varianten der richtigen CSS3-Eigenschaften. Der CSS2.1-Standard schreibt vor: wenn etwas zwar teilweise, aber nicht vollständig implementiert ist, soll man als verantwortungsvoller Browsermacher das Prefix davorkleben um anzuzeigen: das ist noch nicht die richtige Implementierung, sondern (erst mal) nur unsere Implementierung.

Besonders anschaulich wird das am Beispiel von border-top-left-radius. Bei Webkit-Browsern rundet man die obere linke Ecke einer Box wie folgt ab:

-webkit-border-top-left-radius:10px;

Bei Firefox geht das hingegen wie folgt:

-moz-border-radius-topleft:10px;

Da ist nicht nur das Präfix unterschiedlich, sondern gleich der ganze Name der CSS-Eigenschaft – da steht also noch einige Arbeit für Webkit- und Gecko-Entwickler an. Aber sobald die Implementierung standardkonform umgesetzt ist, fliegt das Präfix raus. So ist es jüngst beim Firefox 3.5 geschehen, wo man schon vor einiger Zeit opacity korrekt umgesetzt hatte und dafür nun das alte -moz-opacity rausgeworfen hat.

Die restlichen 10% der CSS-Präfixe entfallen auf echte proprietäre CSS-Eigenschaften wie das -ms-filter des IE8. Mehr Infos zu CSS-Präfixen bzw. vendor specific CSS extensions gibt es in diesem feinen Artikel nebst weiterführenden Links von Bobby van der Sluis (via Guymon).

Ein Design wie das meines Blogs sind praktisch kaum mit flexibler Breite umtzusetzen. Die diversen Schatteneffekte würden es nötig machen, an allen Kanten und Ecken von Boxen mehrere Einzelgrafiken einzusetzen – das geht, ist aber mühsam, unwartbar und schadet der Performance. Eine Lösung hierfür kündigt sich mit der CSS3-Eigenschaft box-shadow an. Die Vorstellung dieses feinen Stücks CSS-Technik ist ein neuer Teil für die Serie schönes neues CSS, deren andere Teile ich an dieser Stelle auch nochmal empfehlen möchte:

• Textschatten mit CSS
• Alternative Farbangaben
• Über font-size-adjust
• Der General Sibling Combinator
• Die Appearance-Eigenschaft
• CSS-Transforms
• Die Rückkehr der Tabellen
• Box-sizing

Kompletten Artikel lesen

In meinen Beitrag über Teiltransparente Hintergrundfarben in allen Browsern (fast) ohne PNG-Dateien stellte ich ja abschließend die Frage, ob sich der ganze Aufwand mit den Base64-codierten PNGs und dem IE-Filter und all dem überhaupt lohnen würde. Die Antwort auf diese Frage hat Blogleser Tim mit seinem CSS Generator gegeben. Dort gibt man eine Farbe und einen Alpha-Wert ein (z.B. #FF0000 und 0.5) und erhält einbaufertigen CSS-Code im Sinne meines Artikels:

background: transparent url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR4nGP4z8BQBwAEfwF+XBmVOwAAAABJRU5ErkJggg==') repeat;
*filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#7fff0000, endColorstr=#7fff0000) /* won't validate, CSS hack */ /* A method for alpha color backgrounds, see http://tinyurl.com/ly6rj2 */;

Finde ich gut, das Ding. Zwar rüstet sich demnächst Opera 10 auch mit RGBa und HSLa aus, aber dann ist ja immer noch die IE-Familie da, um solche Tricksereien nötig zu machen. Wäre ja auch sonst langweilig.

Blogleser Tim hatte mir den Generator schon letzte Woche gemailt, wobei ich es allerdings geschafft habe, die Mail aus irgendwelchen Gründen völlig zu ignorieren. Sorry Tim!