css-café

Pfad: Home / CSS-Artikel / W3C | -moz | -webkit

Mittlerweile warten wir seit einigen Jahren auf die endgültige (W3C-)Fassung der CSS3-Spezifikation. Viele Browserhersteller haben sich daher entschieden, die angekündigten Neuerungen bereits zu implementieren – jeder auf seine Art.

Die korrekte Vorgehensweise sieht vor, solche Anweisungen mit einem Hersteller-spezifischen Kürzel einzuleiten (zum Beispiel -moz-). So wird gewährleistet, dass in der finalen Version geänderte Regeln keine Seiten zerstören, die bereits Hersteller-spezifische Anweisungen nutzen. Browserhersteller können bereits mit neuen CSS-Eigenschaften experimentieren, während Web-Entwickler ihre Auswirkungen testen und Feedback liefern können.

Das ist ein ganz normaler Vorgang während der Softwareentwicklung und kein Problem, solange man sich jederzeit darüber klar ist, dass so ausgezeichnete Anweisungen immer nur einen bestimmten Browser (bzw. eine Browser-Familie) ansprechen.

Mittlerweile haben sich allerhand Hersteller-Kürzel etabliert, hauptsächlich genutzt werden natürlich die für marktführende Browser bestimmten:
-moz- für Gecko-basierte Browser wie Firefox oder Seamonkey,
-webkit- für Webkit-basierte Browser wie Safari, iCab, Konqueror, Google Chrome.

Eine Liste weiterer Kürzel finden Sie am Ende dieses Artikels.

Betrachten wir die Möglichkeiten an einem Beispiel, den sehr beliebten „Runden Ecken”, die in CSS3 vorgesehen sind, um dem Entwickler die Quälerei mit vielen Grafikschnipseln, ausufernden Quellcode-Blähungen und/oder mysteriösen Javascripten zu ersparen.

In CSS3 heisst diese Eigenschaft border-radius, Mozilla- und Webkit-basierte Browser bieten experimentelle Unterstüzung mittels folgender Schreibweise:

-moz-border-radius
-webkit-border-radius

Zum Experimentieren hätte das ja schon gereicht, aber natürlich muss es ja möglich sein, jeder Ecke eine ganz eigene Kurve (oder auch keine Kurve) zu verpassen. Hier wird es nun etwas chaotisch, da stellenweise vom W3C abweichende Bezeichnungen gewählt wurden. Hier das Ergebnis:

CSS3 (W3C)	Mozilla	WebKit
border-radius	-moz-border-radius	-webkit-border-radius
border-top-right-radius	-moz-border-radius-topright	-webkit-border-top-right-radius
border-bottom-right-radius	-moz-border-radius-bottomright	-webkit-border-bottom-right-radius
border-bottom-left-radius	-moz-border-radius-bottomleft	-webkit-border-bottom-left-radius
border-top-left-radius	-moz-border-radius-topleft	-webkit-border-top-left-radius

Noch unterschiedlicher fällt leider das Ergebnis dieser Anweisungen aus. Jede der CSS3-Eigenschaften kann einen oder zwei Längenangaben aufnehmen, in der Regel Pixel- oder EM-Werte. Wird ein einzelner Wert angegeben, bestimmt er den Radius der runden Ecke. Werden zwei Werte angegeben, bestimmen sie die horizontalen und vertikalen Radien einer elliptischen Ecke.

Dies funktioniert jedoch nur in Webkit. Die Mozilla-Syntax unterstützt lediglich runde Ecken (also keine elliptischen). Die Angabe eines zweiten Wertes führt dazu, dass eine ganz normale rechteckige Ecke erzeugt wird. Soviel dazu.

Um alle Browser abzudecken, müssen sämtliche gewünschten Variationen in der Style-Anweisung notiert werden, zum Beispiel so:

#div.teaser {
border: 1px solid #ccc;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
}

Dass ein Stylesheet mit solchen Anweisungen nicht ordentlich validiert werden kann, ist klar. Für experimentelle Seiten oder persönliche Blogs spielt das sicherlich keine Rolle, ob Sie einem Kunden klarmachen können, dass es auch im wirklichen Leben keine große Rolle spielt, hängt letztendlich wohl von Ihrer Leidenschaft ab.

Blog-Kommentar eintragen

| | | |