Aktivieren Sie die kommenden CSS -Funktionen mit Postcs

Im vorherigen Artikel "PostCSS-Handbuch: Verbesserte Selektoren und Medienabfrage" werden in diesem Artikel weitere PostCSS-Plug-Ins untersucht, die die CSS-Funktionalität erweitern. Der vorherige Artikel konzentriert sich auf die Verbesserung der Struktur von Stilblättern durch Erweiterung von Selektoren und Medienabfragen, während sich dieser Artikel auf die Implementierung neuer Eigenschaften und Werte in der kommenden Spezifikation konzentriert. Die in diesem Artikel beschriebenen Plugins implementieren verschiedene Funktionen, die effektiv zusammen oder einzeln entsprechend Ihren Anforderungen verwendet werden können.

Beginnen wir mit meinem Lieblings -Plugin.

Schlüsselpunkte

• POSTCSS-Plug-In kann verwendet werden, um neue Eigenschaften und Werte in der kommenden CSS-Spezifikation zu implementieren und die Funktionalität von CSS effektiv zu erweitern. Diese Plugins können zusammen oder einzeln entsprechend den Anforderungen des Entwicklers verwendet werden.
• postCSS ermöglicht es Entwicklern, zukünftige CSS -Funktionen zu verwenden, bevor der Browser offiziell implementiert wird. Das Plugin postcss-initial fügt Unterstützung für den initial -Wergungs- und all: initial -Kombination hinzu, und das postcss-autoreset -Plugin setzt automatisch den Stil der Elemente auf Blockebene und Komponentenebene zurück.
Das Plugin
• postcss-color-function implementiert eine neue color() -Funktion, mit der Entwickler eine oder mehrere "Farbanpassung" -Funktionen verwenden können, um die zugrunde liegende Farbe zu ändern. Das postcss-color-hwb -Plugin implementiert eine neue hwb() -Funktion, um die HWB -Farbe zu definieren. postcss-color-gray gray() postCSS bietet eine vielversprechende Gelegenheit, neue CSS -Funktionen frühzeitig anzuwenden und zu bewerten. Es wird den Entwicklern empfohlen, Stilblätter aus einer völlig neuen Perspektive zu schreiben und verfügbare Funktionen aufzulisten, die die Produktivität steigern können.
Wählen Sie den Reset auf die nächste Stufe

CSS3 führt zwei nette Funktionen ein:

Wert und

Attribut. Der Wert initial wird mit den Werten all und initial verwendet, sodass Sie die Eigenschaft auf ihren ursprünglichen Wert zurücksetzen können. Das Attribut inherit wird als Kurzmerkmal verwendet, das alle Attribute in einen dieser drei Zustände zurücksetzt. Während beide an sich selbst interessant sind, wenn sie zusammen verwendet werden, können Sie alle Stile eines bestimmten Elements schnell zurücksetzen und verhindern, dass die Stile des übergeordneten Elements der Seite erbt werden. Dies ist ein weiterer Schritt beim Schreiben modularer CSS! unset all Leider unterstützt der IE diese beiden Funktionen immer noch nicht. Wie Sie vielleicht vermutet haben, gibt es ein Plugin, das dieses Problem löst.

Unterstützung für

-Werte und postcss-initial -Kombinationen hinzugefügt. So funktioniert es: initial all: initial

kompiliert zu:

.article {
  font-size: initial;
  color: initial;
  padding: initial;
  margin: initial;
}

standardmäßig behält es die ursprünglichen Eigenschaften sowie

.article {
  font-size: medium;
  font-size: initial;
  color: #000;
  color: initial;
  padding: 0;
  padding: initial;
  margin: 0;
  margin: initial;
}

für native Browser bei, die diese Funktion unterstützen.

initial Im Gegenzug wird das Attribut

in eine lange Liste von Reset -Attributen konvertiert.

all

wird konvertiert in:

.container {
  all: initial;
}

(Um den Raum zu willen, wurde der erweiterte Code nach

.container {
  /*  此处省略大量重置属性  */
  all: initial;
}

weggelassen)

Wenn Sie BEM oder Anzug verwenden, funktioniert dieses Plugin gut mit postcss-autoreset, wodurch die Stile von Block- und Komponentenebene automatisch zurückgesetzt werden.

benutzerdefinierte Attribute

