CSS/SCSS: Händische Vendor-Prefixe seit Bootstrap 4+

Deshalb habe ich mich nach Alternativen umgesehen, wie ich halbwegs flüssig "mal eben" das CSS für Browsertests mit den gewünschten Prefixen (siehe unten) versehen kann. Eigentlich war mein Plan, das gleich mit der SCSS-Kompilierung zu kombinieren. Geht theoretisch auch, aber die unten genannten Alternativen mögen meine SCSS-Ordnerstruktur nicht; während npm und o.g. PHP-Kompilierer damit klar kommen. Irgendwann ist irgendwie irgendwas immer blöd.

Vorab: Koala (veraltet und buggy!)

Das Programm Koala, ursprünglich Anlass für diesen Artikel, kann zwar beim Kompileren den so genannten Autoprefixer einschalten, den auch Bootstrap 4+ npm-basiert verwendet, kommt aber mit meiner SCSS-Ordnerstruktur nicht klar.

Und Koala ist leider mittlerweile total verbuggt: Wenn man versucht, eine bereits fertige CSS-Datei nur zu "prefixen", hängt sich Koala in Version 2.3.0/Windows 10 leider auf. MacOS-User melden Ähnliches auf GitHub. Das Projekt wurde eingestellt.

Vendor Prefixes/Browser Prefixes?

Es gibt CSS-Spezifikationen wie z.B. border-radius, mit dem man runde Rahmen-Ecken erzeugen kann. Nicht alle Browser in allen Versionen unterstützen die aber in dieser puristischen Form, sondern benötigen eventuell zusätzlich einen browserspezifischen Prefix in der CSS-Regel, damit sie das tun.

div.example
{
 -webkit-border-radius:8px;
 -moz-border-radius:8px;
 -ms-border-radius:8px;
 -o-border-radius:8px;
 border-radius:8px;
}

Das CSS-Beispiel unterstützt jetzt also auch viele (nicht alle) Uralt-Browser-Versionen. In der Realität wird man heutzutage für border-radius keine Prefixe mehr benötigen, außer man meint, tatsächlich "Browser-Leichen" bedienen zu müssen.

Autoprefixer?

Ein javascript-basiertes Programm, das via npm ausgeführt wird oder in einem Tool direkt integriert ist.

Autoprefixer durchforstet CSS-Dateien und bastelt die Browser-Prefixe wo nötig rein und/oder entfernt unnötige. Welche benötigt werden, entscheidet der Nutzer durch eine Konfigurations-Datei oder -Zeile, damit das CSS durch diese Aktion nicht zu sehr aufgeblasen wird. Wozu noch den Ineternet Explorer 8 oder 9 unterstützen? Auf diese Prefixe kann man normalerweise gut verzichten.

Browser-Filter: Konfigurations-Datei

Bootstrap 4.3.1 verwendet z.B. diese hier: .browserslistrc, die die InternetExplorer 10 und 11 unterstützt.

>= 1%
last 1 major version
not dead
Chrome >= 45
Firefox >= 38
Edge >= 12
Explorer >= 10
iOS >= 9
Safari >= 9
Android >= 4.4
Opera >= 30

Browser-Filter: Konfigurations-Zeile, die ich später verwende

Aus der obigen .browserlistrc wird (kommasepariert):

>= 1%, last 1 major version, not dead, Chrome >= 45, Firefox >= 38, Edge >= 12, Explorer >= 10, iOS >= 9, Safari >= 9, Android >= 4.4, Opera >= 30

Man muss darauf achten, dass am Anfang und Ende der Zeile keine Leerzeichen sind.

caniuse.com

Mithilfe der genialen Bibliotheken von caniuse.com entscheidet Autoprefixer, welche CSS-Regeln um Prefixes ergänzt werden müssen. Für Internet Explorer 10 sind das z.B. zahlreiche Prefixe -ms- für Bereiche, wo flex genutzt wird.

Autoprefixer-Online-Tool

Autoprefixer-CSS-Online-Tool. Das Eingabeformular für CSS-Code und Browser-Filter-Zeile

Gehe auf die Internetseite "Autoprefixer CSS online"
Trage zuerst die obige Konfigurationszeile in das Feld "Filter" ein. Macht man es später, hakelt die Seite gerne, wenn man schon viel CSS reinkopiert hat und man blickt nicht mehr durch, was gerade abgeht.
Klicke "Apply".
Kopiere das CSS deiner Datei ohne Prefixes in das linke Feld. Man kann auch komprimierte (minifizierte) CSS-Codes verwenden.
Nach mehr oder weniger Zeit erscheint rechts das bearbeitete CSS, was sich durch Klick auf den Knopf "Select Result" markieren lässt und anschließend kopieren.

Bei einem neuen Durchlauf, sollte man erst die CSS-Felder leeren und abwarten bis sie wirklich leer sind, da die Seite wie gesagt manchmal hakelig ist.

Ich konnte Dateien mit mehr als 15.000 Zeilen problemlos wandeln.

Alternative: Prepros für Windows/Linux/MacOS

Das Programm Prepros kann man sich im Internet in einer Trial-Version herunter laden. Diese hat keine Einschränkungen, poppt aber unregelmäßig einen "Kauf-Mich-Hinweis" auf.

Es kommt ebenso wie Koala nicht mit meiner SCSS-Ordner-Struktur klar, aber es kann meine fertigen CSS-Dateien durch den Autoprefixer schicken und das Ergebnis ist identisch mit dem des obigen Online-Tools.

Es kann weitere schicke Sachen, wie z.B. FTP und Überwachung der Dateien auf Änderungen. Brauch ich erst mal nicht und habe Sinnhaftigkeit nicht getestet.

Nutzung von Prepros nach Installation

Öffne Prepros durch Doppelklick auf den Desktop-Icon. Die Installation läuft übrigens ohne jegliche Erfolgsmeldungen ab.
Öffne in den Einstellungen den Punkt "Project Defaults" und gehe nach "Other Settings" > "Autoprefixer".
Trage in das Feld "Browsers" die Autoprefixer-Konfigurations-Zeile von oben ein.
Wechsele nach "Compiler Settings" und klicke auf "CSS".
Deaktiviere "Source Map".
Aktiviere zwei mal "Autoprefixer".
Schließe Konfiguration.
Ziehe den Ordner mit der CSS-Datei in den Arbeitsbereich von Prepros. Das erzeugt ein neues Projekt, das alle relevanten Dateien im Verzeichnis auflistet.
Klicke auf die zu bearbeitende CSS-Datei. Ich nehme bei mir die template.css, die ich vorher aus SCSS-Dateien zusammenkompiliert hatte. Rechts geht eine Sidebar auf, in der man "Process File" klickt.
Eine Datei "template-dist.css" wird erzeugt. Das ist die mit den Vendor-Prefixen. Die Originaldatei bleibt also unverändert. Kann man wohl auch konfigurieren, dass die gleich ersetzt wird.
Tipp für Joomla-Entwickler: Ich habe in meine Template-Konfiguration einfach einen Switch eingebaut, mit dem ich zwischen den beiden CSS-Dateien umschalten kann. So können beide Dateien ohne nervige Umbenennerei im selben Ordner bleiben.

Prepros-Konfiguration für "Nur autoprefixen"

Alternative: Visual Studio Code mit Erweiterung vscode-autoprefixer

Wer den Quellcode-Editor VS Code schon ein bisschen kennt, kann sich eine Erweiterung zuinstallieren, die einzelne, geöffnete CSS-Dateien "autoprefixen" kann; leider nicht ganze Ordner wie das Prepros kann.

Man kann die Erweiterung auch so konfigurieren, dass CSS-Dateien beim Speichern automatisch "geprefixt" werden. Mag ich aber generell nicht so gern.

So sind die Schritte zum händischen "Prefixen"

Getestet mit Windows 10 und VS Code 1.54.3:
Öffne VS Code.
Öffne im Menü View > Extensions

In VS Code die Ecke "Erweiterungen" öffnen

Suche dort nach vscode-autoprefixer.
Installiere diese Erweiterung.
Klicke das Drehschrauben-Symbol > Extension-Settings, um die Konfiguration zu öffnen oder gebe in den globalen Settings in das Suchfeld @ext:mrmlnc.vscode-autoprefixer ein.

Im Editor VS-Code zur Konfiguration der autoprefixer-Erweiterung gelangen.

Klicke Autoprefixer: Options > Edit in settings.json.

Öffne Datei settings.json zur Konfiguration der browserlist-Einstellungen der autoprefixer-Erweiterung

Am Ende der sich nun öffnenden JSON-Datei findet sich:

"autoprefixer.options": {
}

Hier setze ich meine Wunsch-Browser ein, die ich diesmal aus der Bootstrap-5-browserlistrc-Datei übernommen habe und angepasst habe (Kommas am Ende). Diese unterstützt IE10 und IE11 nicht mehr:

"autoprefixer.options": {
 "browsers": [
  ">= 0.5%",
  "last 2 major versions",
  "not dead",
  "Chrome >= 60",
  "Firefox >= 60",
  "Firefox ESR",
  "iOS >= 10",
  "Safari >= 10",
  "Android >= 6",
  "not Explorer <= 11"
 ]
}

Speichere die Datei settings.json.
Öffne eine CSS-Datei im Editor. Es darf auch eine minifizierte sein.
Drücke F1 >gebe ins Suchfeld "prefix" ein und wähle den Punkt Autoprefixer: Run. Man kann sich natürlich auch ein Tastaturkürzel dafür anlegen, wenn man es zukünftig einfacher haben will.
Große, minifizierte Dateien können etwas länger dauern. Geduld.
Speichere die Datei.

Beitrags-Schlagworte

CSS Browser Template Bootstrap SASS / SCSS

Kategorien: Hauptkategorie: Schnipsel; Kategorie: Sonstiges
Datum-Infos: Erstellt: 07.11.2019; Aktualisiert: 18.05.2021

Sonstige (Schnipsel)