Hallo habr Ich präsentiere Ihnen die Übersetzung des Artikels
"Meine Top 5 Gründe, warum ich benutzerdefinierte CSS-Eigenschaften mag" von Stas Melnikov
Die Spezifikation der benutzerdefinierten CSS-Eigenschaften hat meine Sicht auf die Webentwicklung für immer verändert. Deshalb möchte ich schreiben, warum ich benutzerdefinierte CSS-Eigenschaften mag.
Was sind benutzerdefinierte CSS-Eigenschaften?
Kurz gesagt, benutzerdefinierte CSS-Eigenschaften sind Eigenschaften, die vom Entwickler erstellt wurden. Der Browser weiß nichts über sie, bis der Entwickler sie feststellt.
Die Deklaration einer benutzerdefinierten Eigenschaft beginnt mit zwei Bindestrichen. Anschließend müssen Sie den Namen der Eigenschaft hinzufügen. Dann fügen Sie Farbe hinzu und legen den Eigenschaftswert fest.
Ich habe zum Beispiel die Eigenschaft melnik909BrandColor mit einem
violetten Wert für das
button- Element erstellt:
button { --melnik909BrandColor: purple; }
Var- Funktion
Das erste Merkmal von benutzerdefinierten CSS-Eigenschaften ist die
var- Funktion. Mit dieser Funktion kann ich den Browser anweisen, den Wert der benutzerdefinierten Eigenschaft zu übernehmen und zu jeder CSS-Eigenschaft hinzuzufügen.
Dazu muss ich die CSS-Eigenschaft definieren und den Wert dieser Eigenschaft hinzufügen. An derselben Stelle muss die
var- Funktion mit einer benutzerdefinierten Eigenschaft als Argument festgelegt werden.
Beispielsweise habe ich die --melnik909BrandColor-Eigenschaft für die Rahmen- und Farbeigenschaften hinzugefügt.
button { --melnik909BrandColor: purple; color: var(--melnik909BrandColor); border: 2px solid var(--melnik909BrandColor); }
Benutzerdefinierte Eigenschaften können direkt im Browser geändert werden
Ein erfahrener Leser, der Tools wie Sass oder LESS kennt, könnte sagen:
„Warum sollte ich benutzerdefinierte CSS-Eigenschaften studieren? Ich kenne die Sass-Variablen und das reicht mir .
"Achtung! Die Variablen Sass und LESS helfen beim Organisieren von CSS, sodass Entwickler den Code einfacher verwalten können. Ich habe zum Beispiel eine Variable $ melnik909BrandColor erstellt, in der ich die Farbe gespeichert habe:
$melnik909BrandColor: purple; button { color: $melnik909BrandColor; border: 2px solid $melnik909BrandColor; }
Nach der Kompilierung wird im Browser der folgende Code angezeigt:
button { color: purple; border: 2px solid purple; }
Dieses Beispiel zeigt, dass sich die Variablen Sass und LESS nicht im Browser befinden.
Das zweite Merkmal von benutzerdefinierten CSS-Eigenschaften ist, dass sie sich im Browser befinden. Auf diese Weise kann ich die Werte genau dort ändern. Beispielsweise kann ich den Wert der Eigenschaft —melnik909BrandColor für den Auswahlstatus des
Schaltflächenelements ändern:
button { --melnik909BrandColor: purple; color: var(--melnik909BrandColor); border: 2px solid var(--melnik909BrandColor); } button:hover { --melnik909BrandColor: #27ae60; }
Sie können benutzerdefinierte CSS-Eigenschaften und Medienabfragen zusammen verwenden
Das dritte Merkmal von benutzerdefinierten CSS-Eigenschaften besteht darin, dass ihre Werte mithilfe von Medienabfragen geändert werden können. Zum Beispiel definiere ich die Eigenschaft melnik909BrandColor, um die Textfarbe des
body- Elements auf verschiedenen Geräten zu ändern.
body { color: var(--melnik909BrandColor); } @media (max-width: 768px) { body { --melnik909BrandColor: purple; } } @media (min-width: 769px) { body { --melnik909BrandColor: tomato; } }
Calc- Funktion und benutzerdefinierte CSS-Eigenschaften
Es gibt Zeiten, in denen wir die
Calc- Funktion verwenden müssen. Zum Beispiel möchte ich diese Funktion verwenden, wenn ich die Anzahl der Elemente in einer Reihe zählen muss:
.child { width: calc(100% / 4); } .child { width: calc(100% / 3); }
Es ist jedoch schwierig, diesen Code wiederzuverwenden, und hier helfen uns die benutzerdefinierten CSS-Eigenschaften. Wir können eine Variable erstellen, die die Anzahl der Elemente liest. Zum Beispiel werde ich die Eigenschaft –-itemsNumber zum vorherigen Beispiel hinzufügen:
.child { width: calc(100% / var(--itemsNumber)); }
Und ich werde die Werte im
übergeordneten Element definieren:
.parent { --itemsNumber: 5; } .parent { --itemsNumber: 7; }
Vektorgrafik-Anpassung
Es gibt zwei Möglichkeiten, Vektorgrafiken mit benutzerdefinierten CSS-Eigenschaften anzupassen.
In der ersten Methode definieren wir die Attribute
fill, stroke und stroke-width und fügen ihnen benutzerdefinierte CSS-Eigenschaften als ihre Werte hinzu.
Außerdem können wir Attributwerte hinzufügen, indem wir die Werte für benutzerdefinierte Eigenschaften festlegen:
<svg class="svg-with-attr" viewBox="0 0 55.867 55.867"> <path stroke="var(--iconStroke)" stroke-width="var(--iconStrokeWidth)" fill="var(--iconFill)" d="..."> </svg>
Jetzt können wir Attributwerte hinzufügen, indem wir den Wert der benutzerdefinierten Eigenschaften festlegen:
.svg-with-attr { --iconFill: #eeeeee; --iconStroke: #000000; --iconStrokeWidth: 1px; }
Links ist das Standardsymbol ohne Stile und rechts das Symbol mit Stilen.
In der zweiten Methode definieren wir benutzerdefinierte CSS-Eigenschaften für
Strich, Strichbreite und Füllung mithilfe von CSS-Regeln.
body { --iconFill: #ffcc00; --iconStroke: #000000; --iconStrokeWidth: 2px; } .svg-with-props { stroke: var(--iconStroke); stroke-width: var(--iconStrokeWidth); fill: var(--iconFill); }