Patronen voor Praktische Aangepaste CSS Eigenschappen

0
6

Ik heb spelen met CSS Aangepaste Eigenschappen te ontdekken waar hun kracht sinds browser ondersteuning is eindelijk op een plek waar we ze kunnen gebruiken in onze productie code. Ik gebruik ze in een aantal verschillende manieren en ik zou graag voor u om te krijgen zo enthousiast over hen, zoals ik ben. Ze zijn zo handig en krachtig!

Ik vind dat de CSS-variabelen gebruik de neiging te dalen in categorieën. Natuurlijk bent u vrij om CSS te gebruiken variabelen zoals je wilt, maar het denken van hen in deze verschillende categorieën kan u helpen begrijpen van de verschillende manieren waarop ze kunnen worden gebruikt.

  • Variabelen. De basisprincipes, zoals het instellen van een merk kleur te gebruiken waar het nodig is.
  • De Standaard Waarden. Bijvoorbeeld, een standaard border-radius die overschreven kan worden later.
  • Trapsgewijze Waarden. Met behulp van aanwijzingen op basis van specificiteit, zoals voorkeuren van de gebruiker.
  • Bereik Regelsets. Opzettelijke varianten op de afzonderlijke elementen, zoals koppelingen en knoppen.
  • Mixins. Regelsets de bedoeling om hun waarden aan een nieuwe context.
  • Inline-Eigenschappen. Doorgegeven waarden van inline stijlen in onze HTML.

De voorbeelden kijken we naar een vereenvoudigde en verkorte patronen van een CSS framework ik gemaakt en onderhouden genoemd Cutestrap.

Een korte opmerking over browser ondersteuning

Er zijn twee algemene lijnen van de vragen die ik hoor als Aangepaste Eigenschappen naar boven komen. De eerste is over de steun van de browser. Welke browsers ondersteunen hen? Zijn er uitwijkmogelijkheden we moeten gebruiken wanneer ze niet worden ondersteund?

Het wereldwijde marktaandeel dat de ondersteuning van de dingen die we behandelen in deze post is 85%. Nog steeds, het is de moeite waard cross-referencing caniuse) met uw gebruikers om te bepalen hoe veel en waar progressive enhancement zinvol is voor uw project.

De tweede vraag gaat altijd over het gebruik van Aangepaste Eigenschappen. Dus duik in het gebruik!

Patroon 1: Variabelen

Het eerste wat we aanpakken, is het instellen van een variabele voor een merk, de kleur, zoals een Aangepaste Woning en het gebruik van het op een SVG-element. We zullen ook gebruik maken van een terugval te dekken gebruikers op trailing browsers.

html {
–merk-kleur: hsl(230, 80%, 60%);
}

.logo {
vullen: roze; /* fallback */
vul in: var(–merk-kleur);
}

Hier hebben we uitgeroepen tot een variabele genaamd –merk-kleur in onze html-regelset. De variabele is gedefinieerd op een element dat altijd aanwezig, dus het zal cascade aan elk onderdeel waar het voor is. Lang verhaal kort te maken, kunnen we die variabele in ons .logo regelset.

We kondigden een roze fallback waarde voor trailing browsers. In de tweede invullen verklaring, passeren we –merk-kleur in de var() functie, die de waarde stellen we voor dat de Aangepaste Eigenschap.

Dat is vrij veel, hoe het patroon gaat: het definiëren van de variabele (–variabele-naam) en gebruik het dan op een element (var(–variabele-naam)).

Zie de Pen
Patronen voor Praktische Aangepaste Eigenschappen: Voorbeeld 1.0 van Tyler Childs (@tylerchilds)
op CodePen.

Patroon 2: Standaard waarden

De var() functie hebben we in het eerste voorbeeld, kan ook standaard waarden in geval de Aangepaste Eigenschap probeert te openen is niet ingesteld.

Bijvoorbeeld, zeggen we geven knoppen een afgeronde rand. Kunnen We een variabele maken — we noemen het –ronding — maar we zullen het niet definiëren het als tevoren. In plaats daarvan wijzen we een standaard waarde bij het samenstellen van de variabele te gebruiken.

.toets {
/* –ronding: 2px; */
border-radius: var(–ronding 10px);
}

Een use case voor standaard waarden zonder het definiëren van de Aangepaste Eigenschap is wanneer uw project is nog in ontwerp, maar uw functie is vandaag. Dit maakt het een stuk makkelijker om de waarde te updaten later als de veranderingen in het ontwerp.

Zo geef je uw button een mooie standaard, voldoen aan uw deadline en toen –ronding is tenslotte een globale Aangepaste Woning, van de knop zal krijgen dat de update voor de gratis zonder te komen erop terug.