Wenn wir mit Layouts arbeiten, müssen wir oft einige Werte im Stylesheet teilen. Beispielsweise kann Ihre Markenfarbe als Hintergrund für eine Schaltfläche, eine Textfarbe für einen Link oder einen Rand für einen Textblock verwendet werden. Um dies zu erreichen, müssen wir es derzeit mehrmals an jedem Ort wiederholen, an dem die Farbe verwendet wird. Diese Wiederholung macht es umständlich, die Palette bei der Änderung der Farben in der Anwendung konsistent zu halten.

CSS -Präprozessoren wie weniger und SASS haben dieses Problem mit Variablen gelöst. Glücklicherweise arbeitet W3C an einem ähnlichen Konzept, das als benutzerdefinierte Eigenschaften bezeichnet wird. Obwohl das gleiche Problem gelöst ist, funktionieren sie unterschiedlich als Variablen im Präprozessor. Weniger und SASS -Variablen werden zur Kompilierungszeit analysiert. Wenn Sie weniger oder SASS zu CSS kompilieren, sucht der Compiler nach variablen Deklarationen, die dem aktuellen Kompilierungsbereich entsprechen, und ersetzt jede Instanz durch den entsprechenden Wert. Dies bedeutet, dass der analysierte Wert einer Variablen vollständig davon abhängt, wo er im Code verwendet wird. Benutzerdefinierte Eigenschaften werden wiederum für Elemente im DOM definiert und können nur durch ihre Kinderelemente zugegriffen werden. Dies bedeutet, dass der Wert der Variablen von der Position des Elements im DOM abhängt und nur zur Laufzeit analysiert werden kann.

Sie sollten bisher die Stirnrunzeln oder Hebung Ihrer Augenbrauen. Wenn der Wert einer Variablen nur zur Laufzeit bekannt ist, wie analysiert das POSTCSS -Plugin ihn? Die Wahrheit ist, es kann nicht. Es bietet jedoch eine Möglichkeit, diese Teilmenge der Funktionalität zu verwenden. Wenn wir alle benutzerdefinierten Eigenschaften im Element :root definieren, stehen diese Eigenschaften für alle Elemente auf der Seite zur Verfügung. Dies bedeutet, dass wir sie zur Kompilierungszeit analysieren können.

Hier ist ein einfaches Beispiel dafür, wie es aussehen könnte:

.article {
  font-size: initial;
  color: initial;
  padding: initial;
  margin: initial;
}

wird kompilieren zu:

.article {
  font-size: medium;
  font-size: initial;
  color: #000;
  color: initial;
  padding: 0;
  padding: initial;
  margin: 0;
  margin: initial;
}

Beachten Sie, dass die Variable --font-size undefiniert ist und daher durch einen Fallback -Wert von 20px ersetzt wird. Hier ist es wichtig, alle benutzerdefinierten Eigenschaften innerhalb von :root zu halten. Eigenschaften, die an anderer Stelle definiert sind, werden ignoriert, da das Plugin sie nicht angemessen verarbeiten kann. Sie können hier beginnen und die Verwendung erweitern, wenn mehr Browser anfangen, sie zu unterstützen. Chrome hat sie seit Version 49 unterstützt.

logische Eigenschaften

Wenn Sie jemals eine internationale Website entwickelt haben, die sich mit unterschiedlichen Kulturen für Schreibrichtlinien erstreckt, wissen Sie, was es braucht, um mehrere Versionen der Schnittstelle zu erhalten (z. B. von links nach rechts oder rechts nach links). Um diesen Bedarf zu erfüllen, stellte W3C ein neues Konzept logischer Attribute vor. Eine Möglichkeit, über die physische Richtung nachzudenken (wie rechts oder links), sondern die logische Richtung - starten Sie und enden. Die Spezifikation ist noch im Gange, aber Sie können einige davon bereits mit dem postcss-logical-props -Plugin versuchen.

Es unterstützt die Erzeugung von Website-Versionen von links nach rechts und nach rechts nach links unter Verwendung bestimmter logischer Eigenschaften wie border-block-start und border-block-end, offset-block-start und offset-block-end. Diese Eigenschaften werden in ihre linken oder rechten Alternativen zusammengestellt. Sie können das Plugin anweisen, die LTR- und RTL -Versionen des Stylesheet zu kompilieren und sie dann in die Anwendung zu wechseln, wenn der Benutzer die Sprache ändert.

Zum Beispiel, wenn Sie das folgende CSS haben:

.article {
  font-size: initial;
  color: initial;
  padding: initial;
  margin: initial;
}

Das Aufrufen des Plugins mit Option { dir: 'LTR' } erzeugt die folgenden Ergebnisse:

.article {
  font-size: medium;
  font-size: initial;
  color: #000;
  color: initial;
  padding: 0;
  padding: initial;
  margin: 0;
  margin: initial;
}

