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

CSS-Stile im Frühstadium

Die Browser-Hersteller setzten früher neue CSS-Eigenschaften schon in einem frühen Zustand des Standards, während andere Browser neue CSS-Eigenschaften erst mal außen vor ließen. Dazu gehörten nicht nur Eigenschaften, die zum aktuellen CSS-Standard gehören, sondern sie griffen schon mal vor und implementierten 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. 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.

Der Präfix tauchte so um 2005 auf und erreichte zwischen 2012 und 2017 seinen Höhepunkt. In dieser Zeit entstanden die Prefixer-Tools. Mozilla stellte den Präfix so um 2013 ein und setzte anstelle dessen auf Flags, Webkit im Jahr 2016. Trotzdem gibt es noch CSS-Eigenschaften, für die ein Präfix Sinn macht oder die sogar erforderlich ist. Übrig bleibt der webkit-Prefix für alle Browser (an vielen Stellen auch für Firefox). CANIUSE ist DIE Webseite mit einem Überblick, welche CSS-Eigenschaften aktuell von den jeweiligen Browsern unterstützt werden.

Neben dem Browser-Präfix gab es auch noch Conditional Comments, die sich nur an eine Browser-Familie richteten: Internet Explorer. Dazu mehr später.

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.

-ms, -khtml und -o sind heute nicht mehr nötig. Microsoft Edge ist wie Opera auf die Blink-Engine (-webkit) umgestiegen. Übrig bleibt der webkit-Prefix für alle Browser (an vielen Stellen auch für Firefox).

Chrome, Opera, Edge, Firefox und Safari gehören zu den Browsern, die Eigenschaften zügig ohne Browser-Präfix unterstützen. Müssen wir heute noch an die zahlreichen Smartphones denken, die ohne Updates noch lange Zeit das Internet mit alten Betriebssystemen und Browsern bevölkern? Nur an wenigen Stellen, denn die Inhalte für Handys fließen möglichst sequentiell, viele Effekte bleiben Handys besser erspart.

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. IE10 verwendete bis zu seinem Ende die alte Syntax:

.columns { 
   display: flex;
       display: -ms-flexbox;   // IE10 2009 Syntax
   flex-wrap: wrap;
       -ms-flex-flow: wrap;    // IE10 2009 Syntax
}

Das Beispiel ist nur eine harmlose Demo. Wenn allerdings kleine Unterschiede in der Schreibweise und Interpretationen der Syntax hinzukamen, konnte 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 display:flex 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 einen Browser-Präfix benutzt, sollte also immer wieder den Stand der Standardisierung und der Implementierung prüfen. DEr Bowser-Präfix überschwemmt die CSS-Datei und macht das CSS unübersichtlich.

Browser-Präfix – ausgestorben?

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. Die letzten kleinen Ecken sind z.B.

input[type='range']::-webkit-slider-thumb 
input[type=range]::-moz-range-thumb
-webkit-hyphens für Safari
-webkit-line-clamp
-webkit-text-stroke
-webkit-text-fill
-webkit-mask: url(mask.png)
-webkit-mask-image /** nur für Chrome u. Edge */
-webkit-print-color-adjust
-moz-font-feature-settings: "frac";
-webkit-font-feature-settings: "frac";
-webkit-scrollbar
-webkit-scrollbar-thumb
-webkit-scrollbar-track

Die Liste erhebt keinen Anspruch auf Vollständigkeit, aber sie ist 2023 auf jeden Fall kurz geworden. CSS Transitions und Keyframe-Animationen sind schon lange Präfix-frei, appearance: none, position: sticky gehörten zu den letzten, die in den offiziellen Support gerutscht sind.

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.