In meinem derzeit bevorzugten Editor Netbeans ist kein Mechanismus vorhanden, um den Autoprefixer auszuführen. Es gab zwar mal ein Plugin hierzu, dieses basierte jedoch auf die Version 7 und funktioniert heute nicht mehr. Zwar gibt es die Möglichkeit, mit NodeJS Gulp, Grunt und andere Skripte auszuführen oder über die Run Configuration ein eigenes Skipt zu erstellen, aber für eine schnelle Ergänzung der CSS-Dateien mit Vendor-Codes ist das alles mit Kanonen auf Spatzen zu schießen.
Richtig und sinnvoll wäre es natürlich schon, sein Projekt mit Gulp oder Grunt gleich richtig zu paketieren und mit Build-Prozessen zu versehen. Ein sehr guter Artikel mit einem Einstieg dazu findet sich beispielsweise hier: Gulp for WordPress: Initial Setup
Aber hier soll es erstmal nur um den Quick and Dirty Weg gehen.
PostCSS mit Autoprefixer und NanoCSS
Für den Autoprefixer verwende ich das PostCSS-Plugin in NodeJS.
Wenn man NodeJS bereits hat, erfolgt die Installation mit dem Node Package Manager:
npm install postcss autoprefixer cssnano
Da ist mit PostCSS nicht nur den Autoprefixer seinen Job tun lasse, sondern auch das Ergebnis minifizieren möchte, hab ich auch CSSNano dabei.
Wenn die package.json noch nicht vorhanden ist, kann man sie mit dieser Anweisung erstellen und die Dependencies der Plugins ergänzen:
npm install -save-dev postcss autoprefixer cssnano
Die Konfiguration hierzu befindet sich in den Dateien postcss.config.js und package.json, die sich beide im Projektordner befinden.
In der Datei postcss.config.js stehen lediglich folgende Anweisungen:
module.exports = {
plugins: [
require('autoprefixer')(),
require('cssnano')()
]
};
In der package.json hab ich lediglich folgende Einträge ergänzt:
"browserslist": [
"last 3 years"
]
Dese werden von dem Autoprefixer ausgelesen um statt den Default der Browserliste nur jene zu nehmen, die in den letzten drei Jahren auf den Markt kamen. Dies kann man aber auch weglassen.
Nachdem diese Vorarbeit fertig ist, wird dann auf der Kommandozeile lediglich folgendes Kommando ausgeführt:
postcss css/style.css > style.css
Hier nehme ich die css/style.css Datei, die zuvor durch andere Methoden erstellt wurde (z.B. durch ein CSS-Post-Prozessor) und wandele diese mit PostCSS um. Das Ergebnis wird in style.css geschrieben.
Zack und fertig.