Mønstre for Praktisk CSS Egendefinerte Egenskaper for Bruk

0
7

Jeg har lekt med CSS Egendefinerte Egenskaper for å oppdage deres makt siden nettleser støtte er endelig på et sted hvor vi kan bruke dem i vår produksjon kode. Jeg har brukt dem i flere forskjellige måter, og jeg vil gjerne at du skal få så begeistret for dem som jeg er. De er så nyttig og kraftig!

Jeg finner at CSS variabler bruk har en tendens til å falle inn i kategorier. Selvfølgelig, er du fri til å bruke CSS variabler men du liker, men tenker på dem i disse ulike kategoriene, kan hjelpe deg med å forstå de forskjellige måter som de kan brukes.

  • Variabler. Det grunnleggende, for eksempel for å angi en helt color å bruke uansett hvor det er behov.
  • Standard Verdier. For eksempel, en standard border-radius som kan overstyres senere.
  • Gjennomgripende Verdier. Ved hjelp av ledetråder basert på spesifisitet, for eksempel brukerens preferanser.
  • Omfattet Rulesets. Tilsiktet variasjoner på enkelte elementer, som lenker og knapper.
  • Mixins. Rulesets ment å bringe sine verdier til en ny kontekst.
  • Innebygde Egenskaper. Verdier gått i fra innebygde stiler i vår HTML.

Eksemplene vi skal se på er forenklet og fortettet mønstre fra CSS-rammeverket jeg opprettet og opprettholde kalt Cutestrap.

En rask oppmerksom på nettleseren støtte

Det er to vanlige linjer med spørsmål jeg hører når Egendefinerte Egenskaper kommer opp. Den første er om nettleseren støtter. Hvilke nettlesere støtter dem? Er det fallbacks vi trenger å bruke der hvor de ikke er støttet?

Det globale markedet som støtter de tingene vi dekke i dette innlegget er 85%. Likevel, det er verdt kryssreferanser caniuse) med brukeren base for å finne ut hvor mye og hvor progressive enhancement fornuftig for prosjektet.

Det andre spørsmålet er alltid om hvordan du bruker Egendefinerte Egenskaper. Så la oss dykke inn i bruk!

Mønster 1: Variabler

Det første vi vil takle er å sette en variabel for en merkevare farge som en Tilpasset Eiendommen og bruke den på en SVG-element. Vi vil også bruke et tilbakefall til å dekke brukere på etterfølgende nettlesere.

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

.logo {
fyll: rosa; /* skifte */
fyll: var(–merkevare-farge);
}

Her har vi deklarert en variabel kalt –merkevare-farger i vår html regelsett. Variabelen er definert på et element som alltid er til stede, så vil det cascade til hvert element der det er brukt. Lang historie kort, vi kan bruke som variabel i vår .logo regelsett.

Vi erklært en rosa fallback verdi for etterfølgende nettlesere. I den andre fylle erklæring, vi passerer –merkevare-farge i var () – funksjonen, som vil returnere verdien vi satt for at Tilpasset Eiendom.

Det er ganske mye hvordan mønsteret går: definere variabelen (–variabel-navn), og deretter bruke den på et element (var(–variabel-navn)).

Se Penn
Mønstre for Praktisk Egendefinerte Egenskaper: Eksempel 1.0 av Tyler Childs (@tylerchilds)
på CodePen.

Mønster 2: Standard verdier

Det var () – funksjonen, som vi brukte i det første eksemplet kan også gi standard verdier i tilfelle den Egendefinerte Egenskapen det er prøver å få tilgang til ikke er satt.

For eksempel, la oss si vi gi knapper, en avrundet kant. Vi kan opprette en variabel — vi vil kalle det-rundhet — men vi vil ikke definere det som vi gjorde før. I stedet, vi vil tilordne en standardverdi når du legger inn variabel til bruk.

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

Et use case for standard verdier uten å definere den Egendefinerte Egenskapen er når prosjektet er fortsatt i design, men deres funksjon er grunnet i dag. Dette gjør det mye enklere å oppdatere verdien senere hvis design endringer.

Så, du gir dine knappen en fin standard, oppfyller dine frist, og når –rundhet er endelig satt som en global Tilpasset Eiendel, din-knappen vil få oppdateringen for gratis, uten at du trenger å komme tilbake til det.

