CSS benutzerdefinierte Eigenschaften: Neue M?glichkeiten zur Kontrolle von Kaskaden und Vererbung

Seit der Geburt von CSS im Jahr 1994 haben Kaskaden und Erbschaft definiert, wie wir auf Webseiten entwerfen. Beide sind leistungsstarke Merkmale, aber als Entwickler haben wir eine sehr begrenzte Kontrolle darüber, wie sie interagieren. Selektorspezifit?t und Quellcode -Reihenfolge bieten eine minimale "hierarchische" Kontrolle, aber es fehlen Nuancen - und die Vererbung erfordert eine ungebrochene Linie . Mit CSS -benutzerdefinierten Eigenschaften k?nnen wir das Kaskadieren und Vererbung auf neue Weise verwalten und steuern.

In diesem Artikel wird angezeigt, wie Sie eine benutzerdefinierte Eigenschaft "Stack" verwenden, um einige h?ufige Probleme bei der Kaskadierung zu l?sen: von Scoped -Komponenten -Stilen bis hin zu expliziteren Absichtenhierarchie.

Erfahren Sie schnell über benutzerdefinierte Eigenschaften

Der Browser verwendet ein Anbieterpr?fix (wie -Webkit- oder -moz-), um neue Eigenschaften auf die gleiche Weise zu definieren, und wir k?nnen das "leere" verwenden -Pr?fix, um unsere eigenen benutzerdefinierten Eigenschaften zu definieren. Wie Variablen in Sass oder JavaScript k?nnen wir sie verwenden, um Werte zu benennen, zu speichern und abzurufen - aber wie andere Eigenschaften in CSS, sie kaskadieren und mit dem DOM geerbt .

 <code>/* 定義自定義屬性*/ html { --brand-color: rebeccapurple; }</code>

Um auf diese erfassten Werte zuzugreifen, verwenden wir die Funktion var (). Es hat zwei Teile: zuerst den Namen der benutzerdefinierten Eigenschaft und dann der Fallback -Wert, wenn die Eigenschaft nicht definiert ist:

 <code>button { /* 如果可用，則使用--brand-color，否則回退到deeppink */ background: var(--brand-color, deeppink); }</code>

Dies ist kein Unterstützung von ?lteren Browsern. Wenn der Browser die benutzerdefinierten Eigenschaften nicht versteht, ignoriert er die gesamte Var () -DEklaration. Stattdessen ist dies ein integrierter Weg, um mit undefinierten Variablen umzugehen, ?hnlich wie der Schriftstapel, der eine Fallback-Schriftfamilie definiert, wenn die Schriftart nicht verfügbar ist. Wenn wir keine Fallback -Werte liefern, wird der Standard nicht festgelegt.

Bauen Sie Variable "Stack" auf

Diese F?higkeit, Fallback-Werte zu definieren, ?hnelt dem "Schriftart", der in der Schriftfamilie verwendet wird. Wenn die erste Serie nicht verfügbar ist, wird die zweite Serie verwendet und so weiter. Die Funktion var () akzeptiert nur einen einzelnen Fallback -Wert, aber wir k?nnen die Funktion var () nisten, um einen benutzerdefinierten Attribut -Fallback -Stapel einer beliebigen Gr??e zu erstellen:

 <code>button { /* 嘗試Consolas，然后是Menlo，然后是Monaco，最后是monospace */ font-family: Consolas, Menlo, Monaco, monospace; /* 嘗試--state，然后是--button-color，然后是--brand-color，最后是deeppink */ background: var(--state, var(--button-color, var(--brand-color, deeppink))); }</code>

Wenn die verschachtelte Syntax zum Stapeln von Eigenschaften sperrig aussieht, k?nnen Sie einen Pr?prozessor wie SASS verwenden, um ihn kompakter zu machen.

Eine einzelne Fallback -Wertgrenze ist erforderlich, um Fallback -Werte zu unterstützen, die Kommas enthalten - z. B. Schriftstapel oder hierarchische Hintergrundbilder:

 <code>html { /* 后備值為"Helvetica, Arial, sans-serif" */ font-family: var(--my-font, Helvetica, Arial, sans-serif); }</code>

