Im besten Fall kompiliert man SCSS mithilfe von Konsole-Tools wie npm, sagen Nerds. Ich habe diese Möglichkeit ohne Riesenaufwand nicht. Ich verwende einen PHP-SCSS-Compiler, basierend auf leafo/scssphp, der mir das CSS on-the-fly erstellt beim(!) Bearbeiten von Webseiten. Crux: Die Vendor-Prefix-Mixins wurden in BS4 entfernt. Der PHP-Compiler kann die Browser-Prefixe also auch nicht einbauen.

Das Programm Koala kann zwar beim Kompileren den so genannten Autoprefixer einschalten, den auch Bootstrap 4 jetzt nutzt, kommt aber mit meiner SCSS-Ordnerstruktur nicht klar. 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.

Also fress ich eben so lange Fliegen bis ich für obige Probleme eine praktikablere Lösung gefunden habe, die Zeit kostet, die ich nicht habe...

Vendor-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. Aber, eh klar, in der modernen Nerds-Welt nicht direkt genutzt werden kann. Egal. Jedenfalls durchforstet Autoprefixer die 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?

Browser-Filter: Konfigurations-Datei

Bootstrap 4.3.1 verwendet z.B. diese hier: .browserslistrc

>= 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
Bild in größter Auflösung öffnen (Popup)
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.

Es kommt ebenso wie Koala nicht mit meiner SCSS-Ordner-Struktur klar, aber es kann fertige 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.
Prepros-Konfiguration für "Nur autoprefixen"
Bild in größter Auflösung öffnen (Popup)
Prepros-Konfiguration für "Nur autoprefixen"