Mai 2011

Der Browser-Präfix: Arbeiten mit CSS-Stilen

Die Standards arbeiten und sind eher ein forlaufender Prozess als feste Meilensteinen in Form einer stabilen Spezifikant. Einen stabilen Stand gibt es nicht.

Die Browser-Hersteller implementieren viele CSS-Eigenschaften schon in einem frühen Zustand des Standards, während andere Browser Eigenschaften erst mal außen vor lassen.

Der Browser-Präfix erlaubt, Eigenschaften schon in einem Draft- oder Beta-Zustand zu nutzen. Dafür wird ein Präfix für diejenigen Browser benutzt, die den Stil bereits experimentell benutzen.

Browser-Präfix: Liste der Browser

Wenn das CSS-Modul final vorliegt und die die meisten Browser die Eigenschaft unterstützen, kann der Brower-Präfix gelöscht werden.

PräfixBrowser
-moz-Firefox
-ms-, mso-Internet Explorer
-khtml-Konqueror
-o-Opera
-webkit-Chrome, Safari

border-radius z.B. wurde von Safari, Firefox und Opera schon in einem frühen Zustand unterstützt, allerdings nicht in seiner standardisierten Form 

div.round-corners { border-radius: 12px; }

sondern nur durch die Angabe des jeweiligen Browser-Präfix 

div.round-corners { 
  border-radius: 12px; 
  -moz-border-radius: 12px;    // Browser-Präfix für Mozilla
  -webkit-border-radius: 12px; // Browser-Präfix für Webkit (Safari, Chrome)
  -o-border-radius: 12px;      // Browser-Präfix für Opera
  -khtml-border-radius: 12px;  // Browser-Präfix für KHTML
}

Dieses Beispiel ist nur eine harmlose Demo – wenn dazu kleine Unterschiede in der Schreibweise und Interpretationen der Syntax kommen, kann der Schreibaufwand für den Browser-Präfix gewaltig werden.

Die CSS-Eigenschaft border-radius funktioniert jetzt z.B. in allen modernen Browsern ohne Präfix. Die Silbentrennung als CSS-Stil hingegen braucht noch den Browser-Präfix.

Eine CSS-Eigenschaft in einem frühen Zustand sowie die Implementierung in den verschiedenen Browsern kann sich schnell ändern. Ein Beispiel für die Änderungen von CSS-Stilen war z.B. die Syntax für den Farbverlauf mit CSS3 – CSS3 Gradient.

WebKit, die Grundlage für Safari und Chrome, implementierte die Unterstützung für CSS3 Verläufe 2008. Mozilla veröffentlichte Gradients im Jahr 2009, allerdings mit einer leicht abweichenden Syntax. Aber die W3C hatte zu diesem Zeitpunkt bereits eine eigene Syntax für das Image Values Module festgelegt. Mozilla änderte daraufhin seine eigene Syntax, um wieder mit der W3C-Spezifikation auf einen Stand zu kommen.

Wer den Browser-Präfix benutzt, sollte also immer wieder den Stand der Standardisierung und der Implementierung prüfen.

Obendrein füllen CSS-Anweisungen mit dem Bowser-Präfix die CSS-Datei und machen die Stylesheets unübersichtlich.