CSS Browser-Präfix

Wenn man für Websites CSS-Regeln erstellt, dann stößt man unweigerlich auf die Browser-Präfixe, z.B. -webkit- oder -moz-. Diese sind deshalb notwendig, weil die meisten Browserhersteller nicht nur die offiziellen CSS-Spezifikationen implementieren, sondern auch eigene. Der Grund hierfür ist, dass die Hersteller nicht mit gewissen Eigenschaften solange warten wollen, bis das W3C diese zum offiziellen Standard macht. Mit einem Browser-Präfix können sie bereits im experimentellen, Entwurfs- oder Beta-Status genutzt werden. Gemäß den CSS-Spezifikationen des W3C sind solche Präfixe erlaubt und als Entwickler von Websites muss man diese berücksichtigen, wenn man bei der Verwendung von CSS-Stilen möglichst viele Browser abdecken möchte.

Welche Eigenschaften implementiert werden, ist natürlich den Browserherstellern überlassen. So kann es durchaus passieren, dass manche Browser gewisse CSS-Stile unterstützen, andere wiederum nicht. Außerdem kann es passieren, dass die Eigenschaften irgendwann zum offiziellen Standard werden und man "eigentlich" keinen Browser-Präfix benötigt, diese aber trotzdem weiterverwenden müssen, um auch die älteren Browserversionen abzudecken. Dabei werden unter anderem die folgenden Browser-Präfixe eingesetzt.

  • -webkit- für Chrome und Safari
  • -moz- für Firefox
  • -ms- für Internet Explorer
  • -o- für Opera
  • -khtml- für Konqueror

Das bedeutet jedoch nicht, dass man alle CSS-Eigenschaften in allen Browsern nur durch die Angabe des Präfixes ansprechen kann. Bei manchen Eigenschaften kann man den Präfix verwenden, bei manchen ist dagegen eine Implementierung nicht erfolgt. Bei manchen Browsern kann es wiederum passieren, dass ein komplett anderes Schlüsselwort verwendet wird. Ein Beispiel hierfür ist das Schlüsselwort opacity, mit dem die Transparenz eines Elements festgelegt werden kann. Die Spezifikationen sehen hierfür das Schlüsselwort opacity und die folgende Syntax vor.

opacity { 0.8; }

Beim Internet Explorer 11 muss man statt opacity das Schlüsselwort filter verwenden und die Syntax ist auch eine andere. Der folgende CSS-Code hätte in diesem Fall beim IE keine Auswirkung.

-ms-opacity { 0.8; }

Für die Entwickler von Websites bleibt somit nichts anderes übrig, vor der Verwendung von CSS-Eigenschaften die Spezifikationen, die Browser-Präfixe und ggf. Abweichungen davon zu prüfen.

Reihenfolge der CSS-Angaben

Wenn man Eigenschaften und Werte mit Browser-Präfixen angibt, dann sollte das Eigenschaft/Wert-Paar zuletzt angegeben werden, das den Spezifikationen entspricht. Wenn nämlich mehrere Angaben identische Eigenschaften ansprechen, sind die Angaben gültig, die zuletzt angegeben wurden und das sollte am Ende immer die sein, die der Spezifikation entspricht. Sonst könnte es passieren, dass diese überschrieben wird. Ein Beispielcode für runde Ecken.

.rund {
 -webkit-border-radius: 5px;
 -moz-border-radius: 5px;
 -o-border-radius: 5px;
 -khtml-border-radius: 5px;
 border-radius: 5px; 
}

Die Vierecksbeziehung zwischen den Beteiligten

Durch die unterschiedliche Implementation von CSS in den Browsern kann man manchmal den Eindruck gewinnen, dass jeder "macht was er will". Das ist dem Umstand geschuldet, dass rund um den Browser, der hauptsächlich für die Betrachtung von Websites verwendet wird, verschiedene Beteiligten gibt, die alle unterschiedliche Aufgaben und Interessen verfolgen.

Beteiligte rund um den Browser

Benutzer

Als Benutzer ist man praktisch der "Kunde" von Websites. Die Interessenlage ist hier klar. Man möchte einen Browser haben, möglichst schnell ist und die Websites ansehnlich darstellt.

W3C

Das W3C legt die Standards für HTML und CSS fest, mit denen man Websites entwickelt. Das W3C bringt jedoch nicht ständig neue Spezifikationen heraus. Es dauert in der Regel mehrere Jahre, bis ein neuer Standard herausgebracht wird. Schließlich werden die Vorschläge, die an das W3C herangetragen werden, überprüft und getestet. Wechselwirkungen mit anderen Einstellungen müssen weitestgehend ausgeschlossen werden. Außerdem muss immer die Abwärtskompatibilität im Auge behalten werden. Bei einer unbedachten Implementierung kann es nämlich passieren, dass durch eine kleine Änderung viele ältere Websites unansehnlich werden und das muss verhindert werden.

Browser-Hersteller

Die Dauer, nach der neue Spezifikationen herausgebracht werden, ist für die Browser-Hersteller traditionell zu lang. Man hat eine neue Funktion, die man als sehr sinnvoll erachtet und möchte, dass das so schnell wie möglich zu einem Standard wird. Schließlich konkurrieren sie mit anderen Browser-Herstellern und man möchte nach Möglichkeit mit nützlichen Funktionen des Browsers glänzen. Wenn die Aufnahme von neuen Funktionen jedoch zu lange dauert, entscheiden sie sich schließlich für eine eigenmächtige Implementation in ihren Browsern mit einem Browser-Präfix.

Und genau an dieser Stelle fangen die Inkonsistenzen an. Andere Browser-Hersteller haben vielleicht eine ähnliche Funktion, benennen die CSS-Eigenschaft jedoch anders und/oder verwenden eine andere Syntax. Schließlich kann es passieren, dass am Ende die nützliche Funktion zu den Spezifikationen aufgenommen wird, jedoch kann das Schlüsselwort und die Syntax dabei erneut abweichend sein.

Website-Entwickler

Mit dem ganzen "Durcheinander" zwischen den W3C-Standards und den Implementationen der Browser-Hersteller müssen die Entwickler von Websites leben und das Augenmerk auf beide legen. Einerseits ist man daran interessiert, die Standards zu verwenden und andererseits muss man ermitteln, ob und sie in den Browsern umgesetzt wurden. Schließlich kann es passieren, dass Browser-Hersteller gewisse Features aus den Browsern entfernen, da sie nicht (mehr) zu den Standards gehören oder die Umsetzung anders erfolgte, als es die Spezifikationen vorsehen. Und wenn eine Website bei einem Browser ziemlich "zerstört" aussieht, dann fällt das am Ende auf den Entwickler zurück.