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 Eigenschaften 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.
| Präfix | Browser |
|---|---|
| -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 |
-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 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, IE11 spielt ebenfalls keine Rolle mehr.
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.
