Diese Seite wurde von der Cloud Translation API übersetzt.

CSS-Variablen: Warum ist das wichtig?

Rob Dodson

CSS-Variablen, genauer bekannt als benutzerdefinierte CSS-Eigenschaften, in Chrome 49. Sie können nützlich sein, um Wiederholungen in CSS zu reduzieren. für leistungsstarke Laufzeiteffekte wie das Wechseln des Designs Erweiterung/Polyfilling zukünftiger CSS-Funktionen.

CSS-Clash

Bei der Entwicklung einer Anwendung wird üblicherweise eine Reihe von Markeninhalten Farben, die wiederverwendet werden, damit das Erscheinungsbild der App einheitlich bleibt. Leider ist die Wiederholung dieser Farbwerte in Ihrem CSS nicht nur mühsam, sondern auch fehleranfällig. Wenn irgendwann eine der Farben geändert werden muss, Vorsicht vor dem Wind: „Suchen und Ersetzen“ aber bei einem großen Projekt könnte das schnell gefährlich werden.

In letzter Zeit haben sich viele Entwickler auf CSS-Präprozessoren wie SASS oder WENIGER, die dieses Problem durch die Verwendung von Präprozessorvariablen lösen. Während Diese Tools haben die Produktivität der Entwickelnden immens erhöht. Die Variablen, haben einen großen Nachteil: Sie sind statisch und können während der Laufzeit geändert werden. Die Möglichkeit, Variablen nicht nur während der Laufzeit zu ändern, ermöglicht dynamische Anwendungsdesigns, bietet aber auch wichtige Auswirkungen auf das responsive Design und die Möglichkeit, zukünftige CSS mit Polyfill zu füllen Funktionen. Diese Funktionen sind seit der Veröffentlichung von Chrome 49 in Form von benutzerdefinierten CSS-Eigenschaften.

Benutzerdefinierte Eigenschaften im Überblick

Mit benutzerdefinierten Eigenschaften werden unserer CSS-Toolbox zwei neue Funktionen hinzugefügt:

Die Möglichkeit für einen Autor, einer Eigenschaft mit einem der vom Autor gewählte Name.
Die var()-Funktion, mit der ein Autor diese Werte in anderen Eigenschaften.

Hier ist ein kurzes Beispiel,

:root {
    --main-color: #06c;
}

#foo h1 {
    color: var(--main-color);
}

--main-color ist eine vom Autor definierte benutzerdefinierte Eigenschaft mit dem Wert "#06c". Hinweis dass alle benutzerdefinierten Eigenschaften mit zwei Bindestrichen beginnen.

Mit der Funktion var() wird das benutzerdefinierte Attribut abgerufen und durch dieses ersetzt -Wert, was zu color: #06c; führt. Solange die benutzerdefinierte Eigenschaft definiert ist, irgendwo in Ihrem Stylesheet sollte sie für die Funktion var verfügbar sein.

Die Syntax sieht auf den ersten Blick etwas merkwürdig aus. Viele Entwickler fragen: „Warum einfach $foo für Variablennamen verwenden?“ Der Ansatz wurde speziell dafür gewählt, so flexibel wie möglich und lassen möglicherweise $foo-Makros zu einem späteren Zeitpunkt zu. In diesem Beitrag erfährst du mehr zur Hintergrundgeschichte. der Spezifikationsautoren, Tab Atkins.

Syntax benutzerdefinierter Eigenschaften

Die Syntax für eine benutzerdefinierte Eigenschaft ist einfach.

--header-color: #06c;

Bei benutzerdefinierten Eigenschaften wird zwischen Groß- und Kleinschreibung unterschieden. --header-color und --Header-Color sind unterschiedliche benutzerdefinierte Eigenschaften. Auch wenn sie auf den ersten Blick ist die zulässige Syntax für benutzerdefinierte Eigenschaften nicht freizügig ist. Das folgende Beispiel zeigt eine gültige benutzerdefinierte Eigenschaft:

