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!