Im CSS sollte man heutzutage keine Browser-Prefixes mehr selbst schreiben. Denk dem Grunt-Task grunt-postcss und dem Plugin autoprefixer kann diese Aufgabe automatisiert werden. Wie hierbei die gewünschte Browser-Kompatibilität konfiguriert wird, zeige ich euch in diesem kurzen Artikel. Hilfe benötigt?
Autoprefixer installieren
Zunächst installieren wir den Grunt-Task grunt-postcss:
npm install --save-dev grunt-postcss
Danach installieren wir das PostCSS-Plugin autoprefixer:
npm install --save-dev autoprefixer
Grunt-Task konfigurieren
Im nächsten Schritt geben wir in der Task-Konfiguration die CSS-Datei an, welche der Autoprefixer untersuchen soll. Wenn ihr eure CSS-Dateien aus SASS- oder SCSS-Quellen generieren lasst, sollte der Autoprefixer immer direkt nach dem Kompilieren der CSS auf diese angewendet werden.
postcss: {
options: {
processors: [
require('autoprefixer')({
browsers: ['last 2 versions']
})
]
},
dist: {
src: 'dest/css/autoprefix.css'
}
}Browser angeben
Für mich war es nun ein etwas größeres Rätsel wie ich denn nun die Browser und deren Versionen angeben muss, damit ich auch nur die Prefixes erhalte, die ich in meinem Projekt brauche.
Die Dokumentation von Browserlist ist für mich nicht ganz eindeutig in dem wie ich das browser-Array befüllen muss. Angenommen ich habe für ein Projekt anhand von vorhandenen Besucherstatistiken eine Browser-Matrix aufgestellt, die es nun zu unterstützen gilt. Wie gebe ich diese dann am besten ein? Als Beispiel sollen alte Android-Smartphones die Website auch so gut wie möglich darstellen.
Die Liste browsers: [‚last 2 versions‘, ‚Android‘] wird mit einem Fehler quittiert:
Fatal error: Unknown browser query `Android`
Möglicherweise verstehe ich die Doku nicht korrekt, aber man muss scheinbar immer eine Versionsangabe machen, z. B. Android >= 2.3 und kann nicht einfach alle Androids unterstützen wollen.
Man muss also genau wissen für welche minimale Browser-Version man noch Unterstützung haben möchte. Ein Tracking-Tool mit Einblick in genaue Browserversionen ist demnach von Vorteil.
Die Schönheit von Autoprefixer
Autoprefixer ist ein super Tool und ein Muss in jedem Web-Projekt. Der große Vorteil liegt in der automatischen Anpassung des CSS bei sich wandelnden Browser-Anforderungen. Möglich wird dies erst durch die Daten von caniuse. Toll ist auch die Möglichkeit die Browserversionen abhängig von Nutzeranteilen zu machen.
Einstellen und vergessen
Bei einem Test ist mir gerade klar geworden wie wertvoll das Tool ist. Man wird es einmalig einrichten und dann beim gelegentlichen Review des Browsersupports für ein Projekt die Liste anpassen. Ein Beispiel, um es zu verdeutlichen:
.gradient {
background-image: linear-gradient(to right, #000 0, #fff 100%);
}Diesen CSS-Schnipsel habe ich mit folgender Browserliste geprefixed.
browsers: [
'last 2 versions',
'ie >= 9',
'Android >= 2.3',
'ChromeAndroid > 20',
'FirefoxAndroid > 20',
'iOS >= 8'
]Im ersten Moment hat mich das Ergebnis überrascht:
.gradient {
background-image: -webkit-gradient(linear, left top, right top, color-stop(0, #000), to(#fff));
background-image: -webkit-linear-gradient(left, #000 0, #fff 100%);
background-image: linear-gradient(to right, #000 0, #fff 100%);
}Hätte ich das selbst erzeugt, wäre ich zum Ultimate CSS Gradient Generator gesurft, hätte meinen Farb-Verlauf eingestellt, Copy + Paste bemüht und wäre mit der Sache fertig gewesen.
background: -moz-linear-gradient(left, #000000 0%, #ffffff 100%);
background: -webkit-linear-gradient(left, #000000 0%,#ffffff 100%);
background: linear-gradient(to right, #000000 0%,#ffffff 100%);
background: -o-linear-gradient(left, #000000 0%,#ffffff 100%);
background: -ms-linear-gradient(left, #000000 0%,#ffffff 100%);
Dass blindes Copy & Paste hier nicht so gut ist, erkennt man bei einem Blick auf die Browser-Kompatibilität der verabschiedeten Syntax. Opera, Firefox und IE 10 muss man gar nicht prefixen. Ups! Danke Autoprefixer! Noch Fragen offen?
Kommentare