Definieren Sie "Umfang"

Mit dem CSS -Selektor k?nnen wir in einen bestimmten verschachtelten Kontext in die HTML -DOM -Baum- und Stilelemente eintauchen.

 <code>/* 所有鏈接*/ a { color: slateblue; } /* section 內(nèi)的鏈接*/ section a { color: rebeccapurple; } /* article 內(nèi)的鏈接*/ article a { color: deeppink; }</code>

Dies ist nützlich, erfasst jedoch nicht die Realit?t von "modularen" objektorientierten oder komponentenorientierten Stilen. M?glicherweise haben wir viele Artikel und Abschnitte, die in verschiedenen Konfigurationen verschachtelt sind. Wir brauchen einen Weg, um zu kl?ren, welcher Kontext oder Umfang Vorrang haben sollte, wenn sie sich überschneiden.

Proximity -Umfang

Angenommen, wir haben ein. Light -Thema und ein .dark -Thema. Wir k?nnen diese Klassen im Stammelement verwenden, um die Seitenweiten-Standardwerte zu definieren, aber wir k?nnen sie auch auf bestimmte Komponenten anwenden, die auf verschiedene Arten verschachtelt sind:

Jedes Mal, wenn wir eine der Farbmusterklassen anwenden, werden die Hintergrund- und Farbeigenschaften zurückgesetzt und dann durch die verschachtelten Titel und Abs?tze geerbt. In unserem Hauptkontext erben die Farben aus der Klasse. Die Vererbung basiert auf direkter Blutlinie, sodass der n?chste Vorfahren mit definierten Werten Vorrang hat. Wir nennen es die N?he .

Die N?he ist wichtig für die Vererbung, hat jedoch keinen Einfluss auf die Selektoren, die auf Spezifit?t beruhen. Dies wird zu einem Problem, wenn wir etwas im inneren dunklen oder hellen Beh?lter stylen wollen.

Hier versuche ich, helle und dunkle Knopfvarianten zu definieren. Die Light -Modus -Schaltfl?chen sollten Rebeccapurple mit wei?em Text sein, damit sie hervorstechen, w?hrend die Tasten des Dark -Modus mit schwarzem Text Pflaumen sein sollten. Wir w?hlen die Tasten direkt basierend auf den hellen und dunklen Kontexten aus, aber dies funktioniert nicht:

Einige Schaltfl?chen sind in beiden Kontexten, mit .Light- und .dark -Vorfahren. In diesem Fall wollen wir, dass das jüngste Thema übernimmt (Erben des N?herungsverhaltens ), aber wir erhalten der zweite Selektor, der den ersten Selektor (Kaskadenverhalten) überschreibt. Da diese beiden Selektoren die gleiche Spezifit?t haben, bestimmt die Reihenfolge des Quellcodes den Gewinner.

Benutzerdefinierte Eigenschaften und N?he

Wir brauchen eine M?glichkeit, diese Eigenschaften aus dem Thema zu erben , wenden sie jedoch nur auf bestimmte Kinderelemente wie unsere Schaltfl?chen an. Benutzerdefinierte Eigenschaften erm?glichen dies! Wir k?nnen Werte für helle und dunkle Beh?lter definieren, aber nur ihre erblichen Werte für verschachtelte Elemente wie unsere Schaltfl?chen verwenden.

Wir setzen zuerst die Schaltfl?che so ein, dass benutzerdefinierte Eigenschaften verwendet werden und fallback "Standard" -Werte verwendet werden, falls diese Eigenschaften undefiniert sind:

 <code>button { background: var(--btn-color, rebeccapurple); color: var(--btn-contrast, white); }</code>

Jetzt k?nnen wir diese Werte basierend auf dem Kontext festlegen, sie werden den entsprechenden Vorfahren gem?? der N?he und Erbschaft gründen :

 <code>.dark { --btn-color: plum; --btn-contrast: black; } .light { --btn-color: rebeccapurple; --btn-contrast: white; }</code>

Als zus?tzlicher Bonus verwenden wir insgesamt weniger Code sowie eine einheitliche Taste -Definition:

