Herstellerpräfix

Als Herstellerpräfix (auch Browserpräfix oder Vendorpräfix) bezeichnet man eine kurze Zeichenkette, die Browserhersteller den eigentlichen Bezeichnern voranstellen, wenn sie experimentelle Funktionen implementieren. Ursprünglich wurden sie in CSS eingesetzt, sind inzwischen aber auch in anderen Bereichen der Web-Entwicklung verbreitet.

Vor- und Nachteile

Herstellerpräfixe erlauben es Browserherstellern, Funktionen zu implementieren, deren Spezifikation noch in Entwicklung ist, ohne dass es zu Kompatibilitätsproblemen mit anderen Browsern oder dem endgültigen Standard kommt. Es können auch proprietäre Erweiterungen implementiert werden, die in keinem Standard zu finden sind, ohne dass Namenskollisionen zu befürchten sind. Ein weiterer Vorteil ist, dass das Präfix als Warnung für Programmierer fungiert, dass die Funktion noch nicht in allen Browsern verfügbar ist und noch Änderungen unterworfen sein kann.[1]

Ein Nachteil sind die Codeduplizierungen, die notwendig sind, wenn möglichst viele Browser mit unterschiedlichen Präfixen unterstützt werden sollen. Dies kann zum Teil mit alternativen Stylesheet-Sprachen wie LESS abgemildert werden. Zudem muss der Code immer wieder aktualisiert werden, wenn ein weiterer Browser eine Funktion mit seinem eigenen Präfix einführt oder das Präfix schließlich entfernt. Vergisst der Programmierer einer Website dabei einen Browser, so stellt dieser die Seite nur unvollkommen dar, obwohl es aus technischer Sicht keinen Grund dafür gibt.[2] In vielen Fällen werden experimentelle Implementierungen neuer Funktionen ohne Präfix, dafür aber standardmäßig deaktiviert bereitgestellt.[3]

Syntax

In CSS ist vorgesehen, dass das Präfix mit einem Bindestrich (-) beginnt, dann ein Kürzel für den Hersteller folgt und schließlich ein weiterer Bindestrich das Präfix vom eigentlichen Bezeichner abtrennt. Alternativ kann auch der erste Bindestrich durch einen Unterstrich (_) ersetzt werden.[4] In der Praxis fehlt bei einigen Herstellerpräfixen der erste Bindestrich.

In JavaScript werden Herstellerpräfixe in der CamelCase-Syntax vorangestellt: Das Kürzel für den Hersteller wird in der Regel in Kleinbuchstaben angegeben, darauf folgt unmittelbar der eigentliche Bezeichner, wobei dessen erster Buchstabe durch den zugehörigen Großbuchstaben ersetzt wird.

Vereinzelt kommen Herstellerpräfixe auch an anderen Stellen vor und werden den dort geltenden Syntaxregeln angepasst: Bei experimentellen Attributen in HTML5 gibt es keine Systematik, teilweise wird das Kürzel ohne Bindestriche oder andere Zeichen[5], teilweise mit einem Bindestrich als Trennzeichen[6], teilweise noch mit einem führenden x-[7] dem eigentlichen Attributnamen vorangestellt. In WebGL werden Großbuchstaben und ein Unterstrich verwendet.[8]

Bekannte Präfixe

Die folgende Liste nennt einige verbreitete Herstellerpräfixe in der CSS-Syntax.

PräfixVerwendung
-epub-innerhalb von Büchern im EPUB-Format[9]
-moz-Gecko (Mozilla Firefox)
-ms-Trident (Internet Explorer), Microsoft Edge
-o-Presto (Opera bis Version 12)
-webkit-WebKit (Safari), Blink (Google Chrome, Opera ab Version 15)

Auf Grund der Dominanz WebKit-basierter Browser vor allem im Mobilbereich verwenden viele Webseiten nur das webkit-Präfix und vernachlässigen andere Browser. Dies führte bei Herstellern anderer Browser zu der Überlegung zusätzlich zu den eigenen Präfixen auch das webkit-Präfix zu interpretieren.[10] Microsoft Edge interpretiert einige Webkit-Eigenschaften,[11] Firefox ab Version 49 ebenfalls.[12] Welche Eigenschaften unterstützt werden sollten, wird in einem WHATWG-Standard spezifiziert.[13]

Einzelnachweise

  1. ↑ Eric Meyer: Prefix or Posthack. In: A List Apart. 6. Juli 2010, abgerufen am 2. September 2016 (englisch).
  2. ↑ Peter-Paul Koch: CSS vendor prefixes considered harmful. In: QuirksBlog. 22. März 2010, abgerufen am 2. September 2016 (englisch).
  3. ↑ Blink - The Chromium Projects. Vendor Prefixes. Abgerufen am 9. September 2016 (englisch).
  4. ↑ Syntax and basic data types. Vendor-specific extensions. In: Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification. World Wide Web Consortium, 7. Juni 2011, abgerufen am 2. September 2016 (englisch).
  5. ↑ <iframe> - HTML. In: MDN Web Docs. Abgerufen am 2. September 2016 (englisch).
  6. ↑ <canvas> - HTML. In: MDN Web Docs. Abgerufen am 6. September 2016 (englisch).
  7. ↑ <input> - HTML. In: MDN Web Docs. Abgerufen am 8. November 2016 (englisch).
  8. ↑ Using WebGL extensions. In: MDN Web Docs. Abgerufen am 8. November 2016 (englisch).
  9. ↑ CSS Property Reference. In: EPUB 3 Accessibility Guidelines. Abgerufen am 2. September 2016.
  10. ↑ Tantek Çelik, Eric Meyer: The Vendor Prefix Predicament: ALA’s Eric Meyer Interviews Tantek Çelik. In: A List Apart. 14. Februar 2012, abgerufen am 2. September 2016 (englisch).
  11. ↑ Microsoft Edge Team: A break from the past, part 2: Saying goodbye to ActiveX, VBScript, attachEvent… In: Microsoft Edge Dev Blog. 6. Mai 2015, abgerufen am 2. September 2016 (englisch).
  12. ↑ Firefox 49 for developers. Compatibility. In: MDN Web Docs. Abgerufen am 2. September 2016 (englisch).
  13. ↑ Compatibility Standard. Abgerufen am 21. September 2016 (englisch).

Weblinks