Mönster för Praktiska CSS Anpassade Egenskaper för Användning

0
8

Jag har spelat runt med CSS Anpassade Egenskaper för att upptäcka sin makt eftersom webbläsare är äntligen på en plats där vi kan använda dem i vår produktion kod. Jag har använt dem i ett antal olika sätt och jag skulle älska för dig att få glada om dem som jag. De är så användbara och kraftfulla!

Jag tycker att CSS variabler användning tenderar att falla in i kategorier. Du är naturligtvis fri att använda CSS variabler hur du vill, men funderar på dem i dessa olika kategorier kan hjälpa dig att förstå de olika sätt på vilket de kan användas.

  • Variabler. Grunderna, såsom miljö, ett märke färg att använda där det behövs.
  • Default-Värden. Till exempel, en standard border-radius som kan ändras senare.
  • Css-Värden. Med hjälp av ledtrådar som bygger på specificitet, såsom användarens preferenser.
  • Inzoomat Rulesets. Avsiktliga variationer på enskilda element, som länkar och knappar.
  • Mixins. Regeluppsättningar som är avsedd att föra fram sina värderingar till ett nytt sammanhang.
  • Inline Egenskaper. Värden som skickas från inline styles i vår HTML-kod.

De exempel vi ska titta på är förenklad och förkortad mönster från ett CSS-ramverk som jag skapat och upprätthålla kallas Cutestrap.

En snabb anteckning om webbläsaren stöd

Det finns två vanliga rader av frågor som jag får höra när Anpassade Egenskaper för att komma upp. Den första är om webbläsaren stöd. Vilka webbläsare stödjer dem? Är det fallbacks vi måste användas om de stöds inte?

Den globala marknaden för att stödja de saker vi som täcker i detta inlägg är 85%. Ändå är det värt att korsreferera caniuse) med din användare bas för att bestämma hur mycket och var progressiv förstärkning som passar för ditt projekt.

Den andra frågan är alltid om hur du använder Anpassade Egenskaper. Så låt oss dyka in i användning!

Mönster 1: Variabler

Det första vi kommer att ta itu med är att sätta en variabel för ett märke färg som en Egen Fastighet och att använda det på en SVG-element. Vi kommer också att använda en reserv för att täcka användare på avslutande webbläsare.

html {
–varumärke-färg: hsl(230, 80%, 60%);
}

.logotyp {
fyllning: rosa; /* fallback */
fyllning: var(–varumärke-färg);
}

Här har vi deklarerat en variabel som heter –varumärke-färg i vår html-regeluppsättning. Variabeln är definierad på ett element som alltid är närvarande, så det kommer cascade att varje element där det används. Lång historia kort, kan vi använda den variabeln i vår .logotyp regeluppsättning.

Vi förklarade en rosa återgång värde för efterföljande webbläsare. I den andra fylla förklaring, vi passerar –varumärke, färg i var() funktion, som returnerar det värde vi in för den Egna Fastigheten.

Det är ganska mycket hur mönstret går: definiera variabeln (–variabel-namn) och sedan använda den på ett element (var(–variabel-namn)).

Se Pennan
Mönster för Praktiska Anpassade Egenskaper: Exempel 1.0 av Tyler Childs (@tylerchilds)
på CodePen.

Mönster 2: standardvärden

Var – () – funktionen som vi använde i det första exemplet kan också ge standardvärden vid den Egna Fastigheten är det du försöker komma åt är inte inställd.

Till exempel säger vi att ge knapparna en rundad kant. Vi kan skapa en variabel — vi kommer att kalla det-rundhet — men vi kommer inte att definiera det som vi gjorde innan. I stället kommer vi att tilldela en standardvärdet när du sätter variabeln att använda.

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

Ett användningsfall för standardvärden utan att definiera den Egna Fastigheten är när ditt projekt är fortfarande under konstruktion, men din funktion på grund av i dag. Detta gör det mycket lättare att uppdatera värdet senare om förändringar i konstruktionen.

Så, du ger din knappen en bra standard, träffa din deadline och när-rundhet är äntligen in som en global Egen Fastighet, din knappen kommer att få den uppdateringen gratis utan att behöva komma tillbaka till det.

Se Pennan
Mönster för Praktiska Anpassade Egenskaper: Exempel 2.0 av Tyler Childs (@tylerchilds)
på CodePen.