Wenn Sie { dir: 'RTL' } verwenden, erhalten Sie ein Spiegelbild:

.container {
  all: initial;
}

Neue Farbfunktion

postCSS bietet einen kompletten Satz von Plugins, die neue Funktionen für den Umgang mit Farben bieten.

Farbanpassung

Das Plugin

postcss-color-function implementiert die neue color() -Funktion. Mit dieser Funktion können Sie eine oder mehrere "Farbanpassungen" -Funktionen verwenden, um die zugrunde liegende Farbe zu ändern. Jeder Farbanmieter kann Farben auf eine bestimmte Weise manipulieren.

Hier sind einige Beispiele für die Verwendung:

.container {
  /*  此处省略大量重置属性  */
  all: initial;
}

wird zu der folgenden Farbe kompilieren:

:root {
  --text-color: red;
  --background: blue;
}

h1 {
  color: var(--text-color);
  font-size: var(--font-size, 20px);
}
button {
  background-color: var(--background);
}

Die vollständige Liste der Farbspezifikationen finden Sie in der Spezifikation

. Dieses Plugin kann sehr effizient mit benutzerdefinierten Eigenschaften verwendet werden. Sie können eine Reihe von Grundfarben definieren und andere Farben basierend darauf berechnen. Auf diese Weise wird der Rest der Palette entsprechend aktualisiert, wenn Sie sich entscheiden, die Grundfarbe zu ändern.

HWB -Farbnotation

HWB steht für Hue-Whitess-Blackness, was eine alternative Möglichkeit ist, Farbe zu definieren. Es verwendet Farbtonwerte von 0 bis 360, um die Farbe zu beschreiben, und fügt dann 0% bis 100% Weiß und Schwärze hinzu. Diese Notation ähnelt HSL und ist leichter zu verstehen als RGB. Das postcss-color-hwb -Gladin implementiert eine neue hwb() -Funktion, um HWB -Farben zu definieren. Mehrere Beispiele:

h1 {
  color: red;
  font-size: 20px;
}
button {
  background-color: blue;
}

Die folgenden Farben werden erstellt:

.text {
  border-block-start: 1px solid blue;
  text-align: start;
  padding-block-end: 10px;
  margin-block-start: 20px;
}

Gray () Funktion

Das CSS -Farbmodul

CSS führt auch eine bequeme gray() -Funktion ein. Es kann verwendet werden, um Grau zu erzeugen, ohne redundante Informationen wie alle drei Kanäle in RGB -Farben anzugeben. postcss-color-gray Das Plugin implementiert die Polyfill dieser Funktion und ist sehr einfach zu verwenden:

.text {
  border-left: 1px solid blue;
  text-align: left;
  padding-right: 10px;
  margin-left: 20px;
}

Der obige Code erzeugt Grau aus verschiedenen Farbtönen:

.text {
  border-right: 1px solid blue;
  text-align: right;
  padding-left: 10px;
  margin-right: 20px;
}

Zusammenfassung

Dies ist keineswegs eine vollständige Liste aller verfügbaren CSS -Plugins, sondern nur eine Auswahl für einige interessanere Plugins. Sie können mehr Plugins auf Postcs.Parts erkunden.

CSS boomt und Postcss boomt. Ja, wir warten alle gespannt auf die native Unterstützung für diese neuen Funktionen des Browsers, aber PostCSS bietet uns eine vielversprechende Gelegenheit, diese Funktionen frühzeitig zu übernehmen und zu bewerten. Der allgemeine Rat ist hier, um zu versuchen, von der vertrauten Verwendung von Präprozessoren zurückzutreten und sich mit den Schreibstylesheets aus einer neuen Perspektive zu befassen. Versuchen Sie, die verfügbaren Funktionen aufzulisten, die Ihre Produktivität steigern und in Ihrem Workflow verwenden können. Sie werden bald erkennen, dass dies genau die Funktionen sind, die Sie fehlten.

häufig gestellte Fragen zu den kommenden CSS -Funktionen mit postcss

aktivieren

(Der FAQ-Teil wird hier weggelassen, weil der Artikel zu lang ist und nicht mit dem pseudooriginalen Ziel übereinstimmt. Der FAQ-Teil kann nach Bedarf neu organisiert und neu geschrieben werden, aber die ursprüngliche Absicht bleibt unverändert.)

Das obige ist der detaillierte Inhalt vonAktivieren Sie die kommenden CSS -Funktionen mit Postcs. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!