Se Penn
Mønstre for Praktisk Egendefinerte Egenskaper: Eksempel 2.0 av Tyler Childs (@tylerchilds)
på CodePen.

Du kan redigere på CodePen og uncomment koden ovenfor for å se hva den knappen vil se ut når –rundhet er satt!

Mønster 3: Gjennomgripende verdier

Nå som vi har fått det grunnleggende under beltet, la oss starte med å bygge fremtiden vi skylder oss selv. Jeg virkelig savner den personlighet som MÅL og MySpace hadde ved å la brukerne uttrykker seg med egendefinert tekst-og bakgrunnsfarger på profiler.

La oss ta det tilbake og bygge en skole oppslagstavle hvor hver student kan sette sin egen skrift, bakgrunn, farge og tekst farge for meldinger de sender.

Bruker-baserte temaer

Det vi egentlig gjør er å la elevene lage et tilpasset tema. Vi vil sette temaet konfigurasjoner inne data-attributtet rulesets slik at eventuelle etterkommere — en .melding element i dette tilfellet — som bruker temaer vil ha tilgang til de Tilpassede Egenskaper.

.melding {
background-color: var(–student-bakgrunn, #fff);
farge: var(–student-farge, #000);
font-family: var(–student-skrifttype “Times New Roman”, serif);
margin-bottom: 10px;
padding: 10px;
}

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

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

[data-student-tema=”tyler”] {
–student-bakgrunn: blå;
–student-farge: gul;
–student-skrift: “Comic Sans MS”, “Comic Sans”, kursiv;
}

Her er markup:

<avsnitt>
<div data-student-tema=”chris”>
<p class=”melding”>Chris: jeg har talt ved arrangementer og holdt workshops over hele verden på konferanser.</p>
</div>
<div data-student-tema=”rachel”>
<p class=”melding”>Rakel: jeg foretrekker e-post i forhold til andre former for kommunikasjon.</p>
</div>
<div data-student-tema=”jen”>
<p class=”melding”>Jen: Dette er grunnen til at jeg umiddelbart satt opp mitt nye team med Slakk for real-time chat.</p>
</div>
<div data-student-tema=”tyler”>
<p class=”melding”>Tyler: jeg savner SIKTE og MySpace, men dette diskusjonsforumet er greit.</p>
</div>
</avsnitt>

Vi har stilt alle våre studenter temaer ved hjelp av [data-student-tema] velgere for våre studenter tema rulesets. Den Egendefinerte Egenskaper for bakgrunn, farge og font vil gjelde for vår .melding regelsett hvis de er stilt for at en student grunn .meldingen er en etterkommer av div som inneholder data-attributtet, som i sin tur inneholder Egendefinerte Eiendom verdier for å konsumere. Ellers default verdier vi gitt vil bli brukt i stedet.

Se Penn
Mønstre for Praktisk Egendefinerte Egenskaper: Eksempel 3.0 av Tyler Childs (@tylerchilds)
på CodePen.

Lesbar tema overstyrer

Så morsomt og kult som det er for brukerne å styre egendefinerte stiler, hva brukerne plukke vil ikke alltid være tilgjengelig med hensyn til kontrast, farge visjon mangel, eller noen som foretrekker øynene for å ikke blø når du leser. Husk GeoCities dager?

La oss legge til en klasse som gir et renere utseende og følelse og sett det på den overordnede element (<section>), slik at det overstyrer eventuelle student tema når det er til stede.

.lesbar-tema [data-student-tema] {
–student-bakgrunn: hsl(50, 50%, 90%);
–student-color: hsl(200, 50%, 10%);
–student-skrift: Verdana, Geneva, sans-serif;
}
<delen class=”lesbar-tema”>

</avsnitt>

Vi bruker cascade å overstyre student temaer ved å sette en høyere spesifisitet slik at bakgrunnen, farger og skrift vil være i omfang og vil gjelde for alle .melding regelsett.

Se Penn
Mønstre for Praktisk Egendefinerte Egenskaper: Eksempel 3.1 av Tyler Childs (@tylerchilds)
på CodePen.

Mønster 4: Omfattet rulesets

Snakker av omfang, kan vi omfanget Egendefinerte Egenskaper og bruke dem til å effektivisere hva er ellers standardtekst CSS. Vi kan For eksempel definere variabler for ulike link stater.

en {
–link: hsl(230, 60%, 50%);
–link-besøkt: hsl(290, 60%, 50%);
–link-før: hsl(230, 80%, 60%);
–link-aktiv: hsl(350, 60%, 50%);
}

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

a:besøkte {
farge: var(–link-besøk);
}

a:hover {
farge: var(–link-hold);
}

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

Nå som vi har skrevet ut den Egendefinerte Egenskaper globalt på <a> – element, og brukte dem på vår link stater, vi trenger ikke å skrive dem igjen. Disse er omfattet til vår <a> – element er regelsett så de er bare satt på anchor tags og deres barn. Dette gjør det mulig for oss å ikke forurense det globale navnerommet.

Eksempel: Lag lenke

Fremover, kan vi kontrollere koblinger som vi nettopp har opprettet ved å endre Egendefinerte Egenskaper for våre forskjellige bruksmåter. For eksempel, la oss lage en grå-farget link.

.gråtoner {
–link: LightSlateGrey;
–link-besøkt: Sølv;
–link-før: DimGray;
–link-aktiv: LightSteelBlue;
}
<a href=”#” class=”gråtoner”>Link Eksempel</a>

Vi har erklært en .gråtoner regelsett som inneholder farger for våre ulike link stater. Siden de velger for dette regelsettet har en større spesifisitet så standard, disse variable verdier, og som deretter kan brukes til pseudo-klasse rulesets for vår link stater i stedet for det som var definert på <a> – element.

Se Penn
Mønstre for Praktisk Egendefinerte Egenskaper: Eksempel 4.0 av Tyler Childs (@tylerchilds)
på CodePen.

Eksempel: Tilpassede linker

Hvis innstillingen fire Egendefinerte Egenskaper føles som for mye arbeid, hva om vi sett en eneste nyanse i stedet? Som kan gjøre ting mye enklere å administrere.

.custom-link {
–fargetone: 30;
–link: hsl(var(–fargetone), 60%, 50%);
–link-besøkt: hsl(calc(var(–hue) + 60), 60%, 50%);
–link-før: hsl(var(–fargetone), 80%, 60%);
–link-aktiv: hsl(calc(var(–hue) + 120), 60%, 50%);
}

.fare {
–fargetone: 350;
}
<a href=”#” class=”custom-link”>Link Eksempel</a>
<a href=”#” class=”custom-link fare”>Link Eksempel</a>

Se Penn
Mønstre for Praktisk Egendefinerte Egenskaper: Eksempel 4.1 av Tyler Childs (@tylerchilds)
på CodePen.

Ved å innføre en variabel for en nyanse verdi og bruke det på vår HSL farge verdier i de andre variablene, er vi bare nødt til å endre en verdi for å oppdatere alle fire link stater.

Beregningene er kraftig i kombinasjon med Custom Egenskaper siden de la
stilene blir mer uttrykksfulle med mindre anstrengelse. Sjekk ut denne teknikken av Josh Bader der han bruker en lignende tilnærming til å håndheve tilgjengelig farge kontraster på knappene.

Mønster 5: Mixins

En mixin, i forhold til Egendefinerte Egenskaper, er en funksjon som er erklært som en Tilpasset eiendommens verdi. Argumentene for mixin er andre Egendefinerte Egenskaper som vil beregne mixin når de er endret som, i sin tur, vil oppdateringen stiler.

Den tilpassede link eksempel har vi bare sett på er faktisk en mixin. Vi kan sette verdien for –hue og deretter hver av de fire link stater vil beregne tilsvarende.

Eksempel: Baseline grid foundation

La oss lære mer om mixins ved å lage en baseline grid for å hjelpe til med vertikal rytme. På denne måten, våre innholdet er en hyggelig tråkkfrekvens ved å utnytte konsekvent avstand.

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

.baseline {
font-size: var(–font-size);
line-height: var(–linje-høyde);
}

Vi har brukt regelsettet for våre baseline grid til en .baseline klasse og noen av dens etterkommere.

  • –rytme: Dette er grunnlaget for vår baseline. Oppdatering det vil påvirke alle de andre egenskapene.
  • –line-height: Denne er satt til –rytme som standard, siden –sub-rytmen er ikke angitt her.
  • –sub-rytme: Dette gir oss muligheten til å overstyre –linje-høyde — og deretter –font-size — samtidig opprettholde den generelle baseline grid.
  • –linje-høyde-ratio: Dette bidrar til å håndheve en fin mengde avstanden mellom linjer av tekst.
  • –font-size: Dette er beregnet ved å dele vår –linje-høyden med vår –linje-høyde-ratio.

Vi har også satt våre skrift-størrelse og line-height i vår .baseline regelsett å bruke –skrift-størrelse og-linje-høyde fra våre baseline grid. Kort sagt, når rytmen endres, linje høyde og skriftstørrelse endre seg tilsvarende og samtidig opprettholde en leselig erfaring.

OK, la oss sette baseline å bruke.

La oss lage en liten nettside. Vi vil bruke vår –rytme Tilpasset Holderen for alle avstanden mellom elementer.

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

.baseline p {
–linje-høyde-ratio: 1.2;
}

.baseline h2 {
–sub-rytme: calc(3 * var(–rytme));
–linje-høyde-forholdet: 1;
}

.baseline s,
.baseline h2 {
font-size: var(–font-size);
line-height: var(–linje-høyde);
}

.baseline ul {
margin-left: var(–rytme);
}
<delen class=”baseline”>
<h2>En Liten Nettside</h2>
<p>Dette er den minste nettside. Den har tre bemerkelsesverdige funksjoner:</p>
<ul>
<li>Lille</li>
<li>Eksemplarisk</li>
<li>Identifiserer som Hufflepuff</li>
</ul>
</avsnitt>

Vi er i hovedsak ved hjelp av to mixins her: –linje-høyde og-font-størrelse. Vi trenger å angi egenskapene skrift-størrelse og line-height til sine egne Eiendom kolleger for å sette overskrift og avsnitt. Den mixins har blitt beregnet på nytt i de rulesets, men de må være angitt før den oppdaterte styling vil bli brukt til dem.

Se Penn
Mønstre for Praktisk Egendefinerte Egenskaper: Eksempel 5.0 av Tyler Childs (@tylerchilds)
på CodePen.

Noe å ha i bakhodet: Du sannsynligvis ikke ønsker å bruke den Egendefinerte Egenskapen verdier i regelsettet selv når du søker mixins bruke et jokertegn-velgeren. Det gir disse stilene en høyere spesifisitet enn noen annen arv som kommer sammen med cascade, noe som gjør dem vanskelig å overstyre uten å bruke !viktig.

Mønster 6: Innebygde egenskaper

Vi kan også erklære Egendefinerte Egenskaper inline. La oss bygge en lett grid system demonstrere.

.grid {
–kolonner: auto-fit;

visning: rutenett;
gap: 10px;
grid-mal-kolonner: repeat(var(–kolonner), 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 gal” />
<img src=”https://www.placecage.com/gif/900/600″ alt=”Nic Cage gif” />
</div>

Standard rutenett har like store spalter som vil automatisk legge seg inn i en enkelt rad.

Se Penn
Mønstre for Praktisk Egendefinerte Egenskaper: Eksempel 6.0 av Tyler Childs (@tylerchilds)
på CodePen.

For å kontrollere antall kolonner kan vi sette vår –kolonner Tilpasset Eiendom
inline på vårt rutenett element.

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

</div>

Se Penn
Mønstre for Praktisk Egendefinerte Egenskaper: Eksempel 6.1 ved Tyler Childs (@tylerchilds)
på CodePen.

Vi bare så på seks forskjellige bruksmåter for Egendefinerte Egenskaper — minst de som jeg vanligvis bruker. Selv om du allerede var klar over, og har vært med Custom Egenskaper, forhåpentligvis se dem brukt disse metodene gir deg en bedre oversikt over når og hvor du skal bruke dem effektivt.

Finnes det forskjellige typer mønstre du bruker med Custom Egenskaper? Del dem i kommentarfeltet, og koblingen opp noen demoer — jeg vil gjerne se dem!

Hvis du er ny til Egendefinerte Egenskaper er ute etter å nivå opp, prøve å spille rundt med eksempler vi har dekket her, men legg til media-spørringer til mix. Vil du se hvordan adaptive disse kan være, og hvor mange interessante muligheter åpne når du har makt til å endre verdier på fly.

Plus, det er massevis av andre gode ressurser her på CSS-Triks opp din Egendefinerte Egenskaper spillet i den Egendefinerte Egenskaper Guide.

Se Penn
Takk for at du Leser! av Tyler Childs (@tylerchilds)
på CodePen.