Der Fluch der Vendor Präfixe

Wer von euch als Webdesigner tätig ist, wird die Problematik vermutlich sehr gut kennen. Für alle anderen erkläre ich kurz, was das ist. Vendor Präfixe werden in Cascading Style Sheets eingesetzt, welche zum Designen von Webseiten genutzt werden. Die Browserhersteller, wie beispielsweise Mozilla, wollen neue Eigenschaften zum Gestalten möglichst früh in ihren Browsern erlauben und greifen daher zu Präfixen. Diese werden dann der neuen CSS Eigenschaft vorangestellt.

Was haben Render-Engines damit zutun?

Schauen wir uns eine typische CSS3 Eigenschaft mit einem Vendor Präfix an.

-moz-border-radius: 5px;

So würde eine abgerundete Box für Firefox beispielsweise aussehen. Der Browser nutzt eine sogenannte Render-Engine, welche zur Darstellung von HTML und CSS genutzt wird. Bei Mozilla trägt sie den schönen Namen Gecko, wie das Reptil. Nun gibt es aber nicht nur Firefox, sondern auch noch weitere Browser, wie Google Chrome, Safari, Internet Explorer, Opera und so weiter. Diese laufen auf anderen Darstellungsmodulen.

Webbrowserauswahl
Webbrowserauswahl

Mit dem Vendor Präfix “-moz” wird nur Gecko angesprochen und auch nur dort, wo es zum Einsatz kommt richtig dargestellt. Was also tun? Die Lösung, wir nutzen weitere Präfixe, und weil die Entwickler die Eigenschaft irgendwann vollständig implementiert haben und die W3C ihr OK gegeben hat, kann die Eigenschaft ganz normal verwendet werden.

-ms-border-radius: 5px; /*Internet Explorer*/
-webkit-border-radius: 5px; /*Chrome, Iron, Safari*/
-o-border-radius: 5px; /*Opera*/
border-radius: 5px; /*W3C CSS3 Deklaration*/

Wieso sind Vendor Präfixe ein Problem?

Die identische Angabe steht jetzt ganze fünf Mal im Style Sheet drin. Das hat nun mehrere Nachteile:

  • Es ist unübersichtlich
  • Das CSS lädt länger, weil die Datei größer wird
  • Jede Render-Engine wird separat angesprochen
  • Mehraufwand für den Webdesigner
  • CSS nicht mehr W3C valide (korrekt)
  • Überflüssige Präfixe werden selten entfernt
  • Attribute werden mehrfach angegeben

Demnach muss der Webdesigner absichtlich Fehler machen, damit eine korrekte Darstellung einer Webseite in allen gängigen Browsern möglich ist. Oder wir verzichten ganz auf CSS3 Eigenschaften, die noch nicht vollständig freigegeben wurden.

Wird Webkit zum neuen IE6?

Eine weitere Problematik, die mit den Vendor Präfixen im Zusammenhang steht, möchte ich hier noch mit einschieben. Die meisten mobilen Browser laufen mit der Webkit-Render-Engine. Daher scheint es in der Praxis nun so auszusehen, dass viele Designer fast ausschließlich auf diese Engine anpassen. Die “Schlampigkeit”, nur den Präfix “-webkit” zu verwenden führt nun dazu, das andere Browser wie Opera, Firefox und Co. benachteiligt werden. Daher ist eine korrekte Webseitendarstellung dort nicht mehr garantiert.

Mobile Browsing (Quelle: Johan Larsson, Liz. CC BY 2.0)
Mobile Browsing (Quelle: Johan Larsson, Liz. CC BY 2.0)

Die Lösung hierfür ist recht einfach. Die Webdesigner sollten die korrekte CSS3 Eigenschaft angeben und auch weitestgehend nur Deklarationen nutzen, die von den meisten Browsern unterstützt werden. Ob mit Präfix oder ohne, spiel dabei keine Rolle. Aber das löst noch nicht den Vendor Fluch.

Wie werden wir die Präfixe wieder los?

Vendor-Unlock eine Überlegung?

Die Vendor Präfixe machen das Web kaputt und verleiten Webdesigner zur Liederlichkeit. Das dürfte nun deutlich geworden sein. Nun aber die Frage nach einem Ausweg. Mozilla-Entwickler Felipe Gomes schlägt eine Alternative vor. Er selbst nennt sie Vendor-Unlock. Diese soll eine CSS Eigenschaft einmal explizit für bestimmte Browser freischalten und danach eine einheitliche Definition verwenden. So sollte das dann beispielsweise aussehen:

@-vendor-unlock {
border-radius: gecko, webkit, trident, opera;
}
#id {
border-radius: 5px;
}

Eine Render-Engine, die Lösung aller Probleme

Mir schwirrt noch ein anderer Ansatz im Kopf herum. Was wäre, wenn man sich endlich auf eine einzige Render-Engine festlegen würde?

Sicherlich vorher deutlicher Mehraufwand, aber hinterher wesentliche Vorteile. Denn, jeder Webdesigner klagt auch über die Anpassungsprobleme von Browser zu Browser. Schließlich soll die Darstellung überall gleich sein. Das würde damit für zukünftige Browser wegfallen und der Webdesigner könnte sich endlich wieder mehr aufs gestalterisch-künstlerische Konzentrieren und nicht wie er das Script anpassen muss, so das die Site auch im IE10 noch genauso ausschaut.


Avatar von reraiseace
Autor: Markus Werner (reraiseace) Twitterreraiseace, Google+reraiseace, Twittercb_werner
Ich bin Redaktionsvolontär bei der COMPUTER BILD in Hamburg, Fernstudent am Deutschen Journalistenkolleg und schreibe auf re{raise}ace privat über Webdesign und Programmierung. Seit 2015 schrieb ich auch regelmäßig für andere Medien.

0 Kommentare

Du kannst diesen Artikel nicht mehr kommentieren.