Browser-Präfix: CSS-Stile frühzeitig nutzen

Browser Praefix – Browserkennung voransetzen

Der Browser-Präfix (-webkit, -moz, -ms) erlaubt den Einsatz von CSS-Stilen im Vorstadium, denn die Standards arbeiten wie junges Holz. CSS ist wie HTML 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.

18-12-15 SITEMAP

CSS-Stile im Frühstadium

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
   flex-wrap: wrap;
       -ms-flex-flow: wrap;    // IE10 2009 Syntax
}

.cols div {
   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 allerdings 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. Nur IE10 brauchte noch einen Browser-Präfix und hatte eine leicht abweichende Syntax. Wenn IE10 auf kommerziellen Seiten noch unterstützt werden soll, müssen die Flexbox-Einstellungen für IE10 sorgfältig getestet werden (z.B. mit VirtualBox)

Sorgenkind ist heute IE11, der zwar Flexbox aus dem Effeff beherrscht, dafür große Lücken bei display: grid hat.

Grid gap, column-gap und row-gap gab es in der ursprünglichen Empfehlung der Spezifikation noch nicht. Anstelle dessen braucht IE11 zusätzliche Tracks – Zeilen und Spalten – oder der Abstand zwischen den Grid-Zellen wird durch margin geregelt.

.myGrid {
	-ms-grid-columns : 6fr 1fr 6fr 1fr 6fr;
	grid-template-columns : 6fr 1fr 6fr 1fr 6fr;
	grid-template-areas: "cell-1 b1 cell-2 b2 cell-3"
                         "cell-4 b1 cell-5 b2 cell-6"
                         "cell-7 b1 cell-8 b2 cell-6";
}

grid-template-areas sind ein Schwarzes Loch in IE11. Damit IE11 dasselbe Layout erzielt, beginnt eine Schreibarie. Jede Zelle des Grids muss einzeln im Raster platziert werden.

.cell1 {
  -ms-grid-row: 1; 
  -ms-grid-column: 1; 
  grid-area: cell-1;
}
…

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.

Kein Browser-Präfix

Die immergrünen Browser – das sind Chrome, Edge, Firefox, Opera und Safari – sind heute nahezu auf demselben Stand und der Browser-Präfix verliert an Bedeutung. IE10 ist schon seit geraumer Zeit von der Oberfläche verschwunden, das Sorgenkind ist heute IE11. IE11 unterstützt CSS3 in einem großen Umfang, ist aber immer noch mit kleinen Bugs belastet.

CSS nur für IE11: Einer der letzten Browser-Hacks ist ein CSS Breakpoint, den nur IE11 ausführt.

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
  .header, #bar-left{
      left: 0;
      transition: all .5s;
  }
  .shiftnav-open .header, .shiftnav-open #bar-left{
     left:590px;
  }
}

Quelle Fixed position misbehaviour in IE11 bei Stackoverflow