Bereit? Wenn ja, fangen wir an.
Einführung
CSS-Variablen sind Werte, die in CSS für zwei Zwecke deklariert werden. Der erste ist die Wiederverwendung solcher Werte. Die zweite besteht darin, die Menge an CSS-Code zu reduzieren. Schauen wir uns ein einfaches Beispiel an.
Seitenelemente gestalten
.section {
border: 2px solid #235ad1;
}
.section-title {
color: #235ad1;
}
.section-title::before {
content: "";
display: inline-block;
width: 20px;
height: 20px;
background-color: #235ad1;
}
In diesem CSS-Beispiel
#235ad1wird der Wert dreimal verwendet. Stellen Sie sich vor, dies ist Teil eines größeren Projekts. Darin sind ähnliche Stile über viele CSS-Dateien verteilt. Sie wurden aufgefordert, die Farbe zu ändern #235ad1. In einer solchen Situation ist es am besten, die Fähigkeit der Code-Editoren zu nutzen, um Zeichenfolgenwerte zu finden und zu ersetzen.
Bei Verwendung von CSS-Variablen sind solche Aufgaben jedoch viel einfacher zu lösen. Lassen Sie uns darüber sprechen, wie CSS-Variablen deklariert werden. Vor dem Variablennamen müssen zwei Bindestriche stehen. Deklarieren wir eine Stilvariable für das
:rootElement Pseudoklasse <html>:
:root {
--color-primary: #235ad1;
}
.section {
border: 2px solid var(--color-primary);
}
.section-title {
color: var(--color-primary);
}
.section-title::before {
/* */
background-color: var(--color-primary);
}
Meiner Meinung nach sieht dieser Code viel sauberer aus als der vorherige. Die Variable
--color-primaryist global, da sie im Stil für die Pseudoklasse deklariert ist :root. CSS-Variablen können jedoch auch auf der Ebene einzelner Elemente deklariert werden, wodurch deren Umfang im Dokument eingeschränkt wird.
Benennung von Variablen
Die Regeln für die Benennung von CSS-Variablen unterscheiden sich nicht wesentlich von den Regeln, die in verschiedenen Programmiersprachen verwendet werden. Ein gültiger CSS-Variablenname kann nämlich alphanumerische Zeichen, Unterstriche und Bindestriche enthalten. Es ist auch erwähnenswert, dass bei den Namen dieser Variablen zwischen Groß- und Kleinschreibung unterschieden wird.
/* */
:root {
--primary-color: #222;
--_primary-color: #222;
--12-primary-color: #222;
--primay-color-12: #222;
}
/* */
:root {
--primary color: #222; /* */
--primary$%#%$#
}
Variabler Umfang
Ein nützliches Merkmal von CSS-Variablen ist, dass sie einen Gültigkeitsbereich haben. Diese Idee basiert auf denselben Prinzipien, die in verschiedenen Programmiersprachen angewendet werden. Zum Beispiel - in JavaScript:
let element = "cool";
function cool() {
let otherElement = "Not cool";
console.log(element);
}
In diesem Beispiel ist die Variable
elementglobal und in der Funktion verfügbar cool(). Auf die Variable otherElementkann jedoch nur über den Funktionskörper zugegriffen werden cool(). Werfen wir einen Blick auf diese Idee, die auf CSS-Variablen angewendet wird.
:root {
--primary-color: #235ad1;
}
.section-title {
--primary-color: d12374;
color: var(--primary-color);
}
Die Variable
--primary-colorist global. Sie können von jedem Element des Dokuments aus darauf verweisen. Wenn Sie es in einem Block überschreiben .section-title, führt dies dazu, dass sein neuer Wert nur in diesem Block verwendet werden kann.
Hier ist ein Diagramm, um diese Idee zu erklären.
Umfang der CSS-Variablen
Dies ist eine Variable
--primary-color, mit der die Farbe der Abschnittsüberschriften festgelegt wird. Wir müssen die Farbe der Überschriften für die Abschnitte "Ausgewählte Autoren" und "Aktuelle Artikel" anpassen. Daher überschreiben wir in den Stilen dieser Abschnitte diese Variable. Das gleiche passiert mit einer Variablen--unit. Hier sind die Stile, auf denen das vorherige Diagramm basiert.
/* */
:root {
--primary-color: #235ad1;
--unit: 1rem;
}
/* */
.section-title {
color: var(--primary-color);
margin-bottom: var(--unit);
}
/* , */
.featured-authors .section-title {
--primary-color: #d16823;
}
/* , */
.latest-articles .section-title {
--primary-color: #d12374;
--unit: 2rem;
}
Fallback-Werte verwenden
In der Regel werden "Fallback-Werte" verwendet, um Websites in Browsern auszuführen, die einige moderne CSS-Mechanismen nicht unterstützen. Aber hier werden wir nicht darüber sprechen, sondern darüber, wie die verwendeten Werte festgelegt werden, falls die erforderlichen CSS-Variablen nicht verfügbar sind. Betrachten Sie das folgende Beispiel:
.section-title {
color: var(--primary-color, #222);
}
Beachten Sie, dass
var()mehrere Werte an die Funktion übergeben werden . Die zweite #222wird nur verwendet, wenn die Variable --primary-colornicht definiert ist. Bei der Angabe von Fallback-Werten können Sie auch verschachtelte Konstrukte verwenden var():
.section-title {
color: var(--primary-color, var(--black, #222));
}
Dieser Ansatz zum Arbeiten mit Variablen kann nützlich sein, wenn der Wert einer Variablen von einer Aktion abhängt. Wenn es vorkommen kann, dass eine Variable keinen Wert enthält, ist es wichtig, einen Fallback-Wert zu verwenden.
Beispiele und Szenarien für die Verwendung von CSS-Variablen
▍Komponentengrößensteuerung
Komponenten unterschiedlicher Größe
Design-Systeme haben häufig beispielsweise Tasten unterschiedlicher Größe. In der Regel handelt es sich um drei Größen (klein, normal, groß). Mit CSS-Variablen lassen sich solche Schaltflächen und ähnliche Elemente sehr einfach beschreiben.
.button {
--unit: 1rem;
padding: var(--unit);
}
.button--small {
--unit: 0.5rem;
}
.button--large {
--unit: 1.5rem;
}
Durch Ändern des Werts der Variablen
--unitim Gültigkeitsbereich entsprechend der Schaltflächenkomponente erstellen wir verschiedene Varianten der Schaltfläche.
▍CSS-Variablen und HSL-Farben
HSL (Farbton, Sättigung, Helligkeit - Farbton, Sättigung, Helligkeit) ist ein Farbmodell, bei dem die H-Komponente die Farbe und die S- und L-Komponenten die Sättigung und Helligkeit der Farbe bestimmen.
Mit HSL angegebene Elementfarben
:root {
--primary-h: 221;
--primary-s: 71%;
--primary-b: 48%;
}
.button {
background-color: hsl(var(--primary-h), var(--primary-s), var(--primary-b));
transition: background-color 0.3s ease-out;
}
/* */
.button:hover {
--primary-b: 33%;
}
Beachten Sie, wie ich die Farbe der Schaltfläche dunkler gemacht habe, indem ich den Wert der Variablen verringert habe
--primary-b.
Wenn Sie sich für das Thema der Verwendung von Farben in CSS interessieren, finden Sie hier meinen Artikel dazu.
▍Die Größe der Elemente unter Beibehaltung der Proportionen ändern
Wenn Sie in einem Designprogramm wie Photoshop, Sketch, Figma oder Adobe XD gearbeitet haben, wissen Sie möglicherweise, wie Sie den Schlüssel
Shiftbeim Ändern der Größe von Objekten verwenden. Dank dieser Technik können Sie vermeiden, dass die Proportionen der Elemente verzerrt werden.
Es gibt keinen Standardmechanismus zum Ändern der Größe von Elementen in CSS unter Beibehaltung des Seitenverhältnisses. Diese Einschränkung kann jedoch umgangen werden, indem CSS-Variablen verwendet werden.
Anpassen der Elementgrößen mithilfe von CSS-Variablen
Angenommen, wir haben ein Symbol, dessen Breite und Höhe identisch sein müssen. Um dies zu erreichen, habe ich eine CSS-Variable definiert
--sizeund damit die Breite und Höhe des Elements angepasst.
.icon {
--size: 22px;
width: var(--size);
height: var(--size);
}
Infolgedessen stellt sich heraus, dass diese Technik die Verwendung eines Schlüssels
Shiftbeim Ändern der Größe von Objekten simuliert . Es reicht aus, den Wert einer Variablen zu ändern --size. Dieses Thema wird hier ausführlicher behandelt .
▍CSS Grid Based Layouts
CSS-Variablen können beim Entwerfen von Seitenlayouts auf der Basis von CSS Grid äußerst nützlich sein. Stellen Sie sich vor, Sie müssen den Rastercontainer untergeordnete Elemente basierend auf einer vordefinierten Breite der Elemente rendern lassen. Anstatt für jede Elementpräsentation eine Klasse zu erstellen, die zu einer Verdoppelung des CSS-Codes führen würde, kann diese Aufgabe mithilfe von CSS-Variablen gelöst werden.
Dimensionieren von Rasterelementen mithilfe einer CSS-Variablen
.wrapper {
--item-width: 300px;
display: grid;
grid-template-columns: repeat(auto-fill, minmax(var(--item-width), 1fr));
grid-gap: 1rem;
}
.wrapper-2 {
--item-width: 500px;
}
Mit diesem Ansatz können Sie ein flexibles Grid-Layout erstellen, das für die Verwendung in verschiedenen Projekten geeignet ist und einfach zu warten ist. Die gleiche Idee kann auf das Festlegen einer Eigenschaft angewendet werden
grid-gap.
.wrapper {
--item-width: 300px;
--gap: 0;
display: grid;
grid-template-columns: repeat(auto-fill, minmax(var(--item-width), 1fr));
}
.wrapper.gap-1 {
--gap: 16px;
}
Verwenden der Variablen --gap zum Festlegen der Grid-Gap-Eigenschaft
Speichern in variablen Werten mit komplexer Struktur
▍CSS-Farbverläufe
Mit "Werten mit komplexer Struktur" meine ich zum Beispiel so etwas wie Farbverläufe. Wenn das Projekt einen Verlauf oder Hintergrund hat, der an vielen Stellen im Projekt verwendet wird, ist es sinnvoll, ihre Beschreibungen in CSS-Variablen zu speichern.
:root {
--primary-gradient: linear-gradient(150deg, #235ad1, #23d1a8);
}
.element {
background-image: var(--primary-gradient);
}
In solchen Situationen ist es möglich, einzelne Elemente "komplexer" Werte in Variablen zu speichern. Dies könnte beispielsweise der Winkel des Gradienten sein:
.element {
--angle: 150deg;
background-image: linear-gradient(var(--angle), #235ad1, #23d1a8);
}
.element.inverted {
--angle: -150deg;
}
Verschiedene Verlaufsoptionen, die durch Ändern der Variablen --angle erstellt wurden
▍Positionshintergrund
Wie bereits erwähnt, können CSS-Variablen komplexe Werte speichern. Dies kann nützlich sein, wenn Sie ein Element haben, das je nach Geschehen möglicherweise an verschiedenen Stellen auf der Seite platziert werden muss.
Steuern der Position eines Elements mit der Variablen --pos
.table {
--size: 50px;
--pos: left center;
background: #ccc linear-gradient(#000, #000) no-repeat;
background-size: var(--size) var(--size);
background-position: var(--pos);
}
Wechseln Sie zwischen dunklen und hellen Themen
Jetzt sind Websites fast immer mit einem dunklen und hellen Thema ausgestattet. Um dieses Problem zu lösen, können Sie CSS-Variablen verwenden, Informationen zu Farben in ihnen speichern und zwischen ihnen wechseln, nachdem Sie die vom Benutzer vorgenommenen Systemparameter oder Einstellungen analysiert haben.
Helle und dunkle Themen
:root {
--text-color: #434343;
--border-color: #d2d2d2;
--main-bg-color: #fff;
--action-bg-color: #f9f7f7;
}
/* , <html> */
.dark-mode {
--text-color: #e9e9e9;
--border-color: #434343;
--main-bg-color: #434343;
--action-bg-color: #363636;
}
Hier ist eine Video-Demo der obigen Idee.
Festlegen von Standardwerten
In einigen Situationen müssen Sie CSS-Variablen mithilfe von JavaScript festlegen . Angenommen, wir möchten einen Eigenschaftswert für ein
heightElement festlegen , dessen Größe geändert werden kann. Diese Technik habe ich in diesem Artikel kennengelernt.
Die Variable ist
--details-height-openzunächst leer. Es ist geplant, es in der Beschreibung des Stils eines Elements zu verwenden. Es sollte die Höhe des Elements in Pixel enthalten. Wenn Sie den Wert dieser Variablen aus irgendeinem Grund nicht in JavaScript festlegen können, ist es wichtig, stattdessen einen Standard-Fallback-Wert zu verwenden.
.section.is-active {
max-height: var(--details-height-open, auto);
}
In diesem Beispiel spielt der Standardwert eine Rolle
auto. Es wird angewendet, wenn JavaScript den Wert der Variablen nicht festlegen kann --details-height-open.
Anpassen der Breite eines Containerelements
Steuern der Breite eines Containerelements
In Webseiten verwendete Containerelemente können in verschiedenen Situationen unterschiedliche Größen haben. Möglicherweise benötigt eine Seite einen kleinen Container und eine andere einen größeren Container. In solchen Fällen können CSS-Variablen erfolgreich verwendet werden, um die Größe von Containern zu steuern.
.wrapper {
--size: 1140px;
max-width: var(--size);
}
.wrapper--small {
--size: 800px;
}
Inline-Stile
Die Verwendung von CSS-Variablen in Inline-Stilen kann Front-End-Entwicklern eine Menge neuer Möglichkeiten eröffnen, von denen sie nie wussten, dass sie existieren. Tatsächlich habe ich einen ganzen Artikel darüber geschrieben , aber hier werde ich noch über die interessantesten Möglichkeiten sprechen, Variablen in Inline-Stilen zu verwenden.
Es kann am besten sein, diese Methoden nicht in der Produktion anzuwenden. Sie eignen sich sehr gut für das Prototyping und die Erforschung verschiedener Designideen.
▍Dynamische Gitterelemente
Um beispielsweise die Breite eines Elements anzupassen, können Sie eine Variable verwenden
--item-width, die direkt im Elementattribut deklariert ist style. Dieser Ansatz kann beim Prototyping von Grid-Layouts hilfreich sein.
Hier ist der HTML-Code für das Element:
<div class="wrapper" style="--item-width: 250px;">
<div></div>
<div></div>
<div></div>
</div>
Hier ist der Stil, der auf dieses Element angewendet wird:
.wrapper {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(var(--item-width), 1fr));
grid-gap: 1rem;
}
Hier können Sie mit dem Beispiel für diesen Abschnitt experimentieren.
▍Benutzeravatare
Avatare unterschiedlicher Größe
Eine weitere interessante Verwendung von CSS-Variablen in Inline-Stilen ist die Erstellung von Elementen unterschiedlicher Größe. Angenommen, wir müssen in verschiedenen Situationen den Avatar eines Benutzers in verschiedenen Größen anzeigen. Abgesehen davon möchten wir seine Größe mithilfe einer einzelnen CSS-Variablen steuern.
Hier ist das Markup:
<img src="user.jpg" alt="" class="c-avatar" style="--size: 1" />
<img src="user.jpg" alt="" class="c-avatar" style="--size: 2" />
<img src="user.jpg" alt="" class="c-avatar" style="--size: 3" />
<img src="user.jpg" alt="" class="c-avatar" style="--size: 4" />
Hier sind die Stile:
.c-avatar {
display: inline-block;
width: calc(var(--size, 1) * 30px);
height: calc(var(--size, 1) * 30px);
}
Lassen Sie uns diese Stile analysieren:
- Wir haben ein Design
var(--size, 1). Es bietet einen Standardwert. Es wird verwendet, wenn der Wert der Variablen--sizenicht mithilfe des Attributs desstylegestalteten Elements festgelegt wird. - Die minimale Elementgröße ist auf eingestellt
30px*30px.
Medien-Anfragen
Die gemeinsame Verwendung von CSS-Variablen und Medienabfragen kann einen großen Beitrag zur Anpassung der Werte der Variablen leisten, die auf allen Seiten Ihrer Website verwendet werden. Das einfachste Beispiel für die Verwendung dieser Technik, das mir in den Sinn kommt, ist das Anpassen des Abstands zwischen Elementen:
:root {
--gutter: 8px;
}
@media (min-width: 800px) {
:root {
--gutter: 16px;
}
}
Daher
--gutterhängen die Eigenschaften aller Elemente, die die Variable verwenden , von der Breite des Ansichtsfensters des Browsers ab. Für mich ist dies einfach eine großartige Gelegenheit.
Erbe
CSS-Variablen unterstützen die Vererbung. Wenn eine CSS-Variable im übergeordneten Element deklariert ist, erben untergeordnete Elemente diese Variable. Schauen wir uns ein Beispiel an.
Hier ist der HTML-Code:
<div class="parent">
<p class="child"></p>
</div>
Hier sind die Stile:
.parent {
--size: 20px;
}
.child {
font-size: var(--size);
}
Das Element
.childerbt eine Variable --size, die im Stil des Elements deklariert ist .parent. Das Element .childhat Zugriff auf diese Variable. Ich finde das sehr interessant. Vielleicht fragen Sie sich jetzt, wie es uns nützen wird. Ich glaube, das folgende Beispiel aus dem wirklichen Leben wird helfen, diese Frage zu beantworten.
Vererben von CSS-Variablen
Es gibt eine Gruppe von Schaltflächen mit den folgenden Anforderungen:
- Die Möglichkeit, die Größe aller Elemente durch Festlegen des Werts einer einzelnen Variablen zu ändern.
- Der Abstand zwischen Elementen sollte sich je nach Größe dynamisch ändern. Mit zunehmender Anzahl der Elemente nimmt der Abstand zwischen ihnen zu und mit abnehmender Größe ab.
Hier ist das Markup für dieses Beispiel:
<div class="actions">
<div class="actions__item"></div>
<div class="actions__item"></div>
<div class="actions__item"></div>
</div>
Hier sind die Stile:
.actions {
--size: 50px;
display: flex;
gap: calc(var(--size) / 5);
}
.actions--m {
--size: 70px;
}
.actions__item {
width: var(--size);
height: var(--size);
}
Beachten Sie, wie ich die Variable
--sizebeim Festlegen der Eigenschaft für die gapFlexbox-Elemente verwendet habe. Auf diese Weise kann --sizeder Abstand zwischen Elementen basierend auf einer Variablen dynamisch geändert werden.
Ein weiteres Beispiel für die Verwendung des Vererbungsmechanismus von CSS-Variablen ist das Einrichten von CSS-Animationen. Ich habe dieses Beispiel von hier genommen .
@keyframes breath {
from {
transform: scale(var(--scaleStart));
}
to {
transform: scale(var(--scaleEnd));
}
}
.walk {
--scaleStart: 0.3;
--scaleEnd: 1.7;
animation: breath 2s alternate;
}
.run {
--scaleStart: 0.8;
--scaleEnd: 1.2;
animation: breath 0.5s alternate;
}
Bei diesem Ansatz müssen wir nicht zweimal deklarieren
@keyframes. Stile .walkund .runüberschreiben geerbte Variablenwerte.
Validieren von CSS-Variablen
Wenn sich herausstellt, dass
var()etwas mit der an die Funktion übergebenen CSS-Variablen nicht stimmt, ersetzt der Browser den Wert dieser Variablen durch den ursprünglichen (geerbten) Wert der entsprechenden Eigenschaft.
:root {
--main-color: 16px;
}
.section-title {
color: var(--main-color);
}
Hier wird der Wert in die Variable geschrieben, mit der
--main-colordie Eigenschaft festgelegt wurde . Und das ist völlig falsch. Die Eigenschaft wird vererbt. Der Browser arbeitet in dieser Situation nach folgendem Algorithmus:color16pxcolor
- Ist das Eigentum vererbbar?
So funktioniert der Browser.
Funktionsweise des Browsers, wenn ein ungültiger CSS-Variablenwert erkannt wird
▍Das Konzept eines ungültigen Werts, der während der Berechnung angezeigt wird
Was oben aus technischer Sicht diskutiert wurde, wird als "zum Zeitpunkt des berechneten Werts ungültig" bezeichnet. Die Situation, in der solche Werte auftreten, tritt auf, wenn eine
var()gültige CSS-Variable an die Funktion übergeben wird , deren Wert nicht zum Schreiben in die zu konfigurierende Eigenschaft mit ihrer Hilfe geeignet ist.
Betrachten Sie das folgende Beispiel, das ich diesem Artikel entnommen habe:
.section-title {
top: 10px;
top: clamp(5px, var(--offset), 20px);
}
Wenn der Browser die Funktion nicht unterstützt
clamp(), verwendet er den in der Konstruktion angegebenen Wert als Fallback top: 10px? Kurz, um diese Frage zu beantworten, dann nein - es wird sie nicht verwenden. Der Grund dafür ist, dass der Browser, wenn er einen ungültigen Wert erkennt, den er in die Eigenschaft schreiben möchte, die anderen Werte gemäß der Reihenfolge der Kaskadenstile verworfen hat. Das heißt, die Konstruktion wird einfach ignoriert top: 10px. Folgendes
sagt die CSS- Spezifikation dazu :
Das Konzept eines ungültigen Werts, der während der Berechnung auftritt, besteht darin, dass mit Variablen verknüpfte Fehler im Gegensatz zu anderen Syntaxfehlern in den frühen Stadien eines Systems nicht auftreten. Daher stellt sich heraus, dass der Benutzeragent, wenn er feststellt, dass der Wert der Variablen falsch ist, die anderen Werte bereits in der Reihenfolge der Kaskadenstile verwirft.
Als Ergebnis stellt sich heraus, dass Sie die Direktive anwenden müssen, wenn Sie CSS-Funktionen verwenden möchten, die von Browsern, die mit CSS-Variablen implementiert werden, nicht allgemein unterstützt werden
@supports. So wird es im obigen Artikel gemacht:
@supports (top: max(1em, 1px)) {
#toc {
top: max(0em, 11rem - var(--scrolltop) * 1px);
}
}
Interessante Funde
▍ Speichern von URLs in Variablen
Möglicherweise müssen einige der auf Ihren Webseiten verwendeten Ressourcen von externen Quellen heruntergeladen werden. In solchen Situationen können Sie die URL dieser Ressourcen in CSS-Variablen speichern.
:root {
--main-bg: url("https://example.com/cool-image.jpg");
}
.section {
background: var(--main-bg);
}
An dieser Stelle kann sich die Frage stellen, ob es möglich ist, Ansichtskonstrukte
var(--main-bg)mit einer CSS-Funktion zu verarbeiten url(). Betrachten Sie das folgende Beispiel:
:root {
--main-bg: "https://example.com/cool-image.jpg";
}
.section {
background: url(var(--main-bg));
}
Dies funktioniert nicht, da die Funktion
url()die gesamte Struktur var(--main-bg)als URL interpretiert , was falsch ist. Wenn der Browser den Wert berechnet, ist er bereits falsch und die betrachtete Konstruktion funktioniert nicht wie erwartet.
▍ Speichern mehrerer Werte
In CSS-Variablen können mehrere Werte gespeichert werden. Wenn dies Werte sind, die so aussehen, als ob sie an der Stelle aussehen sollten, an der Sie die Variable verwenden möchten, funktioniert eine solche Konstruktion. Schauen wir uns ein Beispiel an.
Der Variablenwert sieht wie erwartet aus.
Hier ist das CSS:
:root {
--main-color: 35, 90, 209;
}
.section-title {
color: rgba(var(--main-color), 0.75);
}
Es gibt eine Funktion
rgba()und RGB-Werte, die durch Kommas getrennt und in einer CSS-Variablen gespeichert sind. Diese Werte werden bei der Angabe der Farbe verwendet. Mit diesem Ansatz zur Verwendung der Funktion rgba()hat der Entwickler die Möglichkeit, den dem Alphakanal der Farbe entsprechenden Wert zu beeinflussen und die Farbe verschiedener Elemente anzupassen.
Der einzige Nachteil dieses Ansatzes besteht darin, dass die von der Funktion zugewiesene Farbe
rgba()nicht mit den Browser-Entwicklertools angepasst werden kann. Wenn diese Funktion bei der Arbeit an Ihrem Projekt wichtig ist, funktioniert die oben beschriebene Verwendung der Funktion wahrscheinlich nicht für Sie rgba().
Hier ist ein Beispiel für die Verwendung einer CSS-Variablen zum Festlegen einer Eigenschaft
background:
:root {
--bg: linear-gradient(#000, #000) center/50px;
}
.section {
background: var(--bg);
}
.section--unique {
background: var(--bg) no-repeat;
}
Dies zeigt das Styling von zwei Abschnitten der Site. Der Hintergrund eines von ihnen sollte nicht entlang der Achsen
xund wiederholt werden y.
▍Ändern der Werte von CSS-Variablen im Hauptteil der @ keyframes-Regel
Wenn Sie die Spezifikation zu CSS-Variablen gelesen haben, sind Sie dort möglicherweise auf den Begriff "animationsbeschädigt" gestoßen. Es beschreibt die Tatsache, dass sich die Werte von CSS-Variablen nicht dazu eignen, Änderungen in der Regel zu glätten
@keyframes. Schauen wir uns ein Beispiel an.
Hier ist der HTML:
<div class="box"></div>
Hier sind die Stile:
.box {
width: 50px;
height: 50px;
background: #222;
--offset: 0;
transform: translateX(var(--offset));
animation: moveBox 1s infinite alternate;
}
@keyframes moveBox {
0% {
--offset: 0;
}
50% {
--offset: 50px;
}
100% {
--offset: 100px;
}
}
Die Animation ist in diesem Fall nicht flüssig. Die Variable nimmt nur drei Werte
0an 50pxund 100px. Die CSS-Spezifikation besagt, dass jede benutzerdefinierte Eigenschaft, die in einer Regel verwendet @keyframeswird, zu einer animationsbeschädigten Eigenschaft wird. Dies wirkt sich darauf aus, wie sie von der Funktion var()beim Animieren von Elementen behandelt wird.
Wenn wir im vorherigen Beispiel eine reibungslose Animation bereitstellen müssen, müssen wir dies wie zuvor tun. Das heißt, Sie müssen die Variable durch die CSS-Eigenschaften des Elements ersetzen, das Sie animieren möchten.
@keyframes moveBox {
0% {
transform: translateX(0);
}
50% {
transform: translateX(50px);
}
100% {
transform: translateX(100px);
}
}
→ Hier ist ein Beispiel, an dem
ich darauf hinweisen möchte, dass ich nach der Veröffentlichung dieses Artikels darüber informiert wurde , dass
@keyframeses immer noch möglich ist, CSS-Variablen in zu animieren . Dazu müssen die Variablen jedoch nach der Regel registriert werden @property. Bisher wird diese Funktion nur von Chromium-basierten Browsern unterstützt.
@property --offset {
syntax: "<length-percentage>";
inherits: true;
initial-value: 0px;
}
Hier können Sie mit einem Beispiel für diese Funktion experimentieren.
▍Berechnung
Möglicherweise ist Ihnen nicht bekannt, dass CSS-Variablen für Berechnungen verwendet werden können. Schauen wir uns das Beispiel an, das wir uns bereits bei Avataren angesehen haben:
.c-avatar {
display: inline-block;
width: calc(var(--size, 1) * 30px);
height: calc(var(--size, 1) * 30px);
}
Die Größe des Avatars hängt vom Wert der Variablen ab
--size. Der Standardwert ist 1. Dies bedeutet, dass die Standardgröße des Avatars ist 30px*30px. Beachten Sie die folgenden Stile und dass das Ändern dieser Variablen die Größe des Avatars ändert.
.c-avatar--small {
--size: 2;
}
.c-avatar--medium {
--size: 3;
}
.c-avatar--large {
--size: 4;
}
Browser-Entwicklertools und CSS-Variablen
Bei Verwendung der Entwicklertools verschiedener Browser gibt es einige nützliche Tricks, mit denen die Arbeit mit CSS-Variablen vereinfacht werden kann. Reden wir über sie.
▍Anzeigen von Farben, die mithilfe von Variablen definiert wurden
Ich finde es nützlich, die von einer CSS-Variablen beschriebene Farbe sehen zu können. Diese Funktion ist in Chrome- und Edge-Browsern verfügbar.
Zeigen Sie die Farbe einer CSS-Variablen an
▍Berechnete Werte
Bewegen Sie den Mauszeiger über die Variable oder klicken Sie auf eine spezielle Schaltfläche, um den berechneten Wert einer CSS-Variablen anzuzeigen, je nach Browser.
Anzeigen berechneter Werte
In allen Browsern außer Safari können berechnete Werte angezeigt werden, indem Sie einfach mit der Maus über eine Variable fahren. In Safari müssen Sie dazu auf eine Schaltfläche mit einigen Streifen klicken.
▍Autokomplette Eingabe
Bei der Arbeit an großen Projekten ist es schwierig, sich die Namen aller darin verwendeten CSS-Variablen zu merken. Mit den in Chrome, Firefox und Edge verfügbaren Funktionen zur automatischen Vervollständigung ist dies jedoch kein Problem.
Vervollständigung des Variablennamens, damit
dieser Mechanismus funktioniert - geben Sie einfach den Variablennamen ein.
▍Disable CSS-Variablen
Wenn eine CSS-Variable für alle Elemente, die sie verwenden, deaktiviert werden muss, reicht es aus, das Kontrollkästchen neben der Variablen in dem Element zu deaktivieren, in dem sie deklariert ist.
Kontrollkästchen zum Deaktivieren von CSS-Variablen
Ergebnis
Ich habe ziemlich viel über CSS-Variablen berichtet. Ich hoffe, Sie finden es nützlich, was Sie heute gelernt haben.
Verwenden Sie CSS-Variablen in Ihren Projekten?
