zum Artikelanfang springen

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.

Liste weiterer Hersteller-Kürzel

Kürzel Hersteller
-webkit- Webkit
-moz- Mozilla
-o- Opera
-ms- Microsoft
mso- Microsoft Office
-atsc- Advanced Television Standards Committee
-wap- The WAP Forum

Das W3C zum Thema

4.1.2.1 Vendor-specific extensions

In CSS, identifiers may begin with '-' (dash) or '_' (underscore). Keywords and property names beginning with -' or '_' are reserved for vendor-specific extensions. Such vendor-specific extensions should have one of the following formats:

'-' + vendor identifier + '-' + meaningful name
'_' + vendor identifier + '-' + meaningful name

Example(s):

For example, if XYZ organization added a property to describe the color of the border on the East side of the display, they might call it -xyz-border-east-color.

Other known examples:

-moz-box-sizing
-moz-border-radius
-wap-accesskey

An initial dash or underscore is guaranteed never to be used in a property or keyword by any current or future level of CSS. Thus typical CSS implementations may not recognize such properties and may ignore them according to the rules for handling parsing errors. However, because the initial dash or underscore is part of the grammar, CSS2.1 implementers should always be able to use a CSS-conforming parser, whether or not they support any vendor-specific extensions.

Authors should avoid vendor-specific extensions.

Quelle: http://www.w3.org/TR/CSS21/syndata.html#vendor-keywords

Seitenanfang



(c) 2009 e-workers
http://www.css-cafe.de/
mailto: info@css-cafe.de