Du kan redigera på CodePen och kommentera bort koden ovan för att se vad knappen ska se ut när –rundhet är inställd!

Mönster 3: Överlappande värden

Nu när vi har fått grunderna under vår bälte, låt oss börja bygga den framtid vi är skyldiga oss själva. Jag saknar verkligen personlighet att SIKTA och MySpace hade genom att låta användarna uttrycka sig med egna text-och bakgrundsfärger på profiler.

Låt oss ta tillbaka och bygga en skola anslagstavla där varje elev kan sätta sina egna typsnitt, bakgrundsfärg och textfärg för de meddelanden som de skickar.

Användaren-baserad teman

Vad vi i grund och botten gör är att låta eleverna skapa ett anpassat tema. Vi kommer att ställa in temat konfigurationer inne data-attribut regeluppsättningar så att alla ättlingar — en .meddelande element i detta fall — att konsumera de teman som kommer att ha tillgång till de Anpassade Egenskaper.

.meddelande {
background-color: var(–student-bakgrund, #fff);
färg: var(–student-färg, #000);
font-family: var(–student-teckensnitt, “Times New Roman”, serif);
margin-bottom: 10px;
padding: 10px;
}

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

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

[data-eleven-theme=”tyler”] {
–student-bakgrund: blå;
–student-färg: gul.
–student-font: “Comic Sans MS”, “Comic Sans”, cursive;
}

Här är koden:

<punkt>
<div data-eleven-theme=”chris”>
<p class=”message”>Chris: jag har talat på händelser och gett workshops över hela världen på konferenser.</p>
</div>
<div data-eleven-theme=”rachel”>
<p class=”message”>Rakel: jag föredrar e-post jämfört med andra former av kommunikation.</p>
</div>
<div data-eleven-theme=”jen”>
<p class=”message”>Jen: Det är därför jag satte genast igång med mitt nya team med Slack för real-time chat.</p>
</div>
<div data-eleven-theme=”tyler”>
<p class=”message”>Tyler: jag saknar SYFTE och MySpace, men denna anslagstavla är okej.</p>
</div>
</section>

Vi har satt alla våra studerande teman med hjälp av [data-eleven-theme] omkopplare för vår student tema rulesets. Anpassade Egenskaper för bakgrund, färg och typsnitt kommer att gälla för i vår .meddelande regeluppsättning om de är inställda för att studenten eftersom .meddelandet är en ättling av den div som innehåller de data-attribut, som i sin tur innehåller de Egna värden för att konsumera. Annars standardvärden vi som kommer att användas i stället.

Se Pennan
Mönster för Praktiska Anpassade Egenskaper: Exempel 3.0 av Tyler Childs (@tylerchilds)
på CodePen.

Lättläst tema åsidosätta

Så rolig och cool som den är för användare att styra anpassade formatmallar, vad användarna välja kommer inte alltid att vara tillgänglig med hänsyn till kontrast, färgblindhet, eller någon som föredrar sina ögon för att inte blöda vid behandlingen. Kom ihåg GeoCities dagar?

Låt oss lägga till en klass som ger ett renare utseende och känsla och ställ in den på det överordnade elementet (<del>) så att den åsidosätter någon student tema när det är närvarande.

.lättläst-tema [data-eleven-theme] {
–student-bakgrund: hsl(50, 50%, 90%);
–student-färg: hsl(200, 50%, 10%);
–student-teckensnitt: Verdana, Geneva, sans-serif;
}
<section class=”lättläst-tema”>

</section>

Vi använder kaskad att åsidosätta den studerande teman genom att ange ett högre specificitet sådana som bakgrund, färg och typsnitt kommer att vara i omfattning och kommer att gälla för alla .meddelande regeluppsättning.

Se Pennan
Mönster för Praktiska Anpassade Egenskaper: Exempel 3.1 av Tyler Childs (@tylerchilds)
på CodePen.

Mönster 4: Inzoomat regeluppsättningar

På tal om räckvidd, vi kan räckvidden Anpassade Egenskaper och använda dem för att effektivisera vad är annars standardtext CSS. Till exempel kan vi definiera variabler för olika länken staterna.

en {
–länk: hsl(230, 60%, 50%);
–länk-besökt: hsl(290, 60%, 50%);
–länk-hover: hsl(230, 80%, 60%);
–länk-aktiv: hsl(350, 60%, 50%);
}

a:link {
färg: var(–länk);
}

a:visited {
färg: var(–länk besökta);
}

a:hover {
färg: var(–länk-hover);
}

a:active {
färg: var(–länk-aktiv);
}
<a href=”#”>Länk Exempel</a>

Nu när vi har skrivit ut den Anpassade Egenskaper globalt på <a> element och använde dem på vår länk stater, vi behöver inte skriva dem igen. Dessa är begränsad till vår <a> element regeluppsättning så de är bara att ställa in på anchor-taggar och sina barn. Detta tillåter oss att inte förorena den globala namnrymden.

Exempel: Gråskala länk

Kommer fram, vi kan styra länkar vi just har skapat genom att ändra de Anpassade Egenskaper till vår användning i olika fall. Till exempel, låt oss skapa en grå-färgade länk.

.gråskala {
–länk: LightSlateGrey;
–länk-besökt: Silver;
–länk-hover: DimGray;
–länk-aktiv: LightSteelBlue;
}
<a href=”#” class=”gråskala”>Länk Exempel</a>

Vi har förklarats .gråskala regeluppsättning som innehåller färger för våra olika länken staterna. Eftersom väljaren för denna regeluppsättning har en större specificitet då standard, dessa variabel-värden används och tillämpas sedan den pseudo-klass regeluppsättningar för vår länk stater i stället för vad som var definierade på <a> – elementet.

Se Pennan
Mönster för Praktiska Anpassade Egenskaper: Exempel 4.0 av Tyler Childs (@tylerchilds)
på CodePen.

Exempel: Egna länkar

Om inställningen fyra Anpassade Egenskaper känns som för mycket arbete, vad händer om vi ställer en enda nyans i stället? Det skulle göra saker och ting mycket enklare att hantera.

.anpassad-link {
–nyans: 30;
–länk: hrt(var(–nyans), 60%, 50%);
–länk-besökt: hsl(calc(var(–nyans) + 60), 60%, 50%);
–länk-hover: hrt(var(–nyans), 80%, 60%);
–länk-aktiv: hsl(calc(var(–nyans) + 120), 60%, 50%);
}

.fara {
–nyans: 350;
}
<a href=”#” class=”custom-link”>Länk Exempel</a>
<a href=”#” class=”anpassad länk fara”>Länk Exempel</a>

Se Pennan
Mönster för Praktiska Anpassade Egenskaper: Exempel 4.1 av Tyler Childs (@tylerchilds)
på CodePen.

Genom att införa en variabel för en nyans värde och tillämpa den på våra HSL färg värden i den andra variabler, som vi bara har för att ändra ett värde för att uppdatera alla fyra länken staterna.

Beräkningarna är kraftfull i kombination med Anpassade Egenskaper eftersom de låter
dina stilar vara mer uttrycksfull med mindre ansträngning. Kolla in denna teknik genom att Josh Bader där han använder ett liknande tillvägagångssätt för att upprätthålla tillgänglig färgkontraster på knapparna.

Mönster 5: Mixins

En mixin, när det gäller Anpassade Egenskaper, är en funktion deklareras som en Egen Fastighet värde. Argumenten för mixin finns andra Anpassade Egenskaper som kommer att räkna ut det mixin när de har förändrats, vilket i sin tur kommer att uppdatera stilar.

Den anpassade länken exemplet har vi bara tittat på är faktiskt en mixin. Vi kan ställa in värdet för –nyans och sedan vart och ett av de fyra länken stater kommer att räkna ut detta.

Exempel: baslinjerastret foundation

Låt oss lära dig mer om mixins genom att skapa en baslinje rutnät för att hjälpa till med vertikala rytm. På detta sätt, våra innehållet har en ganska bra rytm genom att använda en konsekvent avstånd.

.baseline,
.baseline * {
–rytm: 2rem;
–line-height: var(–sub-rytm, var(–rytm));
–line-höjd-förhållande: 1.4;
–font-size: calc(var(–line-height) / var(–line-höjd-förhållande));
}

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

Vi har tillämpat den regeluppsättning för våra baslinjerastret till en .baseline klass och dess ättlingar.

  • –rytm: Detta är grunden för vår baslinje. Uppdatering det kommer att påverka alla de andra egenskaper.
  • –line-height: Detta är satt till –rytm som standard, sedan –sub-rytm är inte in här.
  • –sub-rytm: Detta tillåter oss att åsidosätta –line-height — och därefter –font-size — samtidigt som det övergripande baslinjerastret.
  • –line-höjd-förhållande: Detta hjälper till att upprätthålla en fin mängd avstånd mellan rader text.
  • –font-size: beräknas genom att dividera våra –line-height av våra –line-höjd-förhållande.

Vi ställer också våra font-size och line-height i vår .baseline regeluppsättning för att använda –font-size och –line-height från våra baslinjerastret. I kort, när rytmen förändringar, radavstånd och teckenstorlek ändra detta samtidigt som en läsbar erfarenhet.

OK, låt oss sätta baslinjen att använda.

Låt oss skapa en liten hemsida. Vi kommer att använda våra –rytm Egen Fastighet för alla avstånd mellan element.

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

.baseline p {
–line-höjd-förhållande: 1.2;
}

.baseline h2 {
–sub-rytm: calc(3 * var(–rytm));
–line-höjd-förhållandet: 1;
}

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

.baseline ul {
margin-left: var(–rytm);
}
<section class=”baseline”>
<h2>En Liten Webbsida</h2>
<p>Detta är den minsta webbsida. Den har tre anmärkningsvärda funktioner:</p>
<ul>
<li>Liten</li>
<li>Föredömligt</li>
<li>Identifierar som Hufflepuff</li>
</ul>
</section>

Vi är i huvudsak med hjälp av två mixins här: –line-height och-font-size. Vi måste ställa in egenskaper för font-size och line-height att deras Egen Fastighet motparter för att ange rubrik och punkt. Den mixins har omräknats i de regeluppsättningar, men de måste ställas innan den uppdaterade styling kommer att tillämpas på dem.

Se Pennan
Mönster för Praktiska Anpassade Egenskaper: Exempel 5.0 av Tyler Childs (@tylerchilds)
på CodePen.

Något att tänka på: Du vill antagligen inte att använda Egna värden i regeluppsättning sig när de ansöker mixins använder ett jokertecken väljare. Det ger de stilar en högre specificitet än någon annan arv som kommer tillsammans med cascade, vilket gör dem svåra att åsidosätta utan att använda !viktigt.

Mönster 6: Inline egenskaper

Vi kan också definiera Egna Egenskaper inline. Låt oss bygga en lätt grid system demonstrera.

.grid {
–kolumner: auto-fit;

display: nätet.
gap: 10px;
grid-template-kolumner: upprepa(var(–kolumner), 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 grå” />
<img src=”https://www.fillmurray.com/g/900/600″ alt=”Bill Murray grå” />
<img src=”https://www.placecage.com/c/900/600″ alt=”Nic Cage crazy” />
<img src=”https://www.placecage.com/gif/900/600″ alt=”Nic Cage gif” />
</div>

Som standard nätet har lika stora kolumner som kommer att automatiskt lägga sig i en enda rad.

Se Pennan
Mönster för Praktiska Anpassade Egenskaper: Exempel 6.0 av Tyler Childs (@tylerchilds)
på CodePen.

För att kontrollera antalet kolumner kan vi ställa våra –kolumner Egen Fastighet
inline på vårt nät element.

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

</div>

Se Pennan
Mönster för Praktiska Anpassade Egenskaper: Exempel 6.1 av Tyler Childs (@tylerchilds)
på CodePen.

Vi tittade bara på sex olika användningsfall för Anpassade Egenskaper — åtminstone de som jag brukar använda. Även om du redan är medveten om och har fått hjälp av Anpassade Egenskaper, förhoppningsvis se dem används dessa sätt ger dig en bättre uppfattning om när och var man kan använda dem effektivt.

Finns det olika typer av mönster som du använder med Egna Egenskaper? Dela dem i kommentarerna och länka upp några demos — jag skulle älska att se dem!

Om du är ny till Anpassade Egenskaper är ute efter att nivå upp, prova att spela runt med de exempel som vi berört här, men lägg till media frågor till mixen. Du kommer att se hur adaptiva dessa kan vara och hur många intressanta möjligheter som öppnas upp när du har makten att förändra värderingar i farten.

Plus, det finns massor av andra bra resurser här på CSS-Tricks till din Anpassade Egenskaper för spel i Egna Fastigheter Guide.

Se Pennan
Tack för att du Läser! av Tyler Childs (@tylerchilds)
på CodePen.