Autoprefixer: Ein Postprozessor zur bestmöglichen Behandlung von Vendor-Präfixen

Der folgende Text ist ein Gastbeitrag von Andrey Sitnik, dem Ersteller des Autoprefixer-Tools, einem „Postprozessor“ für die Handhabung von Vendor-Präfixen in CSS. Warum dieses Tool anstelle Ihres Präprozessors oder eines anderen Tools verwenden? Viele Gründe. Andrey wird es erklären.

Autoprefixer parst CSS-Dateien und fügt CSS-Regeln Vendor-Präfixe hinzu, wobei die Can I Use-Datenbank verwendet wird, um zu bestimmen, welche Präfixe benötigt werden.

Alles, was Sie tun müssen, ist es zu Ihrem Asset-Build-Tool hinzuzufügen (z. B. Grunt), und Sie können CSS-Vendor-Präfixe komplett vergessen. Schreiben Sie einfach reguläres CSS gemäß den neuesten W3C-Spezifikationen ohne Präfixe. So:

a {
  transition: transform 1s
}

Autoprefixer verwendet eine Datenbank mit der aktuellen Browser-Popularität und der Unterstützung von Eigenschaften, um Präfixe für Sie anzuwenden.

a {
  -webkit-transition: -webkit-transform 1s;
  transition: -ms-transform 1s;
  transition: transform 1s
}

Das Problem

Wir können natürlich Vendor-CSS-Präfixe von Hand schreiben, aber das kann mühsam und fehleranfällig sein.

Wir können Dienste wie Prefixr und Texteditor-Plugins verwenden, aber es ist immer noch anstrengend, mit großen Blöcken wiederholenden Codes zu arbeiten.

Wir können Mixin-Bibliotheken mit Präprozessoren wie Compass für Sass oder nib für Stylus verwenden. Sie lösen viele Probleme, schaffen aber andere Probleme. Sie zwingen uns, eine neue Syntax zu verwenden. Sie iterieren viel langsamer als moderne Browser, sodass eine stabile Veröffentlichung viele unnötige Präfixe enthalten kann, und manchmal müssen wir unsere eigenen Mixins erstellen.

Und Compass verbirgt die Präfixe nicht wirklich vor Ihnen, da Sie sich immer noch mit vielen Fragen auseinandersetzen müssen, zum Beispiel: Muss ich einen Mixin für border-radius schreiben? Muss ich Argumente für +transition durch Kommas trennen?

Lea Verou's -prefix-free kam der Lösung dieses Problems am nächsten, aber die Verwendung von clientseitigen Bibliotheken ist keine gute Idee, wenn man die Leistung für Endbenutzer berücksichtigt. Um dieselbe Arbeit immer wieder zu vermeiden, ist es besser, CSS einmal zu erstellen: während des Asset-Builds oder der Projektbereitstellung.

Im Detail

Anstatt ein Präprozessor – wie Sass und Stylus – zu sein, ist Autoprefixer ein Postprozessor. Er verwendet keine spezifische Syntax und arbeitet mit gängigem CSS. Autoprefixer lässt sich leicht in Sass und Stylus integrieren, da er läuft, nachdem CSS bereits kompiliert wurde.

Autoprefixer basiert auf Rework, einem Framework zum Schreiben eigener CSS-Postprozessoren. Rework parst CSS in eine nutzbare JavaScript-Struktur und exportiert es nach Ihren Manipulationen wieder als CSS.

Jede Version von Autoprefixer enthält eine Kopie der neuesten Can I Use-Daten.

• Liste aktueller Browser und deren Popularität.
• Liste der benötigten Präfixe für neue CSS-Eigenschaften, Werte und Selektoren.

Standardmäßig unterstützt Autoprefixer die 2 neuesten Versionen der wichtigsten Browser, ähnlich wie Google. Sie können jedoch wählen, welche Browser in Ihrem Projekt unterstützt werden, nach Namen (wie „ff 21“) oder nach Muster.

• Die letzten 2 Versionen jedes wichtigen Browsers unter Verwendung von „last 2 versions“.
• Mit mehr als 1 % der globalen Nutzungsstatistik unter Verwendung von „> 1%“.
• Nur neuere Versionen von „ff > 20“ oder „ff >= 20“.

Dann berechnet Autoprefixer, welche Präfixe benötigt und welche veraltet sind.

Wenn Autoprefixer Präfixe zu Ihrem CSS hinzufügt, vergisst es nicht, Syntaxunterschiede zu beheben. Auf diese Weise wird CSS gemäß den neuesten W3C-Spezifikationen erzeugt.

a {
  background: linear-gradient(to top, black, white);
  display: flex
}
::placeholder {
  color: #ccc
}

kompiliert zu