Ich denke, dies ist eine API, um verfügbare Parameter für die Tastekomponente zu erstellen. Sowohl Sara Soueidan als auch Lea Verou haben dies in jüngsten Artikeln sehr gut behandelt.

Komponentenbesitz

Manchmal reicht die N?he nicht aus, um den Umfang zu definieren. Wenn JavaScript -Frameworks "Scope -Stile" generieren, stellen sie das Eigentum bestimmter Objektelemente fest. Die Tab -Layout -Komponente hat die Registerkarte selbst, hat jedoch nicht den Inhalt hinter jeder Registerkarte. Dies ist auch das, was die BEM -Konvention in komplexen. Block__element -Klassennamen erfassen versucht.

Nicole Sullivan pr?gte 2011 den Begriff ?Donut Scope“, um dieses Problem zu er?rtern. Obwohl ich glaube, dass sie Ideen zu diesem Thema aktualisiert hat, hat sich das grundlegende Problem nicht ge?ndert. Selektoren und Spezifit?t sind gro?artig, um zu beschreiben, wie wir detaillierte Stile auf einem breiten Muster erstellen, vermitteln jedoch kein klares Eigentumsgefühl.

Wir k?nnen einen benutzerdefinierten Eigenschaftsstapel verwenden, um dieses Problem zu l?sen. Wir werden zun?chst "globale" Eigenschaften auf dem Element erstellen, die für unsere Standardfarben verwendet werden:

 <code>html { --background--global: white; --color--global: black; --btn-color--global: rebeccapurple; --btn-contrast--global: white; }</code>

Jetzt k?nnen wir es überall verwenden, wo wir es verweisen m?chten. Wir werden die Daten-Themen-Eigenschaft verwenden, um unsere Vordergrund- und Hintergrundfarben anzuwenden. Wir m?chten, dass der globale Wert den Standard -Fallback -Wert liefert, aber wir m?chten auch die Option, ihn mit einem bestimmten Thema zu überschreiben. Hier kommt der "Stack" ins Spiel:

 <code>[data-theme] { /* 如果沒有組件值，則使用全局值*/ background: var(--background--component, var(--background--global)); color: var(--color--component, var(--color--global)); }</code>

Jetzt k?nnen wir die umgekehrte Komponente definieren, indem wir die Eigenschaft von *-Komponenten auf die Rückseite der globalen Eigenschaft einstellen:

 <code>[data-theme='invert'] { --background--component: var(--color--global); --color--component: var(--background--global); }</code>

Wir m?chten jedoch nicht, dass diese Einstellungen aus dem Eigentümer -Donut erben. Daher setzen wir diese Werte in jedem Thema auf die erste (undefinierte) zurück. Wir müssen dies in einer niedrigeren Spezifit?t oder früheren Quellcode -Reihenfolge tun, damit es Standardwerte bereitstellt, die jedes Thema überschreiben kann:

 <code>[data-theme] { --background--component: initial; --color--component: initial; }</code>

Das anf?ngliche Schlüsselwort hat eine besondere Bedeutung, wenn sie für benutzerdefinierte Eigenschaften verwendet werden und es in den garantierten Zustand zurückkehren. Dies bedeutet, dass es nicht an den festen Hintergrund übergeben wird: Initial oder Farbe: Initial, die benutzerdefinierte Eigenschaft wird undefiniert und wir werden auf den n?chsten Wert im Stapel zurückgreifen, d. H. Die globalen Einstellungen.

Wir k?nnen dasselbe mit der Taste tun und dann sicherstellen, dass das Datenthema auf jede Komponente angewendet wird. Wenn kein spezifisches Thema angegeben ist, standardisch für jede Komponente zum globalen Thema:

Definieren Sie "Quelle"

Eine CSS -Kaskade ist eine Reihe von Filterschichten, mit denen festgestellt wird, welcher Wert bei der Definition mehrerer Werte in derselben Eigenschaft bevorzugt werden sollte. Wir interagieren am h?ufigsten mit bestimmten Ebenen oder der endgültigen Hierarchie basierend auf der Quellcodesequenz - aber die erste Schicht der Kaskade ist die "Quelle" des Stils. Quelle beschreibt die Quelle des Stils - normalerweise den Browser (Standard), Benutzer (Pr?ferenz) oder Autor (US).