--foo: if(x > 5) this.width = 10;

Diese Variable wäre zwar nicht nützlich, da sie in allen kann er möglicherweise unter JavaScript gelesen und bearbeitet werden. Laufzeit. Mit benutzerdefinierten Properties können also interessante Techniken, die mit den heutigen CSS-Präprozessoren derzeit nicht möglich sind. Also Wenn du denkst: „Gähn, ich habe SASS, wen interessiert das also...? Dann sieh es dir noch einmal an. Dies sind nicht die Variablen, mit denen Sie es gewöhnt sind.

Wasserfall

Benutzerdefinierte Eigenschaften folgen standardmäßigen Kaskadenregeln, sodass Sie dieselben verschiedene Spezifitätsstufen zu bestimmen,

:root { --color: blue; }
div { --color: green; }
#alert { --color: red; }
* { color: var(--color); }

<p>I inherited blue from the root element!</p>
<div>I got green set directly on me!</div>
<div id="alert">
    While I got red set directly on me!
    <p>I’m red too, because of inheritance!</p>
</div>

Das bedeutet, dass Sie benutzerdefinierte Eigenschaften in Medienabfragen nutzen können, um mit responsivem Design. Ein Anwendungsfall wäre zum Beispiel die Ausweitung der Margen um mit zunehmender Bildschirmgröße die wichtigsten Unterteilungselemente:

:root {
    --gutter: 4px;
}

section {
    margin: var(--gutter);
}

@media (min-width: 600px) {
    :root {
    --gutter: 16px;
    }
}

Es ist wichtig zu betonen, dass das obige Code-Snippet nicht mit heutigen CSS-Präprozessoren, die keine Variablen innerhalb von Medien definieren können. Abfragen. Diese Fähigkeit entfaltet ein großes Potenzial.

Es ist auch möglich, benutzerdefinierte Eigenschaften zu verwenden, die ihren Wert von anderen benutzerdefinierten Eigenschaften. Dies kann für die Themes sehr nützlich sein:

:root {
    --primary-color: red;
    --logo-text: var(--primary-color);
}

Die Funktion var()

Um den Wert einer benutzerdefinierten Eigenschaft abzurufen und zu verwenden, verwenden Sie die Methode var(). Die Syntax für die Funktion var() sieht so aus:

var(<custom-property-name> [, <declaration-value> ]? )

Dabei ist <custom-property-name> der Name einer vom Autor definierten benutzerdefinierten Eigenschaft. wie --foo. <declaration-value> ist ein Fallback-Wert, der verwendet wird, wenn der Die referenzierte benutzerdefinierte Eigenschaft ist ungültig. Fallback-Werte können durch Kommas getrennt sein , die zu einem einzigen Wert kombiniert werden. Beispielsweise definiert var(--font-stack, "Roboto", "Helvetica"); das Fallback von "Roboto", "Helvetica". Behalten Kurzschreibwerte, wie sie für Rand und Innenrand verwendet werden, durch Kommas getrennt. Ein geeignetes Fallback für den Abstand würde also so aussehen.

p {
    padding: var(--pad, 10px 15px 20px);
}

Mithilfe dieser Fallback-Werte kann ein Komponentenautor Defensive Styles für Element:

/* In the component’s style: */
.component .header {
    color: var(--header-color, blue);
}
.component .text {
    color: var(--text-color, black);
}

/* In the larger application’s style: */
.component {
    --text-color: #080;
    /* header-color isn’t set,
        and so remains blue,
        the fallback value */
}

Diese Technik ist besonders nützlich für die thematische Erstellung von Webkomponenten mit Schatten. DOM, da benutzerdefinierte Eigenschaften Schattengrenzen durchlaufen können. Ein Web Component-Autor können mithilfe von Fallback-Werten ein erstes Design erstellen und „Hooks“ für das Thema einblenden. in Form von benutzerdefinierten Eigenschaften.