Zie de Pen
Patronen voor Praktische Aangepaste Eigenschappen: Voorbeeld 2.0 door Tyler Childs (@tylerchilds)
op CodePen.

U kunt bewerken op CodePen en uncomment de code hierboven om te zien hoe de knop eruit zal zien wanneer –ronding is ingesteld!

Patroon 3: Trapsgewijze waarden

Nu we de basis onder onze riem, laten we beginnen bouwen aan de toekomst we onszelf te danken. Ik mis de persoonlijkheid die DOEL en MySpace had doordat gebruikers zich te uiten met aangepaste tekst en achtergrond kleuren op profielen.

Laten we zorgen dat de rug en de bouw van een school message board waar elke student kan zijn eigen lettertype, de achtergrondkleur en de tekstkleur voor de berichten die ze plaatsen.

Gebruikers op basis van thema ‘ s

Wat we in feite doen is het laten maken leerlingen een aangepast thema. We zetten het thema configuraties in data-attribuut regelsets dus dat alle nakomelingen — een .bericht element (in dit geval) verbruiken de thema ‘ s zullen toegang hebben tot deze Aangepaste Eigenschappen.

.bericht {
background-color: var(–student-achtergrond #fff);
kleur: var(–student-kleur #000);
font-family: var(–student-lettertype “Times New Roman”, serif);
margin-bottom: 10px;
padding: 10px;
}

[data-student-theme=”rachel”] {
–student-achtergrond: rgb(43, 25, 61);
–student-color: rgb(252, 249, 249);
–student-font: Arial, sans-serif;
}

[data-student-theme=”jen”] {
–student-achtergrond: #d55349;
–student-color: #000;
–student-font: Avenir, Helvetica, sans-serif;
}

[data-student-theme=”tyler”] {
–student-achtergrond: blue;
–student-kleur: geel;
–student-font: Comic Sans MS”, “Comic Sans”, cursive;
}

Hier is de markup:

de sectie <sectie>
<div data-student-theme=”chris”>
<p class=”bericht”>Chris: ik heb gesproken bij evenementen en workshops gegeven over de hele wereld op congressen.</p>
</div>
<div data-student-theme=”rachel”>
<p class=”bericht”>Rachel: ik heb liever e-mail over andere vormen van communicatie.</p>
</div>
<div data-student-theme=”jen”>
<p class=”bericht”>Jen: Dit is de reden waarom ik meteen mijn nieuwe team met Speling voor het real-time chat.</p>
</div>
<div data-student-theme=”tyler”>
<p class=”bericht”>Tyler: ik mis STREVEN en MySpace, maar dit message board orde is.</p>
</div>
</section>

Wij hebben al onze student thema ‘ s met behulp van de [data-student-thema] kiezers voor onze student, thema regelsets. De Aangepaste Eigenschappen voor achtergrond, kleur, lettertype en zal van toepassing zijn op ons .bericht regelset als ze zijn ingesteld voor die student, omdat .bericht is een afstammeling van de div met de data-attribuut dat, op zijn beurt, met de Aangepaste waarden van de Eigenschap om te consumeren. Anders is de standaard waarden die in ons verstrekt zal worden gebruikt.

Zie de Pen
Patronen voor Praktische Aangepaste Eigenschappen: Voorbeeld 3.0 door Tyler Childs (@tylerchilds)
op CodePen.

Leesbaar thema overschrijven

Zo leuk en cool als het is voor gebruikers van aangepaste stijlen, wat gebruikers kunnen kiezen niet altijd toegankelijk met overwegingen voor het contrast, de kleur van de visie tekort, of iemand die liever hun ogen niet bloeden bij het lezen. Vergeet niet de GeoCities dagen?

Laten we een klasse toe te voegen, die zorgt voor een schonere look en feel en zet deze op het bovenliggende element (<sectie>) dus het overschrijft elke student thema wanneer het aanwezig is.

.leesbaar-thema [data-student-thema] {
–student-achtergrond: hsl(50, 50%, 90%);
–student-kleur: hsl(200, 50%, 10%);
–student-font: Verdana, Geneva, sans-serif;
}
<section class=”leesbare-thema”>

</section>

We zijn het gebruik van de cascade voor het overschrijven van de student thema ‘ s door het instellen van een hogere specificiteit zoals de achtergrond, kleur, lettertype en zal in omvang en zijn van toepassing op elk .bericht regelset.

Zie de Pen
Patronen voor Praktische Aangepaste Eigenschappen: Voorbeeld 3.1 door Tyler Childs (@tylerchilds)
op CodePen.

Patroon 4: Bereik regelsets

Het spreken van de werkingssfeer, kunnen we toepassingsgebied Aangepaste Eigenschappen en gebruik ze om te stroomlijnen wat anders bewaarplaats CSS. Bijvoorbeeld, we kunnen definiëren van de variabelen voor de verschillende link staten.

een {
–link: hsl(230, 60%, 50%);
–link-bezocht: hsl(290, 60%, 50%);
–link-beweeg: hsl(230, 80%, 60%);
–link-actief: hsl(350, 60%, 50%);
}

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

a:visited {
kleur: var(–link-bezocht);
}

a:hover {
kleur: var(–link aanwijst met de muis);
}

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

Nu dat we hebben geschreven in de Aangepaste Eigenschappen wereldwijd op de <a> – element en gebruikt ze op onze link staten, hoeven we niet op te schrijven van hen opnieuw. Deze zijn toegesneden op de <a> – element de regelset, dus ze zijn alleen ingesteld op anker-tags en hun kinderen. Dit stelt ons in staat om niet te vervuilen de global namespace.

Voorbeeld: Grijstinten link

Vooruit gaan, kunnen we de controle van de links die we zojuist gemaakt door het veranderen van de Aangepaste Eigenschappen voor de verschillende use cases. Bijvoorbeeld, laten we een grijs gekleurd link.

.grijstinten {
–link: LightSlateGrey;
–link-bezocht: Zilver;
–link-beweeg: DimGray;
–link-actief: LightSteelBlue;
}
<a href=”#” class=”grijswaarden”>Link Voorbeeld</a>

We hebben uitgeroepen .grijstinten regelset die bevat de kleuren voor de verschillende link staten. Sinds de selector voor deze regelset heeft een grotere specificiteit dan de standaard, deze variabele waarden worden gebruikt en vervolgens toegepast op de pseudo-class regelsets voor onze link staten in plaats van wat is vastgesteld aan de <a> – element.

Zie de Pen
Patronen voor Praktische Aangepaste Eigenschappen: Voorbeeld 4.0 van Tyler Childs (@tylerchilds)
op CodePen.

Voorbeeld: Aangepaste koppelingen

Indien door het stellen van vier Aangepaste Eigenschappen voelt het als teveel werk, wat als we een enkele tint in plaats? Dat zou kunnen maken dingen een stuk makkelijker te beheren.

.custom-link {
–tint: 30;
–link: hsl(var(–tint), 60%, 50%);
–link-bezocht: hsl(calc(var(–tint) + 60), 60%, 50%);
–link-beweeg: hsl(var(–tint), 80%, 60%);
–link-actief: hsl(calc(var(–tint) + 120), 60%, 50%);
}

.gevaar {
–tint: 350;
}
<a href=”#” class=”custom-link”>Link Voorbeeld</a>
<a href=”#” class=”custom-link gevaar”>Link Voorbeeld</a>

Zie de Pen
Patronen voor Praktische Aangepaste Eigenschappen: Voorbeeld 4.1 door Tyler Childs (@tylerchilds)
op CodePen.

Door de invoering van een variabele voor een tint waarde en het toepassen op onze HSL kleur van de waarden in de andere variabele, wij hebben slechts te wijzigen dat een waarde toe aan een update die alle vier de link staten.

De berekeningen worden in combinatie met krachtige Aangepaste Eigenschappen omdat ze laat
uw stijlen meer expressief met minder inspanning. Check out deze techniek door Josh Bader, waar hij gebruikt een soortgelijke aanpak af te dwingen toegankelijk kleur contrasten op de knoppen.

Patroon 5: Mixins

Een mixin, met betrekking tot het Aangepaste Eigenschappen, is een functie gedeclareerd als een Aangepaste waarde van de Eigenschap. De argumenten voor het mixin zijn andere Aangepaste Eigenschappen die het herberekenen van de mixin wanneer ze zijn gewijzigd, dat op zijn beurt zal de update stijlen.

De aangepaste link voorbeeld hebben we alleen gekeken is eigenlijk een mixin. We kunnen de waarde voor –tint en vervolgens elk van de vier koppeling staten wordt dienovereenkomstig herberekend.

Voorbeeld: Baseline grid stichting

Laten we meer leren over mixins door het maken van een baseline grid te helpen met verticale ritme. Op deze manier, onze inhoud is een prettige cadans door gebruik te maken van een gelijkmatige tussenruimte.

.baseline,
.baseline * {
–ritme: 2rem;
–line-height: var(–sub-ritme, var(–ritme));
–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);
}

We hebben toegepast in de regelset voor onze baseline grid in een .baseline klasse en een van zijn nakomelingen.

  • –ritme: Dit is het fundament van onze baseline. Het bijwerken van het effect op alle de andere eigenschappen.
  • –line-height: Deze is ingesteld op –ritme standaard, omdat –sub-ritme is niet ingesteld.
  • –sub-ritme: Dit stelt ons in staat om te overschrijven de –line-height — en vervolgens de –font-size — terwijl de algemene baseline grid.
  • –line-height-ratio: Dit helpt bij het versterken van een mooi bedrag van de afstand tussen regels tekst.
  • –font-size: Dit is berekend door ons –line-height door onze-line-height-verhouding.

Ook willen wij onze lettertype-grootte en line-height in ons .baseline regelset gebruik van de –font-size en –line-height van onze baseline grid. Kortom, als het ritme verandert, de regelafstand en lettergrootte dienovereenkomstig te wijzigen met behoud van een goed leesbaar ervaren.

OK, laten we de baseline te gebruiken.

We maken een kleine webpagina. We gebruiken onze-ritme van de Aangepaste Eigenschap voor alle van de afstand tussen de elementen.

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

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

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

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

.baseline ul {
margin-left: var(–ritme);
}
<section class=”baseline”>
<h2>Een Kleine Webpagina</h2>
<p>Dit is de kleinste van de webpagina. Het heeft drie opmerkelijke eigenschappen:</p>
<ul>
<li>Klein</li>
<li>Voorbeeldige</li>
<li>Geeft als Hufflepuff</li>
</ul>
</section>

We zijn in feite twee mixins hier: –line-height en –font-size. Moeten We de eigenschappen font-size en een line-height van hun Aangepaste Eigenschap collega ‘ s in om de kop en de punt. De mixins herberekend in die regels, maar ze moeten worden ingesteld voordat de bijgewerkte styling zal worden toegepast.

Zie de Pen
Patronen voor Praktische Aangepaste Eigenschappen: Voorbeeld 5.0 van Tyler Childs (@tylerchilds)
op CodePen.

Iets om in gedachten te houden: Je wilt waarschijnlijk niet om het gebruik van de Aangepaste waarden van de Eigenschap in de regelset zich bij de toepassing van mixins behulp van een joker kiezen. Het geeft deze stijlen een hogere specificiteit dan een andere erfenis die wordt geleverd samen met de cascade, waardoor ze moeilijk te negeren zonder gebruik te maken !belangrijk.

Patroon 6: Inline eigenschappen

We kunnen ook verklaren Aangepaste Eigenschappen inline. We bouwen een lichtgewicht grid systeem te demonstreren.

.raster {
–kolommen: auto-fit;

display: grid;
gap: 10px;
grid-template-kolommen: herhaal(var(–kolommen), 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 grijs” />
<img src=”https://www.fillmurray.com/g/900/600″ alt=”Bill Murray grijs” />
<img src=”https://www.placecage.com/c/900/600″ alt=”Nic Cage gek” />
<img src=”https://www.placecage.com/gif/900/600″ alt=”Nic Cage gif” />
</div>

Standaard is de grid heeft even grote kolommen die automatisch leggen zich in een enkele rij.

Zie de Pen
Patronen voor Praktische Aangepaste Eigenschappen: Voorbeeld 6.0 door Tyler Childs (@tylerchilds)
op CodePen.

Om het aantal kolommen kunnen we stellen ons –kolommen Aangepaste Eigenschap
inline op onze raster-element.

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

</div>

Zie de Pen
Patronen voor Praktische Aangepaste Eigenschappen: Voorbeeld 6.1 door Tyler Childs (@tylerchilds)
op CodePen.

We hebben net gekeken naar zes verschillende use cases voor Aangepaste Eigenschappen — althans degenen die ik vaak gebruik. Ook als u al op de hoogte van en zijn met behulp van Aangepaste Eigenschappen, hopelijk zien ze gebruikt de volgende manieren geeft u een beter idee van wanneer en waar u ze het meest effectief.

Zijn er verschillende soorten patronen die u met Aangepaste Eigenschappen? Deel ze in de comments en op de koppeling van een aantal demo ‘ s — ik zou graag om ze te zien!

Als je nieuw bent in Aangepaste Eigenschappen zijn op zoek naar een level omhoog, probeer dan te spelen met de voorbeelden die we hier besproken, maar het toevoegen van media queries om de mix. U zult zien hoe adaptieve deze kunnen worden en hoe veel interessante mogelijkheden voordoen wanneer u de power om de waarden te wijzigen op de vlieg.

Plus, zijn er een ton van andere grote bronnen direct hier op CSS-Tricks om uw Aangepaste Eigenschappen spel in de Aangepaste Eigenschappen Gids.

Zie de Pen
Bedankt voor het Lezen! door Tyler Childs (@tylerchilds)
op CodePen.