Share
Im letzten Tutorial haben wir unseren Abschnitt "Schnellstart" dieser Serie abgeschlossen. Jetzt können wir PostCSS verwenden, um Stylesheets zu erstellen, die verschiedene Arten von Plugins für verschiedene Zwecke verwenden.
In diesem Lernprogramm verwenden wir PostCSS, um ein Stylesheet zu erstellen, das auf Cross-Browser-Kompatibilität ausgelegt ist. Wir werden:
Accentsconagua
wird sich verändern EigentumLass uns anfangen!
Als Erstes müssen Sie Ihr Projekt so einrichten, dass es entweder Gulp oder Grunt verwendet, abhängig von Ihren Vorlieben. Wenn Sie für das eine oder andere nicht bereits eine Präferenz haben, empfehle ich die Verwendung von Gulp, da Sie weniger Code benötigen, um dieselben Ziele zu erreichen.
Wie Sie Gulp- oder Grunt-Projekte für PostCSS einrichten, erfahren Sie in den vorherigen Tutorials
beziehungsweise.
Wenn Sie Ihr Projekt jedoch nicht manuell einrichten möchten, können Sie die an dieses Tutorial angehängten Quelldateien herunterladen und entweder das bereitgestellte Gulp- oder Grunt-Starterprojekt in einen leeren Projektordner extrahieren.
Führen Sie dann den Befehl mit einer Terminal- oder Eingabeaufforderung auf den Ordner aus npm installieren.
Nachdem Sie nun Ihr leeres Gulp- oder Grunt + PostCSS-Projekt vorbereitet haben, müssen Sie die Plugins installieren, die Sie in diesem Lernprogramm verwenden werden.
Wir werden einige Plugins installieren. Statt sie einzeln zu installieren, wie in den „Quickstart Guides“ für Gulp und Grunt, installieren wir sie alle mit einem einzigen Befehl.
Unabhängig davon, ob Sie Gulp oder Grunt verwenden, führen Sie den folgenden Befehl in Ihrem Projektordner aus, um die verwendeten Plugins zu installieren:
npm install autoprefixer postcss-color-rgba-fallback postcss-deckkraft postcss-pseudoelemente postcss-vmin pixrem postcss-will-change --save-dev
Nun sind die Plugins installiert, laden wir sie in Ihr Projekt.
Wenn Sie Gulp verwenden, fügen Sie diese Variablen unter den bereits in der Datei vorhandenen Variablen hinzu:
var autoprefixer = required ('autoprefixer'); var color_rgba_fallback = required ('postcss-color-rgba-fallback'); var opacity = requir ('postcss-opacity'); var pseudoelements = required ('postcss-pseudoelements'); var vmin = required ('postcss-vmin'); var pixrem = required ('pixrem'); var will_change = required ('postcss-will-change');Fügen Sie nun jeden dieser neuen Variablennamen in Ihre hinzu Prozessoren Array:
var-Prozessoren = [will_change, autoprefixer, color_rgba_fallback, Opazität, Pseudoelemente, vmin, pixrem];
Führen Sie einen kurzen Test durch, indem Sie den Befehl ausführen Schluck Css Überprüfen Sie dann, ob im Ordner "dest" Ihres Projekts eine neue Datei "style.css" angezeigt wurde.
Wenn Sie Grunt verwenden, aktualisieren Sie die Prozessoren Objekt, das unter dem verschachtelt ist Optionen Objekt zu Folgendem:
Prozessoren: [erfordern ('postcss-will-change') (), erfordern ('autoprefixer') (), erfordern ('postcss-color-rgba-fallback') (), erfordern ('postcss-opacity') () , required ('postcss-pseudoelements') (), requir ('postcss-vmin') (), requir ('pixrem') ()]Führen Sie eine schnelle Testkompilierung aus, indem Sie den Befehl ausführen grunzen postcss Überprüfen Sie dann, ob der Ordner "dest" Ihres Projekts jetzt eine neue Datei "style.css" enthält.
Sie haben jetzt alle Plugins installiert, die für dieses Lernprogramm erforderlich sind, und Sie können fortfahren, zu erfahren, wie Sie diese verwenden können, um die Cross-Browser-Kompatibilität Ihrer Stylesheets zu verbessern.
Einige der Maßnahmen zur Cross-Browser-Kompatibilität, die wir behandeln, sind nur für bestimmte Anwendungsfälle erforderlich. Automatisierte Herstellerpräfixe ist dagegen etwas, was ich vorschlagen sollte jeden Projekt über das von Andrey Sitnik erstellte Autoprefixer-Plugin.
Es kann schwierig sein, zu jeder Zeit einen Überblick darüber zu erhalten, für welche Eigenschaften welche Herstellerpräfixe erforderlich sind. Verwenden Sie Autoprefixer als Teil jedes Projekts. Dabei wird der Code mit den Daten von CanIUse.com verglichen und bei Bedarf Herstellerpräfixe hinzugefügt, ohne dass Sie darüber nachdenken müssen.
Lassen Sie uns einen kleinen Test machen, um Autoprefixer in Aktion zu sehen. Fügen Sie der Datei „src / style.css“ Ihres Projekts den folgenden Animations- und Flexbox-Code hinzu:
@keyframes animationExample from width: 0; bis Breite: 100%; .animateThis animation: animationExample 2s; Anzeige: Flex;
Lauf Schluck Css oder grunzen postcss Um Ihre Datei zu kompilieren, sollte Ihre "dest / style.css" nun den vom Hersteller angegebenen Code enthalten:
@ -webkit-keyframes animationExample from width: 0; bis Breite: 100%; @keyframes animationExample von width: 0; bis Breite: 100%; .animateThis -webkit-animation: animationExample 2s; Animation: AnimationBeispiel 2s; Anzeige: -webkit-box; Anzeige: -webkit-flex; Anzeige: -ms-flexbox; Anzeige: Flex;
Wie Sie sehen, wurden automatisch Herstellerpräfixe hinzugefügt, die von den von CanIUse.com bereitgestellten Daten zu Animation und Flexbox vorgegeben werden.
Autoprefixer verwendet Browserlist, um zu ermitteln, für welche Browserversionen Unterstützung hinzugefügt wird. In der Standardeinstellung werden Herstellerpräfixe wie folgt angewendet:
Das oben durchgeführte Beispiel wurde unter den Standardeinstellungen von Autoprefixer kompiliert. Dies bedeutete, dass Unterstützung für IE10 und Safari 8 enthalten war -Frau- und -Webkit- Präfixe, die sie benötigen Animation und Flexbox wurden automatisch eingefügt.
IE11 und Safari 9 benötigen diese Präfixe jedoch nicht. Wenn Sie Ihre Browserlistenkonfiguration so einstellen, dass sie nur IE11 + und Safari 9+ unterstützt, werden diese Präfixe nicht mehr hinzugefügt.
Probieren Sie dies aus, indem Sie ein Browser Einstellung zu Autoprefixer in Ihrer Gulpfile oder Gruntfile wie folgt:
// Im Gulpfile-Array für Prozessoren: autoprefixer (browsers: 'safari> = 9, dh> = 11'), // im Gruntfile-Array für Prozessoren: required ('autoprefixer') (browser: [ 'Safari> = 9, dh> = 11']),Wenn Sie jetzt Ihr CSS neu kompilieren, werden Sie feststellen, dass es keinen Unterschied zwischen dem ursprünglichen und dem kompilierten Code gibt. Dies liegt daran, dass keine Unterstützung für Safari 8 oder IE10 angefordert wurde und keine Herstellerpräfixe hinzugefügt wurden.
Das wird sich verändern Diese Eigenschaft wird verwendet, um einen Browser vorab mitzuteilen, dass bestimmte Elemente Ihres Designs animiert werden. Dadurch kann der Browser den Rendering-Prozess optimieren und Verzögerungen und Flicker verhindern. Derzeit wird diese Eigenschaft jedoch nicht von IE / Edge, Safari oder Opera Mini unterstützt.
Das Postcss-Will-Change-Plugin, das ebenfalls von Andrey Sitnik erstellt wurde, fügt einen Fallback hinzu, der diesen Browsern dabei hilft, das Rendern zu verbessern, auch wenn sie nicht so effizient sind, wie sie es könnten, wenn sie unterstützt würden wird sich verändern. Dies geschieht durch Hinzufügen von Sicht auf die Rückseite Diese Eigenschaft löst die Erstellung eines Compositor-Layers aus, der von der GPU verarbeitet wird.
Fügen Sie diesen Code beispielsweise Ihrer Datei "src / style.css" hinzu:
.thisWillChange will-change: transform;
Kompilieren Sie Ihr Stylesheet und Sie sollten den Fallback in Ihrer Datei "dest / style.css" sehen:
.thisWillChange Hintergrundsichtbarkeit: ausgeblendet; will-change: umwandeln;
Hinweis: Dieses Plugin sollte geladen sein Vor Autoprefixer in Ihrer Gulpfile / Gruntfile. Dies ermöglicht Autoprefixer das Hinzufügen von Herstellerpräfixen zu Sicht auf die Rückseite Eigentum wie so:
/ * Fallback mit Herstellerpräfixen * / .thisWillChange -webkit-backface-visible: hidden; Sicht nach hinten: versteckt; will-change: umwandeln;
Dank verbesserter Browserversionen von Microsoft und großer Gruppen, die wegweisend für die Unterstützung für alte IE sind, kommen wir immer näher an die Notwendigkeit heran, nicht ständig Rückschläge und Problemumgehungen für problematische ältere Browser in Betracht zu ziehen. Microsoft selbst wird 2016 die Unterstützung für IE8 einstellen. Bootstrap 4 alpha wurde kürzlich veröffentlicht und die Unterstützung für IE8 wurde eingestellt. Google hat die Unterstützung für IE8 im Jahr 2012 eingestellt und die Unterstützung für IE9 im Jahr 2013 eingestellt.
Alles in allem muss jedes Projekt am Ende des Tages von Fall zu Fall beurteilt werden. Wenn Sie auf eine Zielgruppe mit hohen Nutzungsraten von älteren Browsern abzielen, haben Sie möglicherweise keine andere Wahl, als Ihr Bestes zu geben um sie zu unterstützen. Wenn dies der Fall ist, können die folgenden Plugins Ihnen helfen, diesen Prozess weniger schmerzhaft zu gestalten.
rgba () FarbrückschlägeIE8 hat keine Unterstützung für rgba () Farben, so dass das Postcss-Color-Rgba-Fallback-Plugin von Guillaume Demesy als Fallback eine flache Hexadezimalfarbe hinzufügt.
Fügen Sie diesen Code beispielsweise Ihrer Datei "src / style.css" hinzu:
.rgbaFallback Hintergrund: rgba (0,0,0,0,5);
Kompilieren Sie, und Sie sollten den Hexcode zurückfallen sehen, der in Ihre Datei „dest / style.css“ eingefügt wurde:
.rgbaFallback background: # 000000; Hintergrund: rgba (0,0,0,0,5);
Opazität FallbacksIE8 kann nicht damit umgehen Opazität Eigenschaft, so dass das Postcss-Opacity-Plugin von Vincent De Oliveira einen IE-spezifischen Filter hinzufügt, um den gleichen Effekt zu erzielen.
Fügen Sie diesen Code Ihrem Quell-Stylesheet hinzu:
.OpacityFallback Opazität: 0,5;
Nach dem Kompilieren sollten Sie das entsprechende sehen -ms-filter Fallback hinzugefügt:
.OpacityFallback Opazität: 0,5; -ms-filter: "Progid: DXImageTransform.Microsoft.Alpha (Opacity = 50)";
:: in : auf Pseudo-ElementenEs gilt als bewährte Methode bei der Generierung von Pseudo-Elemente sowie .Element :: vor eine Doppelpunktnotation verwenden ::. Dies soll helfen, sie von Pseudo zu unterscheiden-Klassen sowie .Element: schweben die sollte eine einzelne Doppelpunktnotation verwenden :.
IE8 unterstützt jedoch nicht die Doppelpunktnotation :: Um Pseudo-Elemente zu erstellen, wird nur ein einzelner Doppelpunkt unterstützt :. Mit dem Postcss-Pseudoelements-Plugin von Sven Tschui können Sie nach bewährten Methoden kodieren und die Notation automatisch ändern.
Fügen Sie das folgende Doppel hinzu :: Notationscode:
.Pseudoelement :: before content: ";
Kompilieren Sie Ihre Datei und Sie sollten sehen, dass sie auf die Single reduziert wurde : Notation:
.Pseudoelement: vor content: ";
Durch die Kodierung bewährter Verfahren und die Verwendung dieses Plugins können Sie, wenn der IE8 vollständig zurückgezogen ist, Ihr CSS ohne das Plugin erneut verarbeiten und die richtige Syntax verwenden.
vm Fallback für vmin In IE9 die relative Ansicht des Ansichtsfensters vmin wird nicht unterstützt, sondern verwendet die entsprechende Einheit vm. Wenn Sie sich für IE9 interessieren, wird das postcss-vmin-Plugin von Vincent De Oliveira hinzugefügt vm Einheiten als Fallback.
Fügen Sie diesen Code zu Ihrer Datei "src / style.css" hinzu:
.vmFallback width: 50vmin;
Rekompilieren und der resultierende Code sollte die vm Rückfall der Einheiten hinzugefügt in:
.vmFallback width: 50vm; Breite: 50 Vmin;
px Fallback für rem EinheitenIE8 unterstützt nicht rem Einheiten, und sowohl in IE9 als auch in IE10 werden sie nicht unterstützt Pseudo-Elemente und Schriftart Abkürzungserklärung. Mit dem Node-Pixrem-Plugin von Vincent De Oliveira und Rob Wierzbowski können Sie es haben px basierte Fallbacks automatisch hinzugefügt, wo immer Sie sie verwenden rem Einheiten.
Fügen Sie diesen Code Ihrem Quell-Stylesheet hinzu:
.remFallback height: 10rem; Schrift: 2rem Arial; .remFallback :: before content: "; Zeilenhöhe: 1rem;
Kompilieren Sie neu und Sie sollten alle entsprechenden Informationen sehen px Fallbacks hinzugefügt:
.remFallback height: 160px; Höhe: 10rem; Schrift: 32px Arial; Schrift: 2rem Arial; .remFallback: before content: "; Zeilenhöhe: 16px; Zeilenhöhe: 1rem;
Um zusammenzufassen, was wir oben beschrieben haben:
Als Nächstes in unserer PostCSS Deep Dive-Serie finden Sie ein Tutorial, wie Sie Plugins zur Minimierung und Optimierung von CSS verwenden. Wir werden Inlining behandeln @einführen Dateien, kombinieren Sie Medienabfragen, entfernen Sie Leerraum und mehrere weitere Methoden, um Ihre Stylesheets so rational wie möglich zu gestalten. Wir sehen uns dort!