<!-- In the web component's definition: -->
<x-foo>
    #shadow
    <style>
        p {
        background-color: var(--text-background, blue);
        }
    </style>
    <p>
        This text has a yellow background because the document styled me! Otherwise it
        would be blue.
    </p>
</x-foo>

/* In the larger application's style: */
x-foo {
    --text-background: yellow;
}

Bei der Verwendung von var() gibt es einige Dinge zu beachten. Variablen können nicht Property-Namen. Beispiele:

.foo {
    --side: margin-top;
    var(--side): 20px;
}

Dies entspricht jedoch nicht der Einstellung margin-top: 20px;. Stattdessen die zweite Deklaration ungültig ist und als Fehler ausgegeben wird.

Ebenso können Sie (naiv) keinen Wert aufbauen, wenn ein Teil davon von eine Variable:

.foo {
    --gap: 20;
    margin-top: var(--gap)px;
}

Auch dies entspricht nicht der Einstellung von margin-top: 20px;. Um eine eingeben, benötigen Sie etwas anderes: die Funktion calc().

Erstellen von Werten mit calc()

Wenn Sie noch nie damit gearbeitet haben, ist die calc()-Funktion eine praktische Tool, mit dem Sie Berechnungen zur Bestimmung von CSS-Werten durchführen können. Die Erweiterung wird von allen modernen Browsern unterstützt und kann kombinierbar sein. mit benutzerdefinierten Eigenschaften, um neue Werte zu erstellen. Beispiel:

.foo {
    --gap: 20;
    margin-top: calc(var(--gap) * 1px); /* niiiiice */
}

Mit benutzerdefinierten Eigenschaften in JavaScript arbeiten

Verwenden Sie die getPropertyValue(), um den Wert einer benutzerdefinierten Eigenschaft zur Laufzeit abzurufen. -Methode des berechneten CSSStyleDeclaration-Objekts.

/* CSS */
:root {
    --primary-color: red;
}

p {
    color: var(--primary-color);
}

<!-- HTML -->
<p>I’m a red paragraph!</p>

/* JS */
var styles = getComputedStyle(document.documentElement);
var value = String(styles.getPropertyValue('--primary-color')).trim();
// value = 'red'

Um den Wert einer benutzerdefinierten Eigenschaft zur Laufzeit festzulegen, verwenden Sie auf ähnliche Weise die Methode setProperty()-Methode des CSSStyleDeclaration-Objekts.

/* CSS */
:root {
    --primary-color: red;
}

p {
    color: var(--primary-color);
}

<!-- HTML -->
<p>Now I’m a green paragraph!</p>

/* JS */
document.documentElement.style.setProperty('--primary-color', 'green');

Sie können den Wert der benutzerdefinierten Eigenschaft auch so festlegen, dass er auf eine andere benutzerdefinierte Eigenschaft verweist. Property zur Laufzeit mithilfe der Funktion var() in Ihrem Aufruf von setProperty().

/* CSS */
:root {
    --primary-color: red;
    --secondary-color: blue;
}

<!-- HTML -->
<p>Sweet! I’m a blue paragraph!</p>

/* JS */
document.documentElement.style.setProperty('--primary-color', 'var(--secondary-color)');

Da benutzerdefinierte Eigenschaften auf andere benutzerdefinierte Eigenschaften in Ihrem können Sie sich vorstellen, wie dies zu allen möglichen Laufzeiteffekte.

Unterstützte Browser

Derzeit unterstützen Chrome 49, Firefox 42, Safari 9.1 und iOS Safari 9.3 benutzerdefinierte Eigenschaften.

Demo

Testen Sie die Beispiel für einen Einblick in all die interessanten Techniken, die Sie jetzt nutzen können, bis hin zu benutzerdefinierten Eigenschaften.

Weitere Informationen

Wenn Sie mehr über benutzerdefinierte Eigenschaften erfahren möchten, Das Google Analytics-Team hat in einem Artikel beschrieben, warum er sich für benutzerdefinierte Properties begeistert. und den Fortschritt in anderen Browsern chromestatus.com.