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 HTML JS Basis JS Web Tutorial SVG

CSS-Stile im Frühstadium

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.

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

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. Aber die Browser entwickeln heute neue Eigenschaften schnell und so ändert sich alles auch schnell. Auch die Preprozessoren und die Mixin-Libraries sind da nicht immer aktuell.

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

Chrome, Opera, Firefox und Safari 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. IE10 ist vergessen. Das nächste Sorgenkind war IE11, der zwar Flexbox aus dem Effeff beherrschte, dafür große Lücken bei display: grid hatte.

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 epische Umschreibung. 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. IE11 (RIP) unterstützt CSS nicht im vollen Umfang und war auch immer 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

Conditional Comments

Conditional Comments oder Bedingte Kommentare waren HTML-Kommentare, die nur von Internet Explorer ab IE5 bis einschließlich Version 9 interpretiert wurden. Sie enthielten meist CSS im Head-Bereich der Webseite, das nur für IE bestimmt ist, konnten aber auch im body-Element ganze Passagen auf IE beschränken oder vor IE verbergen.

Internet Explorer war bis IE9 ein Schlusslicht mit bodenlosen Löchern, die durch Conditional Comments umgangen werden konnten. Microsoft hat den Support für IE IE9 im Februar 2016 eingestellt (gleichzeitig auch den Support für IE10). Schon ab IE10 wurden Conditional Comments für IE außer Kraft gesetzt und die Browsererkennung »IE oder nicht IE« war beendet. Alternativen für die modernen Browser sind die CSS @supports-Regel und die Feature-Erkennung.

<!--[if IE ]>
  <link href="ie.css" rel="stylesheet" type="text/css">
<![endif]-->

Heute finden wir Conditional Comments nur noch in alten Themes für Content Management Systeme wie WordPress oder Drupal.