a {
  background: -webkit-linear-gradient(bottom, black, white);
  background: linear-gradient(to top, black, white);
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex
}
:-ms-input-placeholder {
  color: #ccc
}
::-moz-placeholder {
  color: #ccc
}
::-webkit-input-placeholder {
  color: #ccc
}
::placeholder {
  color: #ccc
}

Autoprefixer bereinigt auch veraltete Präfixe (aus Legacy-Code oder CSS-Bibliotheken wie Bootstrap), sodass der folgende Code

a {
  -webkit-border-radius: 5px;
  border-radius: 5px
}

kompiliert zu

a {
  border-radius: 5px
}

Nachdem Fotorama von Compass auf Autoprefixer umgestellt hat, ist die Größe der CSS-Datei um fast 20 % gesunken. Nach Fotorama, dem Wechsel von Compass zu Autoprefixer, ist die CSS-Dateigröße gesunken um fast 20 %.

Demo

Wenn Sie immer noch kein Werkzeug zur Automatisierung des Erstellens Ihrer Assets verwenden, sollten Sie sich Grunt ansehen. Ich empfehle dringend, Build-Tools zu verwenden. Dies kann Ihnen eine ganz neue Welt von „Zucker“-Syntaxen, zeitsparenden Mixin-Bibliotheken und nützlichen Bildbearbeitungswerkzeugen eröffnen. Alle Produktivitätsmethoden für Entwickler, um viel Nerven und Zeit zu sparen (die Freiheit, Sprachen zu wählen, Code-Wiederverwendung, die Möglichkeit, Drittanbieterbibliotheken zu nutzen), stehen Frontend-Programmierern jetzt zur Verfügung.

Erstellen wir ein Projektverzeichnis und schreiben einfaches CSS in style.css.

a { }

Für dieses Beispiel verwenden wir Grunt. Zuerst müssen wir grunt-autoprefixer mit npm installieren.

npm install grunt-cli grunt-contrib-watch grunt-autoprefixer

Dann sollten wir Gruntfile.js erstellen und Autoprefixer aktivieren.

module.exports = function (grunt) {
    grunt.initConfig({
        autoprefixer: {
            dist: {
                files: {
                    'build/style.css': 'style.css'
                }
            }
        },
        watch: {
            styles: {
                files: ['style.css'],
                tasks: ['autoprefixer']
            }
        }
    });
    grunt.loadNpmTasks('grunt-autoprefixer');
    grunt.loadNpmTasks('grunt-contrib-watch');
};

Diese Konfiguration ermöglicht die Kompilierung von style.css nach build/style.css mit Autoprefixer. Außerdem verwenden wir grunt-contrib-watch, um build/style.css jedes Mal neu zu kompilieren.wenn sich style.css ändert.

Lassen Sie uns Grunts Watch starten.

./node_modules/.bin/grunt watch

Nun fügen wir einen CSS3-Ausdruck zu style.css hinzu und speichern die Datei.

a {
  width: calc(50% - 2em)
}

Die Magie ist gerade passiert und jetzt haben wir eine Datei build/style.css. Grunt hat die Änderung in style.css erkannt und die Autoprefixer-Aufgabe gestartet. Autoprefixer hat den calc()-Wert gefunden, der einen Präfix für Safari 6 benötigt.

a {
  width: -webkit-calc(50% - 2em);
  width: calc(50% - 2em)
}

Jetzt fügen wir etwas komplexeres CSS3 zu style.css hinzu und speichern die Datei.

a {
  width: calc(50% - 2em);
  transition: transform 1s
}

Autoprefixer weiß bereits, dass Chrome, Safari 6 und Opera 15 Präfixe für transition und transform benötigen. Aber IE 9 benötigt auch einen Präfix für transform, den wir als Wert in transition verwendet haben.

a {
  width: -webkit-calc(1% + 1em);
  width: calc(1% + 1em);
  -webkit-transition: -webkit-transform 1s;
  transition: -ms-transform 1s;
  transition: transform 1s
 }

Autoprefixer ist darauf ausgelegt, die ganze Drecksarbeit für Sie zu erledigen. Es überprüft die Can I Use-Datenbank, schreibt alle benötigten Präfixe und versteht auch den Unterschied zwischen Spezifikationen. Willkommen in der Zukunft von CSS3 – keine Vendor-Präfixe mehr!

Was als Nächstes?

1. Autoprefixer unterstützt Ruby on Rails, Middleman, Mincer, Grunt, Sublime Text. Erfahren Sie mehr darüber, wie Sie es mit Ihrer Umgebung verwenden können, in der Dokumentation.
2. Wenn Ihre Umgebung Autoprefixer noch nicht unterstützt, melden Sie dies bitte hier, und ich werde versuchen zu helfen.
3. Folgen Sie @autoprefixer für Informationen zu Updates und neuen Funktionen.