Standardm??ig überschreibt der Autorenstil Benutzerpr?ferenzen und Benutzereinstellungen überschreiben Browser -Standardeinstellungen. Dies ?ndert sich !important , und die Quelle ist umgekehrt: Der Browser !important Stil hat die h?chste Quelle, dann die wichtigen Benutzerpr?ferenzen, dann unser Autor wichtige Stile, vor allem normale Ebenen. Es gibt einige andere Quellen, aber wir werden hier nicht auf Details eingehen.

Wenn wir eine benutzerdefinierte Eigenschaft "Stack" erstellen, bauen wir ein sehr ?hnliches Verhalten auf. Wenn wir eine vorhandene Quelle als benutzerdefinierte Eigenschaftsstapel darstellen m?chten, sieht sie so aus:

 <code>.origins-as-custom-properties { color: var(--browser-important, var(--user-important, var(--author-important, var(--author, var(--user, var(--browser)))))); }</code>

Diese Schichten existieren bereits, daher gibt es keinen Grund, sie neu zu erstellen. Wenn wir jedoch über unser "globales" und "Komponenten" -Stile oben geschoben werden, tun wir etwas ?hnliches und erstellen eine "Komponenten" -Er -Quellebene, die unsere "globale" Ebene überschreibt. Die gleiche Methode kann verwendet werden, um verschiedene hierarchische Probleme in CSS zu l?sen, die nicht immer mit Spezifit?t beschrieben werden k?nnen:

• überschreiben ?Komponenten? Thema ?Standardwerte
• Thema ?Entwerfen Sie ein System oder ein Framework
• Status ?Typ? Standardwert

Schauen wir uns noch einige Tasten an. Wir ben?tigen einen Standard -Schaltfl?chenstil, einen behinderten Status und verschiedene Tastentypen "wie Gefahr, prim?r und sekund?r. Wir m?chten, dass der behinderte Zustand die Typvariante immer überschreibt, aber der Selektor kann diesen Unterschied nicht erfassen:

Wir k?nnen jedoch einen Stapel definieren, der die "Typ" und "Status" in der Reihenfolge liefert, die wir Priorit?ten setzen m?chten:

 <code>button { background: var(--btn-state, var(--btn-type, var(--btn-default))); }</code>

Wenn wir nun zwei Variablen festlegen, wird der Zustand immer Vorrang haben:

Ich habe ein Cascading -Farb -Framework mit dieser Technik erstellt, mit der benutzerdefinierte Themeneinstellungen basierend auf Layering:

• Vordefinierte Themeneigenschaften in HTML
• Benutzerfarbeinstellungen
• Helle und dunkle Modi
• Globales Thema Standardeinstellungen

Mischen und übereinstimmen

Diese Methoden k?nnen extrem sein, aber die meisten t?glichen Anwendungsf?lle k?nnen mit zwei oder drei Werten im Stapel verarbeitet werden, normalerweise unter Verwendung der oben genannten Techniken:

• Definieren Sie den variablen Stapel der Schicht
• Die Vererbung basiert auf N?he und Umfang
• Wenden Sie die Anfangswerte sorgf?ltig an, um verschachtelte Elemente aus dem Umfang zu entfernen

Wir haben diese benutzerdefinierten Eigenschaften "Stack" in unseren Oddbird -Projekten verwendet. Wir erforschen immer noch, aber sie haben uns geholfen, Probleme zu l?sen, die mit nur Selektoren und Spezifit?t schwer zu l?sen sind. Mit benutzerdefinierten Eigenschaften müssen wir keine Cascade oder Erbschaft bek?mpfen. Wir k?nnen sie wie erwartet erfassen und nutzen und haben eine bessere Kontrolle darüber, wie sie in jedem Fall angewendet werden. Für mich ist dies ein gro?er Gewinn für CSS - insbesondere bei der Entwicklung von Stilrahmen, Tools und Systemen .

Das obige ist der detaillierte Inhalt vonVerwenden der benutzerdefinierten Eigenschaft 'Stapel', um die Kaskade zu z?hmen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!