Innhold
- 01. Egendefinerte egenskaper
- Angi standardinnstillinger
- Hvordan skiller egendefinerte egenskaper seg fra preprosessorvariabler?
- 02. Funksjonsspørsmål
- Hvordan bruke funksjonsforespørsler
- 03. Mediespørsmål
- 04. Variable skrifttyper
- Variasjonsakse
- Innstillinger for skriftvariasjon
- Registrerte akser
- Egendefinerte akser
- 05. Grafiske effekter
- 08. CSS-rutenett og oppsett
- Hvordan bruke CSS Grid
CSS utvikler seg kontinuerlig, og en rekke spennende nye funksjoner er lagt til for å gjøre spesifikasjonen til et enda kraftigere våpen i en webdesigners verktøysett.
CSS Grid tar oppsett til nye nivåer som ikke er sett før, egendefinerte egenskaper introduserer konseptet med variabler mens funksjonsforespørsler ser etter nettleserstøtte. Mediespørsmål beveger seg opp et nivå med nye tilgjengelighetsegenskaper, variable skrifttyper gir maksimal kreativitet med minimum kodeoppblåsthet mens rulleknapp eliminerer behovet for JavaScript. Ta en titt på de kule CSS-animasjonseksemplene våre for å se hva du kan lage. Eller for å bygge et nettsted uten kode, prøv disse nettstedbyggerne.
For de som ønsker å bli kreative, er det CSS Shapes for unike oppsett og en rekke blandingsmodi og filtre for å introdusere Photoshop-stildesigneffekter. Les videre for å finne ut hvordan du kan bruke disse må-prøve-funksjonene i de siste versjonene dine. Men husk, et komplekst nettsted betyr at du trenger en webhotelltjeneste som kan støtte dine behov.
01. Egendefinerte egenskaper
Hvis du har brukt en forprosessor som Sass, eller faktisk et programmeringsspråk som JavaScript, vil du uten tvil være kjent med begrepet variabler - verdier som er definert for gjenbruk i hele koden din. Egendefinerte egenskaper gjør at vi kan gjøre dette i CSS, uten behov for forprosessorer. Variabler kan settes på: rotnivå (opprette globale variabler) eller omfatte i en velger. De kan da kalles ved hjelp av syntaksen var (- ›- myVariableName). For eksempel kan vi sette en variabel kalt --primaryColor som dette:
/ * På rotelementet (en global variabel) * /: root {- -primaryColor: # f45942; } / * Omfattet til en velger * / .my-component {- -primaryColor: # 4171f4; }
Nå kan vi bruke den variabelen som en eiendomsverdi:
h1 {farge: var (- -primaryColor); }
Egendefinerte egenskaper arves, noe som har noen veldig nyttige implikasjoner. En av dem er tema. Ta eksemplet ovenfor: Vi kan definere en global variabel (# f45942 - en lys oransje rød) for --primaryColor på rotnivå, så hver forekomst der vi bruker denne variabelen, vil verdien være rød. Men vi omdefinerer også den samme variabelen i en velger, med en annen verdi (# 4171f4 - medium blå). Så for hvert tilfelle der vi bruker --primaryColor variabel i selektoren, vil den beregnede verdien være blå.
Angi standardinnstillinger
Omfanget av variabler er en flott funksjon, men en som kan ta deg ut av og til! Hvis du prøver å bruke en variabel som ikke er definert ennå, vil den resulterende verdien falle tilbake til nettleserens standard, eller en arvet verdi, i stedet for en variabel definert lenger opp i kaskaden. I noen tilfeller kan det være aktuelt å angi en standardverdi:
h1 {farge: var (- -primaryColor, blå); }
Hvordan skiller egendefinerte egenskaper seg fra preprosessorvariabler?
Egendefinerte egenskaper skiller seg fra preprosessorvariabler på noen få viktige måter. Preprocessor-variabler blir samlet før koden din sendes til nettleseren. Nettleseren ser aldri at en verdi er en variabel, den ser bare sluttresultatet. Egendefinerte egenskaper beregnes i nettleseren. Du kan inspisere dem i moderne utviklerverktøy, endre variabelen og se den løste verdien. De er dynamiske variabler, noe som betyr at verdiene deres kan endres i CSS, eller ved kjøretid med JavaScript.
I motsetning til forprosessorvariabler, kan ikke egendefinerte egenskaper brukes i velgernavn, eiendomsnøkler eller mediespørringserklæringer - bare CSS-eiendomsverdier. CSS-forprosessorer har fortsatt mange fordeler, så vi ser sannsynligvis at de holder seg en stund til, men de vil sannsynligvis bli brukt oftere i kombinasjon med egendefinerte egenskaper.
02. Funksjonsspørsmål
Funksjonsspørsmål er en måte å teste om en nettleser støtter en bestemt kombinasjon av CSS-egenskap og verdi i CSS-filen. De fjerner nesten behovet for funksjonsdeteksjonsbiblioteker som Modernizr. Syntaksen ligner på et mediespørsmål: Du bruker at-rule @supports, etterfulgt av eiendomsverdiparet ditt, og pakker inn koden som skal utføres hvis nettleseren oppfyller de angitte vilkårene.
Funksjonsspørsmål støttes godt i moderne nettlesere, men de er relativt nye, og en "gotcha" er at noen nettlesere du kanskje vil teste for støtte, kanskje ikke støtter funksjonsforespørsler selv. Ofte er den beste måten å håndtere dette på å gi tilbakestillingsstiler først (utenfor funksjonsforespørselen), og deretter pakke inn forbedringene for å støtte nettlesere inne i @supports regel.
Vær oppmerksom på at funksjonsspørsmål bare må brukes sparsomt. En av de gode funksjonene i CSS er at nettlesere rett og slett vil ignorere egenskaper eller verdier de ikke forstår. Det er best å bare bruke funksjonsforespørsler når du ikke gjør det, kan det føre til en visuell feil, ellers kan du sette deg opp for mye ekstra arbeid.
Hvordan bruke funksjonsforespørsler
For å teste støtte for en enkelt eiendomsverdi, kan vi gi tilbakebetaling først. I dette eksemplet gir vi en flexbox-tilbakeslag for nettlesere som ikke støtter Grid-layout.
.my-component {display: grid; } @supports (display: grid) {.my-component {display: flex; }}
03. Mediespørsmål
Du vil sannsynligvis være vant til å bruke mediespørsmål for å oppdage bredden og høyden på visningsporten og medietypen (oftest skjerm eller utskrift). Nivå 5 Media Queries-spesifikasjonen gir oss noen nyere mediefunksjoner å (valgfritt) teste for, som allerede støttes i noen nettlesere. Disse gir noen gode fordeler for tilgjengelighet.
Brukere med vestibulære lidelser, og de som lider av bevegelsessykdom, setter kanskje ikke pris på websider med mye bevegelse, for eksempel animasjoner og parallaks-rulleeffekter. Ved hjelp av mediespørringen om redusert bevegelse, kan vi tilby brukere som velger bort et alternativ med redusert bevegelse.
.my-element {animasjon: rist 500ms let inn-ut 5; } @media (foretrekker redusert bevegelse: reduser) {.my-element {animasjon: ingen; }}
Det blir stadig mer populært for nettsteder å tilby et alternativt mørkt tema. Foretrukket farger-skjema lar oss spørre om brukeren har angitt en systemomfattende preferanse (ved å bruke nøkkelordene mørk, lys eller ikke-preferanse), og viser riktig fargeskjema deretter.
/ * Mediespørsmål 02 * / body {bakgrunn: lineær gradient (til bunn, # b5faff, # ffe2b4); } @media (foretrekker fargeskjema: mørk) {kropp {farge: hvit; bakgrunn: lineær gradient (til bunn, # 0c1338, # 3e3599); }}
04. Variable skrifttyper
Generelt sett, hvis vi ønsker å inkludere et antall forskjellige skrifttyper av samme familie på nettsiden vår, må vi laste inn samme antall fontfiler. Jo flere fontfiler du laster inn, jo mer vekt legger du til siden din, med innvirkning på ytelsen - så det er vanligvis lurt å laste inn maksimalt tre eller fire fontfiler (avhengig av ytelsesbudsjettet).
Variable skrifttyper endrer alt det. De gjør det mulig for oss å laste en enkelt fontfil for en hel fontfamilie. Selv om denne filen vanligvis vil være større enn en enkelt skrift, hvis du vil dra nytte av forskjellige vekter og stiler, er en variabel font den mer effektive løsningen. Hvis du har kjøpt en hel fontfamilie, husk å lagre den trygt i skylagring, slik at du ikke mister filene dine!
Variasjonsakse
Ikke bare det, men med variable skrifter er vi ikke begrenset til en liten delmengde skriftvekt. Når du arbeider med vanlige skrifter, blir de tilgjengelige skriftvektene gitt i multipler på 100. Vanligvis kan 400 være den vanlige vekten, 300 den lette vekten og 700 den dristige vekten - med forskjellige familier som gir flere vekter eller færre. Variable skrifttyper har en variasjonsakse, som gir oss en rekke verdier for egenskaper som skriftvekt. En skrift kan ha en akse på 1–900, som vil gi oss tilgang til 900 forskjellige vekter!
Variasjonsaksen er ikke bare begrenset til vekt. Variable skrifter kan ha forskjellige akser for x-høyde, skråstilling, lengde og kontrast (for å velge noen få eksempler) - noe som betyr at en enkelt fontfil kan gi oss tilgang til hundrevis, eller til og med tusenvis av varianter! Vi kan til og med animere disse egenskapene, slik at vi kan oppnå noen virkelig kule effekter. Mandy Michael (https://codepen.io/mandymichael) har en hel masse kreative demoer som virkelig tester grensene.
Nettleserstøtte for variable skrifter er ganske bra, og mange fontstøperier utvikler aktivt nye variable fonter som du kan begynne å bruke nå - selv om disse ofte kommer til en premie, spesielt for de mer fullverdige fontfamiliene. Hvis du bare vil komme i gang med å leke med variable skrifttyper for å se hva de kan gjøre, er det en rekke lekeplasssteder med variabel font:
Vær oppmerksom på at hvis du vil bruke variable skrifttyper akkurat nå, må du sørge for at du bruker et oppdatert operativsystem - de fungerer ikke på eldre operativsystemer.
Innstillinger for skriftvariasjon
Mens vi kan endre skriftvekten lett nok med skriftvekt CSS eiendom, font-variant-innstillinger er en ny egenskap som gir oss full tilgang til fontens forskjellige variasjonsakser. Disse inkluderer både registrerte akser og tilpassede akser.
Registrerte akser
Det er fem forskjellige registrerte akser, som tilsvarer forskjellige CSS-egenskaper. Hver av disse har det som kalles en "akselapp". De registrerte aksene er: wght (skriftvekt), wdth (font-stretch), slnt (skriftstil: skrå / vinkel), ital (skriftstil: kursiv), opsz (font-optisk størrelse). Vi har tilgang til disse aksene enten ved CSS-egenskapen eller med font-variant-innstillinger.
Disse aksene er ikke nødvendigvis inkludert i alle variable skrifttyper (noen kan bare ha en eller to akser), men det er sannsynlig at de er de vanligste.
Egendefinerte akser
Egendefinerte økser er skreddersydde økser inkludert av fontdesigneren, og kan være hva som helst. De kan omfatte (for eksempel) serif lengde, x-høyde, til og med noe mer kreativt (og mindre typografisk typisk), som rotasjon.
Begge typer akser må uttrykkes som en firetegn. Registrerte akser må være små, mens tilpassede akser er store. Begge kan kombineres i egenskapen font-variation-settings. Font-variant-innstillinger er animerbare, noe som kan tillate noen veldig kule UI-effekter! Noen veldig interessante eksperimenter har blitt produsert ved hjelp av ikonfonter.
05. Grafiske effekter
Mange nettsteder benytter seg av JavaScript-biblioteker for å gi en glatt, innfødt app-lignende rulleopplevelse, der innholdet "smekker" til punkter når brukeren ruller. Nå, med Scroll Snap-spesifikasjonen, kan vi gjøre dette rett i CSS-filen vår - det er lite behov for å importere i tunge JS-moduler for å oppblåse siden din!
For å implementere rulleknipsing trenger vi et element som fungerer som rullebeholder. De direkte barna i beholderen dikterer punktene som skal knipses til, og kan justeres på forskjellige måter innenfor snapområdet.
Scroll snapping kan være enda mer effektivt når det kombineres med en annen ny CSS-eiendomsverdi - posisjon: klebrig. Denne posisjonsverdien "stikker" et element til en spesifisert posisjon mens du ruller i beholderen - en annen oppførsel som tidligere bare var mulig med JavaScript. Sjekk ut dette Scroll snap med posisjon: klebrig og kryssObservereksempel.
08. CSS-rutenett og oppsett
Front-end-utviklere har hacket layout med de verktøyene som var tilgjengelige for bruk på den tiden - sist flexbox, som mange moderne nettsystemer bruker. Men flexbox ble aldri designet for å bygge strenge nett - formålet er fleksibilitet!
CSS Grid er den første spesifikasjonen som er designet for todimensjonalt layout, slik at vi får full kontroll over å bygge et layout og plassere elementer på både raden og kolonneaksen. Å bygge et responsivt oppsett med Grid krever ikke kalk () eller hacking med negative marginer. Det hemmelige våpenet er fr-enheten - en ny enhet eksklusiv nett. Fr-enheten størrelse rutenett spor (rader og kolonner) som en andel av tilgjengelig plass. Den tar hensyn til eventuelle faste spor, takrenner og innhold, og fordeler deretter gjenværende plass tilsvarende. Jen Simmons laget begrepet “Intrinsic Web Design” for å beskrive den nye tidsalderen med nettoppsett som Grid innleder.
Hvordan bruke CSS Grid
Rutenett krever et element med skjermegenskapverdien satt til rutenett for å fungere som rutenettbeholderen. De direkte barna til nettbeholderen er elementene som kan plasseres på nettet. Vi bruker egenskapene rutenett-mal-rader og rutenett-mal-kolonner for å definere sporene (rader og kolonner) i rutenettet, og kolonnegap og radgap for å definere takrennene (hullene mellom sporene).
.grid {display: grid; grid-mal-kolonner: gjenta (4, 1fr); grid-mal-rader: gjenta (4, 200px); gap: 20px; }
Vi bruker gjenta() funksjon for å holde koden mer kortfattet, som et alternativ til langhånden (f.eks. rutenett-mal-kolonner: 1fr 1fr 1fr 1fr). Dette eksemplet bruker også stenografi mellomrom til radgap og kolonnegap.
Koden ovenfor gir oss fire radspor, hver 100 piksler høye, og fire kolonnespor som hver fyller en like stor andel av tilgjengelig plass, ved hjelp av fr-enheten.
Det er verdt å merke seg at dette ikke er den eneste måten å lage rutenett på. Implisitte spor kan også opprettes ved å plassere rutenettelementer. Det er nyttig å lese litt om dette hvis du bruker Grid, da det lønner seg å få en dypere forståelse av hvordan Grid oppfører seg under forskjellige forhold, og kan gjøre koding av et layout mye enklere.
Vi kan plassere elementer på rutenettet ved å referere til rutenettnummer, som er numeriske linjer som sitter mellom hvert spor. Her bruker vi stenografi rutenett-kolonne og rutenett til rutenett-kolonne-start, grid-column-end, rutenett-start og grid-row-end. Disse forteller nettleseren på hvilken linje varen vår skal starte og slutte på hver akse.
.item {rutenett-kolonne: 1/4; rutenett: 2; }
Grid gir oss mange forskjellige måter å plassere varer på: vi kan i stedet gi navn til rutenettlinjene våre:
.grid {display: grid; grid-mal-kolonner: [image-start] 1fr 1fr 1fr [image-start] 1fr; rutenett-mal-rader: 200px [image-start] 200px 200px [image-end] 200px; gap: 20px; }
Alternativt kan den rutenett-mal-område egenskap lar oss "tegne" et rutenettoppsett med tekst.
.grid {display: grid; grid-mal-kolonner: gjenta (4, 1fr); grid-mal-rader: gjenta (4, 200px); gap: 20px; grid-template-areas: ‘. . . . ' ‘Image image image.’ 'Image image image.' ‘. . . . '; }
Ved å bruke en av disse metodene kan vi bare referere til det tilsvarende rutenettet når vi plasserer et rutenett:
.image {grid-area: image; }
Denne artikkelen ble opprinnelig publisert i kreativt magasin for webdesignWebdesigner. Kjøp utgave 290 nå.
- De 10 beste CSS-rammene i 2019
- Hvordan legge til animasjon i SVG med CSS
- 52 verktøy for nettdesign som hjelper deg å jobbe smartere i 2019
