CSS, HTML und Javascript mit {stil}

Browser-Präfix: CSS3 Draft heute nutzen

Browser-Prefix: Browser erkennen und CSS früh nutzen

Die Standards arbeiten wie junges Holz. CSS3 ist wie HTML5 eher ein fortlaufender Prozess als eine stabile Spezifikation. 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 neue CSS-Eigenschaften erst mal außen vor lassen.

CANIUSE ist eine Webseite mit einem Überblick, welche CSS-Eigenschaften aktuell von den jeweiligen Browsern unterstützt werden.

Die Browser-Hersteller implementieren nicht nur die CSS-Eigenschaften, die zum aktuellen CSS-Standard gehören. Browser greifen schon mal vor und implementieren neue CSS-Regeln als »private« Eigenschaften. Für die Browser-eigenen Eingenschaften hat das W3C in der CSS-Spezifikation den Browser-Präfix zum Standard gemacht.

Der Browser-Präfix erlaubt Tests und Experimente mit neuen CSS-Eigenschaften schon in einem Draft- oder Beta-Zustand. Dafür wird ein Präfix für diejenigen Browser benutzt, die den Stil bereits experimentell bieten.

Browser-Präfix: Liste der Browser

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

PräfixBrowser
-moz-Firefox
-ms-Internet Explorer
-khtml-Konqueror
-o-Opera (alte Opera-Versionen) – u.U. noch auf Handys mit altem Betriebssystem
-webkit-Chrome, Opera (neue Versionen), Safari

Firefox und Opera gehören zu den Browsern, die Eigenschaften zügig auch ohne Browser-Präfix unterstützen. Allerdings müssen wir heute an die zahlreichen Smartphones denken, die ohne Updates noch lange Zeit das Internet mit alten Betriebssystemen und Browsern bevölkern.

display:flex z.B. wurde von Chrome, Safari, Firefox und Opera schon in einem frühen Zustand unterstützt, aber nicht mit der aktuellen Syntax. Für IE10 muss heute noch die alte Syntax verwendet werden:

div.cols { 
    display: flex;
}

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

div.cols { 
   display: flex;
       display: -ms-flexbox;   // IE10 2009 Syntax
       display: -webkit-box;   // webkit 2009 Syntax
   flex-wrap: wrap;
       -ms-flex-flow: wrap;    // IE10 2009 Syntax
}

.cols div {
   justify-content:center;
        -webkit-justify-content: center;
        -ms-flex-pack:center;   // IE10 2009 Syntax
   display: inline-block;       // IE10, damit flex-wrap funktioniert
}

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

CSS display:flex funktioniert heute in den aktuellen Browsern ohne Präfix. Die Silbentrennung als CSS-Stil hingegen braucht noch den Browser-Präfix.

Stand der Standardisierung

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 die Syntax für den Farbverlauf mit CSS Gradient.

WebKit, die Grundlage für Safari, Chrome und Opera implementierte die Unterstützung für den CSS Farbverlauf schon 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.

CSS-Anweisungen mit dem Bowser-Präfix überschwemmen die CSS-Datei und machen das CSS unübersichtlich.