Stas Melnikov, der Autor des HTML HTML Layout-Kurses, sprach über die Nuancen, die die Arbeit mit benutzerdefinierten CSS-Eigenschaften erschweren können.Syntaxregeln für benutzerdefinierte Eigenschaftsnamen
Wir sind daran gewöhnt, dass bei Inline-CSS-Eigenschaften die Groß- und Kleinschreibung nicht berücksichtigt wird. Daher führen die folgenden Methoden zum Deklarieren einer Randeigenschaft zum gleichen Ergebnis:
button { BORDER: 2px solid
Bei benutzerdefinierten Eigenschaften wird dagegen zwischen Groß- und Kleinschreibung unterschieden. Im folgenden Beispiel werden zwei verschiedene benutzerdefinierte Eigenschaften erstellt:
button { --NETOLOGY-BRAND-COLOR:
Jetzt wurde der Rahmen zu # 800080 (lila) und der Text zu # 27ae60 (grün).
Gültige Werte für benutzerdefinierte Eigenschaften
Für eine reguläre CSS-Eigenschaft können Sie nur die vom Standard zugelassenen Werte festlegen. Gemäß dem benutzerdefinierten Eigenschaftsstandard kann jeder vorhandene gültige CSS-Wert als Wert verwendet werden. Zum Beispiel wie bei allen folgenden benutzerdefinierten Eigenschaften:
.element::before { --color: rgba(0, 0, 0, 1); --hex:
Stellen Sie zum Beispiel den Rahmen mit der Farbe # 800080 für die Schaltfläche ein:
button { --netologyBrandColor:
Zusätzlich zu Standardwerten können Sie eine benutzerdefinierte Eigenschaft als Wert für eine andere festlegen.
button { --netologyBrandColor:
Das Ergebnis unterscheidet sich nicht vom vorherigen, und die Schaltfläche hat immer noch einen Rahmen mit der Farbe # 800080.
Wenn die benutzerdefinierte Eigenschaft
--netologyBrandColor einen falschen Wert für die Eigenschaft
border-color , z. B. 18px, wird der Rahmen schwarz.
button { --netologyBrandColor: 18px; --buttonBorderColor: var(--netologyBrandColor); border-width: 2px; border-style: solid; border-color: var(--buttonBorderColor); }
Tatsache ist, dass der Browser, bevor er den Wert der Benutzereigenschaft für die integrierte Eigenschaft anwendet, diese auf Richtigkeit überprüft. Wenn der Wert für die Inline-Eigenschaft verfügbar ist, wird er vom Browser angewendet. Wenn nicht, wird der Standardwert für die integrierte Eigenschaft festgelegt.
In unserem Fall ist 18px ein falscher Wert für die integrierte Eigenschaft für die Rahmenfarbe. Daher legt der Browser den Standardwert fest, d. H.
currentColor . Dies lässt sich sehr einfach überprüfen, indem Sie die
color auf # 800080 setzen:
button { --netologyBrandColor: 18px; --buttonBorderColor: var(--netologyBrandColor); border-width: 2px; border-style: solid; border-color: var(--buttonBorderColor); color:
Wie Sie sehen können, hat der Browser den Wert # 800080 für den Frame angewendet. In diesem Beispiel habe ich die vollständige Syntax verwendet, um den Frame festzulegen. Aber wir können eine kurze verwenden, nämlich die Randeigenschaft.
button { --netologyBrandColor: 18px; --buttonBorderColor: var(--netologyBrandColor); border: 2px solid var(--buttonBorderColor); color:
Hier warten wir auf eine weitere Nuance. Der Standard enthält einen separaten Abschnitt, in dem das Verhalten benutzerdefinierter Eigenschaften in einer solchen Situation beschrieben wird. Wenn eine Benutzereigenschaft einen falschen Wert für eine Inline-Eigenschaft hat, ist diese Benutzereigenschaft ungültig, sodass der Browser die Inline-Eigenschaft ignoriert.
In unserem Beispiel hat die integrierte
--buttonBorderColor einen der Werte, die auf die benutzerdefinierte Eigenschaft
--buttonBorderColor mit einem ungültigen Wert von 18 Pixel festgelegt sind. Gemäß dem beschriebenen Algorithmus ignorierte der Browser die Eigenschaft
border einfach, sodass das Element den Rahmen verlor.
Der Standardwert für benutzerdefinierte Eigenschaften
Beim Betrachten des
var Funktionsbeispiels haben wir nur einen Parameter verwendet - den Namen der benutzerdefinierten Eigenschaft.
button { --netologyBrandColor:
Abgesehen davon kann die
var Funktion den zweiten akzeptieren - den Standardwert. Um einen Standardwert zu deklarieren, müssen Sie nach dem Namen der benutzerdefinierten Eigenschaft ein Komma setzen und den Wert selbst schreiben.
Wenn der Browser feststellt, dass der Entwickler keinen Wert für die benutzerdefinierte Eigenschaft deklariert hat, verwendet er den Standardwert. Der Wert # 800080 (lila) für eine benutzerdefinierte Eigenschaft lautet beispielsweise
--netologyBrandColor .
button { border: 2px solid var(--netologyBrandColor,
Wir sehen, wie der Rahmen und der Text lila werden. Wenn Sie den Knopf bewegen, werden sie grün. Dies zeigt an, dass der Browser den Wert # 27ae60 auf die Benutzereigenschaft angewendet hat, wodurch der Standardwert ersetzt wurde.
Dies sind jedoch nicht alle Möglichkeiten der
var Funktion. Im vorherigen Beispiel wird die benutzerdefinierte Eigenschaft
--netologyBrandColor zweimal verwendet, daher habe ich den Standardwert zweimal festgelegt.
Aber es kann anders gemacht werden. Mit der
var Funktion können Sie eine andere
var Funktion übergeben, sodass Sie eine andere benutzerdefinierte Eigenschaft als Standardwert festlegen können. Ich werde das vorherige Beispiel mit der benutzerdefinierten Eigenschaft
--defaultButtonColor :
button { --defaultButtonColor:
Äußerlich wird sich das Ergebnis nicht ändern. Um den Standardwert zu ändern, müssen Sie dies jetzt nur an einer Stelle und nicht wie zuvor an mehreren Stellen tun.
Vererbung von benutzerdefinierten Eigenschaften
CSS verfügt über einen Vererbungsmechanismus, mit dem Elemente Eigenschaften von übergeordneten Elementen erben können. In dieser Hinsicht unterscheiden sich benutzerdefinierte Eigenschaften nicht von ihnen. Als Beispiel schreibe ich den Code, in dem die benutzerdefinierte Eigenschaft
--netologyBrandColor vom übergeordneten
body Element geerbt wird.
body { --netologyBrandColor:
Wenn Sie sich den Inspektor ansehen, sehen Sie die Inschrift „Vom Körper geerbt“, die uns zeigt, dass die benutzerdefinierte Eigenschaft aus dem
body . Wenn wir jedoch die benutzerdefinierte Eigenschaft
--netologyBrandColor für das
button hinzufügen, wird die Eigenschaft aus dem
body Element bereits überschrieben.
body { --netologyBrandColor:
Der Inspektor zeigt, dass die benutzerdefinierte Eigenschaft
--netologyBrandColor button die Eigenschaft
--netologyBrandColor , die wir für das
body Element angegeben haben.
Globale Werte
Im CSS-Standard haben benutzerdefinierte Eigenschaften eine spezielle Stammpseudoklasse
root , mit der Sie benutzerdefinierte Eigenschaften angeben können, die für das Stammelement des Dokuments gelten. Zum Beispiel in einem HTML-Dokument für ein
html Element.
:root { --netologyBrandColor:
Im Inspektor können wir sehen, dass die deklarierte benutzerdefinierte Eigenschaft auf das HTML-Element angewendet wird. Zusätzlich zum HTML-Dokument funktioniert die
root Pseudoklasse jedoch in SVG-Dokumenten. Zum Beispiel werde ich benutzerdefinierte Eigenschaften im
style Tag deklarieren.
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 26 28" width="50" height="50"> <style> :root{ --iconColor:
Und hier sehen wir, dass die Wurzelpseudoklasse zum SVG-Wurzelelement hinzugefügt wurde. Dementsprechend beweist dies, dass die Root-Pseudoklasse nicht nur für das
html Tag gilt, sondern für jedes Root-Element.
Fazit
In diesem Artikel sind wir auf Fallstricke von benutzerdefinierten Eigenschaften gestoßen, die verwirrend sein können. Und dementsprechend können wir beginnen, sie zu verwenden. Daher werde ich im nächsten Artikel über praktische Tricks sprechen, die ich in meinen Projekten verwende.
Von den Redakteuren
Netologiekurse zum Thema: