Muster für die Praktische CSS Benutzerdefinierte Eigenschaften Verwenden

0
9

Ich habe das Spiel mit CSS Benutzerdefinierte Eigenschaften zu entdecken, Ihre Kraft, da browser-Unterstützung ist endlich an einer Stelle, wo wir Sie in unsere Produktion von code. Ich habe mit Ihnen in eine Reihe verschiedener Möglichkeiten, und ich würde für Sie lieben, zu bekommen, so begeistert, wie ich bin. Sie sind so nützlich und mächtig!

Ich finde, dass CSS-Variablen Verwendung neigt dazu, fallen in Kategorien. Natürlich, Sie sind frei zu verwenden, CSS-Variablen, jedoch, das Sie mögen, aber denken Sie in diesen verschiedenen Kategorien können Ihnen helfen, die verschiedenen Möglichkeiten, in denen Sie verwendet werden können.

  • Variablen. Die Grundlagen, wie Einstellung, eine Marke, die Farbe zu verwenden, wo immer es benötigt wird.
  • Default-Werte. Zum Beispiel, ein Standard-border-radius überschrieben werden können, später.
  • Cascading Werte. Mit hinweisen, basierend auf Spezifität, wie die Vorlieben der user.
  • Scoped-Regelsätze. Beabsichtigte änderungen an einzelnen Elementen, wie Schaltflächen und links.
  • Mixins in Verbindung. Regelsätze bestimmt, um deren Werte zu einem neuen Kontext.
  • Inline-Eigenschaften. Werte übergeben von inline-styles in HTML.

Die Beispiele, die wir betrachten werden, sind vereinfachte und verkürzte Muster aus einer CSS-Frameworks, die ich erstellt und pflegen genannt Cutestrap.

Ein kurzer Hinweis auf das browser-Unterstützung

Es gibt zwei gemeinsamen Zeilen der Fragen, die ich höre, wenn Benutzerdefinierte Eigenschaften kommen. Die erste ist über den browser-support. Welche Browser Sie unterstützen? Gibt es fallbacks brauchen wir, wo sind Sie nicht unterstützt?

Den globalen Markt teilen, dass der support die Dinge, die wir abdecken, in diesem post ist 85%. Dennoch ist es Wert, cross-referencing, caniuse), die mit Ihrem Benutzer-Basis, um zu bestimmen, wie viel und wo progressive enhancement sinnvoll für Ihr Projekt.

Die zweite Frage ist immer, darüber, wie Sie Benutzerdefinierte Eigenschaften verwenden. Also lassen Sie uns Tauchen Sie ein in Verwendung!

Muster 1: Variablen

Das erste, was wir angehen, ist das setzen einer variable für eine Marke, Farbe, wie eine Benutzerdefinierte Eigenschaft aus, und verwenden Sie es auf ein SVG-element. Wir werden auch einen fallback zu decken, die Benutzer auf trailing-Browser.

html – {
–brand-color: hsl(230, 80%, 60%);
}

.logo {
Füllung: pink; /* fallback */
füllen: var(–Marke-Farbe);
}

Hier haben wir deklariert eine variable genannt-Marke-Farbe in unser html-Regelsatz. Die variable ist definiert, die sich auf ein element, welches immer vorhanden ist, so wird es von Kaskade zu jedem element, wo es verwendet wird. Lange Geschichte kurz, wir können diese variable auch in unserem .logo-Regelsatz.

Wir erklärten, eine rosa fallback-Wert für nachfolgende Browser. In der zweiten Erklärung ausfüllen, wir passieren –Marke-Farbe in der var () – Funktion zurückgeben wird, haben wir den Wert für die Benutzerdefinierte Eigenschaft.

Das ist ziemlich viel, wie das Muster geht: Definition der Variablen (–Variablen-Namen) und dann auf ein element (var(–variable-name)).

Siehe Stift
Muster für die Praktische Benutzerdefinierte Eigenschaften: Beispiel: 1.0 von Tyler Childs (@tylerchilds)
auf CodePen.

Muster 2: Default-Werte

Der var () – Funktion, die wir bei dem ersten Beispiel kann auch die default-Werte im Falle der Benutzerdefinierten Eigenschaft zugreifen möchten, ist nicht festgelegt.

Zum Beispiel, sagen, dass wir buttons mit abgerundeten Rahmen. Wir erstellen eine variable — nennen wir es-Rundheit — aber wir werden nicht definieren, so wie wir es zuvor getan haben. Stattdessen, wir werden weisen Sie ein Standard-Wert, wenn man die variable verwenden.

.button {
/* –Rundheit: 2px; */
border-radius: var(–Rundheit, 10px);
}

Ein Fall für default-Werte ohne Definition der Benutzerdefinierten Eigenschaft ist, wenn sich Ihr Projekt noch in-design, aber Ihre Funktion ist heute fällig. Diese machen es viel einfacher, um den Wert zu aktualisieren später, wenn die design-änderungen.

Also, geben Sie Ihrem button einen schönen Standard, erfüllen Sie eine Frist und wenn –Rundheit endlich als eine Globale Benutzerdefinierte Eigenschaft, die euer button haben, erhalten das update kostenlos, ohne wieder zu kommen, es.

Siehe Stift
Muster für die Praktische Benutzerdefinierte Eigenschaften: Beispiel 2.0 von Tyler Childs (@tylerchilds)
auf CodePen.

Sie können Bearbeiten auf CodePen und kommentieren Sie den code oben, um zu sehen, wie die Schaltfläche aussieht, wenn –Rundung ist eingestellt!

Muster 3: Kaskadierung Werte

Jetzt haben wir die Grundlagen unter unseren Gürtel, wir bauen die Zukunft verdanken wir uns selbst. Ich vermisse wirklich die Persönlichkeit, die ZIEL-und MySpace hatte, indem Benutzer äußern sich mit benutzerdefinierten text-und Hintergrundfarben auf profile.

Wir bringen die zurück und bauen eine Schule-message-board, wo jeder Schüler können Ihre eigene schriftart, Hintergrundfarbe und Textfarbe für die Nachrichten, die Sie veröffentlichen.

Benutzer-basierten Themen

Was wir im Grunde tun, ist, dass die Studierenden ein eigenes Design erstellen. Wir werden das Thema gesetzt Konfigurationen in Daten-Attribut-Regelsätze, so dass alle Nachkommen — ein .message-element in diesem Fall—, die verbrauchen, werden die Themen der Zugriff auf diese Benutzerdefinierten Eigenschaften.

.Nachricht {
background-color: var(–Schüler-Hintergründe, #fff);
Farbe: var(–student-Farbe, #000);
font-family: var(–student-schriftart “Times New Roman”, serif);
margin-bottom: 10px;
padding: 10px;
}

[Daten-Schüler-theme=”rachel”] {
–student-Hintergrundfarbe: rgb(43, 25, 61);
–student-color: rgb(252, 249, 249);
–student-schriftart: Arial, sans-serif;
}

[Daten-Schüler-theme=”jen”] {
–student-hintergrund: #d55349;
–student-color: #000;
–Schüler-Schrift: Avenir, Helvetica, sans-serif;
}

[Daten-Schüler-theme=”tyler”] {
–student-hintergrund: blau;
–student-Farbe: gelb;
–student-schriftart: “Comic Sans MS”, “Comic Sans”, cursive;
}

Hier ist das markup:

<section>
<div data-Schüler-theme=”chris”>
<p class=”Meldung”>Chris: ich habe Vorträge auf Veranstaltungen und workshops auf der ganzen Welt auf Konferenzen.</p>
</div>
<div data-Schüler-theme=”rachel”>
<p class=”Meldung”>Rachel: ich bevorzuge E-Mails über andere Formen der Kommunikation.</p>
</div>
<div data-Schüler-theme=”jen”>
<p class=”Meldung”>Jen: Das ist der Grund, warum ich sofort mein neues team mit Slack für die Echtzeit-chat.</p>
</div>
<div data-Schüler-theme=”tyler”>
<p class=”Meldung”>Tyler: ich vermisse ZIEL und MySpace, aber das message-board ist okay.</p>
</div>
</section>

Wir haben alle unsere Schüler Themen mit dem [data-student-Thema] Selektoren für unsere Schüler Thema Regelsätze. Die Benutzerdefinierten Eigenschaften für hintergrund, Farbe und schriftart gelten für unsere .Nachricht Regelsatz, wenn Sie für die Schüler da .Nachricht ist ein Nachkomme der div mit den Daten-Attribut, das, wiederum, enthält die Benutzerdefinierten Eigenschaftswerte zu konsumieren. Ansonsten werden die Standard-Werte, die wir zur Verfügung gestellt wird stattdessen verwendet werden.

Siehe Stift
Muster für die Praktische Benutzerdefinierte Eigenschaften: Beispiel 3.0 von Tyler Childs (@tylerchilds)
auf CodePen.

Lesbar theme überschreiben

Als Spaß und cool wie es ist für Benutzer zu Steuern, benutzerdefinierte Formatvorlagen, welche Benutzer wählen Sie nicht immer erreichbar sein mit überlegungen für Kontrast, Farbe vision-Mangel, oder jemand, der lieber die Augen Bluten nicht beim Lesen. Denken Sie daran, die GeoCities-Tage?

Fügen wir eine Klasse, bietet ein sauberes Aussehen und fühlen und legen Sie es auf das übergeordnete element (<section>), so überschreibt es alle Schüler-Thema, wenn es vorhanden ist.

.lesbar-Thema [data-student-Thema] {
–student-hintergrund: hsl(50, 50%, 90%);
–student-color: hsl(200, 50%, 10%);
–student-schriftart: Verdana, Geneva, sans-serif;
}
<section class=”lesbar-theme”>

</section>

Wir sind unter Verwendung der Kaskade zu überschreiben, die Schüler Themen, die durch die Einstellung einer höheren Spezifität, so dass die hintergrund, Farbe und schriftart werden in Umfang und die gelten für jeden .Nachricht Regelsatz.

Siehe Stift
Muster für die Praktische Benutzerdefinierte Eigenschaften: Beispiel 3.1 von Tyler Childs (@tylerchilds)
auf CodePen.

Muster 4: Scoped-Regelsätze

Apropos Rahmen, wir können den Gültigkeitsbereich von Benutzerdefinierten Eigenschaften und nutzen Sie, um zu rationalisieren, was sonst boilerplate CSS. So können wir zum Beispiel definieren Sie Variablen für die verschiedenen link-Zustände.

a {
–link: hsl(230, 60%, 50%);
–link-besucht: hsl(290, 60%, 50%);
–link-hover: hsl(230, 80%, 60%);
–link-active: hsl(350, 60%, 50%);
}

a:link {
Farbe: var(–link);
}

a:visited {
Farbe: var(–link-besucht);
}

a:hover {
Farbe: var(–link-hover”);
}

a:active {
Farbe: var(–link-active);
}
<a href=”#”>Link Beispiel</a>

Jetzt haben wir geschrieben die Benutzerdefinierten Eigenschaften weltweit auf den <a> – element und verwendet Sie auf unserer link-Zustände, die wir nicht brauchen, um Ihnen zu schreiben wieder. Diese stammen aus dem Bereich <a> – element den Regelsatz, so dass Sie nur auf anchor-tags und Ihre Kinder. Dies erlaubt uns nicht den globalen Namensraum verschmutzen.

Beispiel: Graustufen link

Vorwärts gehend, wir kontrollieren die links, die wir gerade erstellt haben, durch ändern der Benutzerdefinierten Eigenschaften für unsere verschiedenen Anwendungsfälle. Zum Beispiel, lassen Sie uns ein grauer link.

.Graustufen – {
–link: LightSlateGrey;
–link-besucht: Silber;
–link-hover: DimGray;
–link-active: LightSteelBlue;
}
<a href=”#” class=”grayscale”>Link Beispiel</a>

Wir haben erklärte ein .Graustufen-Regelsatz enthält die Farben für unsere verschiedenen link-Zustände. Da die Auswahl für die dieser Regelsatz hat eine größere Spezifität dann die Standardeinstellung dieser variable Werte verwendet werden, und dann angewendet, um die pseudo-Klasse-Regelsätzen für unsere link-Staaten statt, was definiert wurde, auf den <a> – element.

Siehe Stift
Muster für die Praktische Benutzerdefinierte Eigenschaften: Beispiel 4.0 von Tyler Childs (@tylerchilds)
auf CodePen.

Beispiel: Benutzerdefinierte links

Wenn die Einstellung vier Benutzerdefinierte Eigenschaften fühlt sich an wie zu viel arbeiten, was, wenn wir mit einem einzigen Farbton statt? Das macht die Dinge viel einfacher zu verwalten.

.custom-link {
–Farbton: 30;
–link: hsl(var(–Farbton), 60%, 50%);
–link-besucht: hsl(calc(var(–Farbton) + 60), 60%, 50%);
–link-hover: hsl(var(–Farbton), 80%, 60%);
–link-active: hsl(calc(var(–Farbton) + 120), 60%, 50%);
}

.Gefahr {
–Farbton: 350;
}
<a href=”#” class=”custom-link”>Link Beispiel</a>
<a href=”#” class=”custom-link-danger”>Link Beispiel</a>

Siehe Stift
Muster für die Praktische Benutzerdefinierte Eigenschaften auf: Beispiel 4.1 von Tyler Childs (@tylerchilds)
auf CodePen.

Durch die Einführung einer Variablen für eine hue-Wert und die Anwendung, um unsere HSL-Farbwerte in den anderen Variablen, wir haben lediglich zu ändern, dass ein Wert zu aktualisieren, werden alle vier link-Staaten.

Berechnungen sind leistungsstarke in Kombination mit Benutzerdefinierten Eigenschaften, da Sie lassen
Ihre Stile mehr Ausdruck zu verleihen, mit weniger Aufwand. Check out diese Technik, die von Josh Bader, wo er verwendet einen ähnlichen Ansatz, um die Durchsetzung barrierefreien Farbkontrasten auf den buttons.

Muster 5: Mixins In Verbindung

Ein mixin, in Bezug auf Benutzerdefinierte Eigenschaften, ist eine Funktion deklariert eine Benutzerdefinierte Eigenschaft-Wert. Die Argumente für die Mixins sind andere Benutzerdefinierte Eigenschaften, wird eine Neuberechnung der mixin, wenn Sie verändert, die wiederum die update-Stile.

Der benutzerdefinierte link-Beispiel, das wir gerade angeschaut, ist eigentlich ein mixin. Wir können den Wert für –Farbton und dann jede der vier link-Staaten wird entsprechend neu berechnen.

Beispiel: Grundlinienraster-Stiftung

Lassen Sie uns erfahren Sie mehr über Mixins in Verbindung durch erstellen einer baseline grid zu helfen, mit vertikalen Rhythmus. Auf diese Weise, unsere Inhalte hat eine angenehme Trittfrequenz durch die Nutzung gleichbleibende Abstände.

.baseline,
.baseline * {
–Rhythmus: 2rem;
–line-height: var(–sub-Rhythmus, var(–Rhythmus));
–line-height-ratio: 1.4;
–font-size: calc(var(–line-height) / var(–line-height-ratio));
}

.baseline {
font-size: var(–font-size);
line-height: var(–line-height);
}

Wir angewendet haben, wird der Regelsatz für unser Grundlinienraster ein .baseline-Klasse und einer Ihrer Nachkommen.

  • –Rhythmus: Dies ist die Grundlage für unsere baseline. Die Aktualisierung wird es Auswirkungen auf alle anderen Eigenschaften.
  • –line-height: Dieses gesetzt ist –Rhythmus standardmäßig, da es –sub-Rhythmus ist nicht hier eingestellt.
  • –sub-Rhythmus: Dies ermöglicht es uns, zu überschreiben –line-height — und danach –die font-size — unter Beibehaltung des Gesamt-baseline grid.
  • –line-height-ratio: Dieser hilft durchzusetzen, die einen schönen Abstand zwischen den Textzeilen.
  • –font-size: Diese wird berechnet, indem unsere –line-height von unserem-line-height-ratio.

Wir setzen auch unser font-size und line-height in unserem .baseline-Regelsatz zu verwenden –font-size und –line-height von unserer Grundlinienraster. Kurz gesagt, Wann immer ändert sich der Rhythmus, die Zeilenhöhe und die Schriftgröße entsprechend ändern, während Sie gleichzeitig eine lesbare Erfahrung.

OK, lassen wir die baseline zu verwenden.

Wir erstellen eine kleine Webseite. Wir verwenden unsere –Rhythmus Benutzerdefinierte Eigenschaft für alle der Abstand zwischen den Elementen.

.baseline-h2,
.baseline-p,
.baseline ul {
padding: 0, var(–Rhythmus);
margin: 0 0 var(–Rhythmus);
}

.baseline p {
–line-height-ratio: 1.2;
}

.baseline h2 {
–sub-Rhythmus: calc(3 * var(–Rhythmus));
–line-height-ratio: 1;
}

.baseline-p,
.baseline h2 {
font-size: var(–font-size);
line-height: var(–line-height);
}

.baseline ul {
margin-left: var(–Rhythmus);
}
<section class=”baseline”>
<h2>Eine Kleine Webseite</h2>
<p>Dies ist die kleinste Webseite. Es hat drei Bemerkenswerte Eigenschaften:</p>
<ul>
<li>Kleine</li>
<li>Vorbildlich</li>
<li>Identifiziert, als Hufflepuff</li>
</ul>
</section>

Wir sind im wesentlichen mit zwei Mixins in Verbindung hier: –line-height und –font-size. Wir brauchen, um die Eigenschaften font-size und line-height um Ihre Benutzerdefinierten Eigenschaft Kollegen um die überschrift und Absatz. Die Mixins in Verbindung und neu berechnet worden in diesen Regelsätzen, sondern Sie müssen gesetzt werden, bevor die aktualisierte styling wird auf Sie angewendet werden.

Siehe Stift
Muster für die Praktische Benutzerdefinierte Eigenschaften: Beispiel 5.0 von Tyler Childs (@tylerchilds)
auf CodePen.

Etwas im Auge zu behalten: Sie wahrscheinlich nicht wollen, verwenden Sie die Benutzerdefinierte Eigenschaftswerte in der Regel-selbst bei der Anwendung Mixins in Verbindung mit einem wildcard-Selektor. Es gibt jene Stile, die eine höhere Spezifität als jedes andere Erbe, die zusammen mit der Kaskade, so dass Sie schwer zu überschreiben, ohne Verwendung !wichtig.

Muster 6: Inline-Eigenschaften

Wir können auch erklären, Benutzerdefinierte Eigenschaften inline. Wir bauen ein leichtes raster-system veranschaulichen.

.grid {
–Spalten: auto-fit;

display: grid;
gap: 10px;
grid-template-columns: wiederholen(var(–Spalten), minmax(0, 1fr));
}
<div class=”grid”>
<img src=”https://www.fillmurray.com/900/600″ alt=”Bill Murray” />
<img src=”https://www.placecage.com/900/600″ alt=”Nic-Cage” />
<img src=”https://www.placecage.com/g/900/600″ alt=”Nic Cage Grau” />
<img src=”https://www.fillmurray.com/g/900/600″ alt=”Bill Murray gray” />
<img src=”https://www.placecage.com/c/900/600″ alt=”Nic Cage verrückt” />
<img src=”https://www.placecage.com/gif/900/600″ alt=”Nic Cage gif” />
</div>

Standardmäßig wird das Gitter muss gleich großen Spalten, die automatisch legen Sie selbst in einer einzigen Zeile.

Siehe Stift
Muster für die Praktische Benutzerdefinierte Eigenschaften: Beispiel 6.0 von Tyler Childs (@tylerchilds)
auf CodePen.

Zur Kontrolle der Anzahl der Spalten, wir können unsere –Spalten, die Benutzerdefinierte Eigenschaft
inline auf unserer grid-element.

<div class=”grid” style=” ” –columns: 3;”>

</div>

Siehe Stift
Muster für die Praktische Benutzerdefinierte Eigenschaften: Beispiel 6.1 von Tyler Childs (@tylerchilds)
auf CodePen.

Wir haben gerade sahen sechs verschiedene use-cases für Benutzerdefinierte Eigenschaften, die — zumindest diejenigen, die ich Häufig verwenden. Sogar, wenn Sie die waren bereits bekannt und wurden mithilfe von Benutzerdefinierten Eigenschaften, hoffentlich sehen Sie diese Möglichkeiten gibt Ihnen eine bessere Vorstellung davon, Wann und wo Sie Sie effektiv nutzen können.

Gibt es verschiedene Arten von Muster, die Sie mit Benutzerdefinierten Eigenschaften? Teilen Sie in den Kommentaren und link einige demos — ich würde lieben, Sie zu sehen!

Wenn Sie das neue Benutzerdefinierte Eigenschaften suchen, um Stufe nach oben, versuchen Sie, das Spiel mit den Beispielen, die wir hier behandelt werden, aber fügen Sie media queries, um den mix. Sie werden sehen, wie adaptive dies sein kann und wie viele interessante Möglichkeiten eröffnen, wenn Sie die macht haben, die Werte ändern on-the-fly.

Plus, es gibt eine Tonne von anderen großen Ressourcen hier auf CSS-Tricks zu Ihrer Benutzerdefinierten Eigenschaften-Spiel, in dem Benutzerdefinierte Eigenschaften-Guide.

Siehe Stift
Danke für das Lesen! von Tyler Childs (@tylerchilds)
auf CodePen.