8 State-of-the-art CSS-funksjoner (og hvordan du bruker dem)

CSS er stadig utviklende og en rekke spennende nye funksjoner er lagt til for å gjøre spesifikasjonen et enda kraftigere våpen i en webdesigners verktøysett.

CSS-rutenettet tar oppsett til nye nivåer som ikke er sett før, tilpassede egenskaper introduserer begrepet variabler mens du bruker spørringer for nettleserstøtte. Medieforespørsler beveger seg opp Et nivå med nye tilgjengelighetsegenskaper, variable skrifttyper gir maksimal kreativitet med minimal kodeblåsing mens rulle snapping eliminerer behovet for JavaScript. Sjekk ut vår kule CSS animasjon Eksempler for å se hva du kan opprette. Eller å bygge et nettsted uten kode, prøv disse Nettstedbyggere .

For de som ønsker å bli kreative, er det CSS-former for unike layouter og en rekke blandingsmoduser og filtre for å introdusere Photoshop-stil design effekter. Les videre for å finne ut hvordan du kan bruke disse må-prøve-funksjonene i de nyeste bygningene dine. Men husk, et komplekst nettsted betyr at du trenger en Web Hosting. Tjenesten som kan støtte dine behov.

01. Egendefinerte egenskaper

Hvis du har brukt en preprosessor 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. Tilpassede egenskaper gjør det mulig for oss å gjøre dette i våre CSS, uten behov for preprocessors. Variabler kan settes på: rotnivå (opprette globale variabler) eller scoped 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å roten elementet (en global
variabel) * /
: rot {
- -Primarycolor: # F45942;
}
/ * Scoped til en velger * /
.My-komponent {
- -Primarycolor: # 4171F4;
} 

Nå kan vi bruke den variabelen som en eiendomsverdi:

 h1 {
farge: Var (- -Primarycolor);
} 

Tilpassede egenskaper er arvet, som har noen svært nyttige implikasjoner. En av dem er tema. Ta eksemplet ovenfor: Vi kan definere en global variabel (# F45942 - en lys orangey rød) for - Primarycolor. På rotnivået, så alle tilfeller hvor vi bruker denne variabelen, vil verdien bli rød. Men vi omdefinerer også samme variabel i en velger, med en annen verdi (# 4171F4 - middels blå). Så for alle tilfeller hvor vi bruker - Primarycolor. Variabel Innenfor den velgeren, vil den beregnede verdien være blå.

Innstilling av standardinnstillinger

Scoping of Variables er en flott funksjon, men en som kan fange deg ut ved en anelse! Hvis du prøver å bruke en variabel som ikke er definert, vil den resulterende verdien falle tilbake til nettleseren, eller en arvelig verdi, i stedet for en variabel som er definert lenger oppover kaskaden. I noen tilfeller kan det være hensiktsmessig å angi en standardverdi:

 h1 {
farge: Var (- -Primarycolor, blått);
} 

Hvordan er egendefinerte egenskaper forskjellig fra preprocessorvariabler?

Tilpassede egenskaper varierer fra preprocessorvariabler på noen få viktige måter. Preprosessorvariabler er sammensatt før koden din sendes til nettleseren. Nettleseren ser aldri at en verdi er en variabel, det ser bare sluttresultatet. Tilpassede egenskaper beregnes i nettleseren. Du kan inspisere dem i moderne utviklerverktøy, endre variabelen og se den opplø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 preprocessorvariabler kan egendefinerte egenskaper ikke brukes i valgnavn, egenskapsnøkler eller media forespørselsdeklarasjoner - bare CSS-eiendomsverdier. CSS-preprocessors har fortsatt mange fordeler, så vi vil sannsynligvis se dem stikker rundt en stund lenger, men de vil sannsynligvis bli brukt oftere i kombinasjon med egendefinerte egenskaper.

02. Funksjonsspørsmål

Funksjonsforespørsler er en måte å teste om en nettleser støtter en bestemt CSS-egenskap-verdi-kombinasjon i CSS-filen din. De fjerner nesten behovet for funksjonsdeteksjonsbiblioteker som modernizr. Syntaxen ligner en medieforespørsel: Du bruker AT-regelen @Supports. , etterfulgt av ditt eiendom-verdi par, innpakning av koden som skal utføres hvis nettleseren oppfyller de angitte forholdene.

Funksjonsspørsmålene er godt støttet i moderne nettlesere, men de er relativt nye, og en "gotcha" er at noen nettlesere du kanskje vil teste for at støtte kanskje ikke støtter funksjonen selv. Ofte den beste måten å håndtere dette på er å gi tilbakestillingsstiler først (utenfor funksjonsspørsmålet), og velg deretter forbedringene for å støtte nettlesere i @Supports. regel.

Vær oppmerksom på at du bare trenger å bruke sparsomt. En av de store funksjonene i CSS er at nettlesere bare vil ignorere noen egenskaper eller verdier som de ikke forstår. Det er best å bare ansette funksjonen som ikke gjør det, ville det føre til en visuell bug, ellers kan du sette deg opp for mye ekstra arbeid.

Slik bruker du funksjonsspørsmål

For å teste for støtte for en enkelt eiendomsverdi, kan vi først gi feilen. I dette eksemplet gir vi en flexbox fallback for nettlesere som ikke støtter grid layout.

 .My-komponent {
Vis: GRID;
}
@Supports (Display: Grid) {
.My-komponent {
Skjerm: Flex;
}
} 

03. Media spørringer

Du vil sannsynligvis være vant til å bruke medieforespørsler for å oppdage bredden og høyden på visningsporten, og typen media (vanligste skjerm eller utskrift). Nivå 5 Media Queries-spesifikasjonen bringer oss noen nyere mediefunksjoner til (eventuelt) test for, som allerede er støttet i noen nettlesere. Disse tilbyr noen gode fordeler for tilgjengelighet.

Brukere med vestibulære lidelser, og de som lider av bevegelsessykdom, kan ikke sette pris på nettsider med mye bevegelse, for eksempel animasjoner og parallax-rulleffekter. Ved hjelp av preffers-reduserte bevegelsesmediaspørsmålet, kan vi tilby brukere som velger et alternativt alternativ.

 .My-element {
Animasjon: Rist 500ms Enkel-In-Out 5;
}
@media (foretrekker-redusert bevegelse: redusere) {
.My-element {
Animasjon: Ingen;
}
} 

Det blir stadig mer populært for nettsteder for å gi et alternativt mørkt tema. PREFERS-Colors-Scheme lar oss spørre om brukeren har satt en system-bred preferanse (ved hjelp av Søkeordene Mørk, Light eller No-Preference), og viser riktig fargevalg tilsvarende.

 / * Media spørringer 02 * /
kropp {
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. Variabel fonter

Generelt, hvis vi ønsker å inkludere en rekke forskjellige fonter ansikter av samme familie på vår nettside, må vi laste det samme antall fontfiler. Jo flere skriftfiler du laster, jo mer vekt du legger til siden din, med en innvirkning på ytelsen - så det er vanligvis lurt å laste maksimalt tre eller fire skriftfiler (avhengig av ytelsesbudsjettet).

Variable fonter endrer alt det. De gjør det mulig for oss å laste en enkelt skriftfil for en hel skrifttypefamilie. Selv om denne filen vanligvis vil være større enn en enkelt skrift, vil du, hvis du vil dra nytte av forskjellige vekter og stiler, så er en variabel skrift den mer utførende løsningen. Hvis du har kjøpt en hel skrifttypefamilie, husk å stash det trygt i skylagring Så du mister ikke filene dine!

Variasjonsaksen

Ikke bare det, men med variable fonter, er vi ikke begrenset til en liten delmengde av fontvekter. Når du arbeider med vanlige skrifttyper, er de tilgjengelige fontvektene gitt i multipler på 100. Vanligvis kan 400 være den vanlige vekten, 300 lysvekten og 700 den dristige vekten - med forskjellige familier som leverer flere vekter eller færre. Variable fonter har en variasjonsakse, som gir oss en rekke verdier for egenskaper som fontvekten. En skrifttype kan ha en akse på 1-900, som vil gi oss tilgang til 900 forskjellige vekter!

Variasjonsaksen er ikke bare begrenset i vekt. Variable fonter kan ha forskjellige akser for X-høyde, skrå, seriflengde og kontrast (å velge bare noen få eksempler) - noe som betyr at en enkelt skriftfil kan gi oss tilgang til hundrevis, eller til og med tusenvis av variasjoner! Vi kunne 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 skrifttyper er ganske bra, og mange skrifttyper støtter aktivt nye variable fonter som du kan begynne å bruke nå - selv om disse ofte kommer til en premie, spesielt for de mer fullverdige skriftfamiliene. Hvis du bare vil begynne å spille rundt med variable fonter for å se hva de kan gjøre, finnes det en rekke variable font lekeplasser:

Vær oppmerksom på, hvis du vil bruke variable fonter akkurat nå, må du sørge for at du bruker et oppdatert operativsystem - de vil ikke fungere på eldre OSS.

Font-Variation-Innstillinger

Mens vi kan endre skriftvekten lett nok med font-vekt CSS eiendom, Font-Variation-Innstillinger er en ny eiendom som gir oss full tilgang til en skrifts forskjellige variasjonsakser. Disse inkluderer både registrerte akser og tilpassede akser.

Registrerte akser

Det er fem forskjellige registrerte akser, som tilsvarer ulike CSS-egenskaper. Hver av disse har det som er kjent som en "Axis-tag". De registrerte aksene er: wght. (font-vekt), wdth. (font-strekning), slått. (Font-stil: skrå / vinkel), Ital. (Font-stil: kursiv), opsz. (skrifttype-optisk størrelse). Vi kan få tilgang til disse aksene enten av CSS-egenskapen, eller med Font-Variation-Innstillinger .

Disse aksene er ikke nødvendigvis alle som er inkludert i hver variabel skrift (noen kan bare ha en eller to akser), men de er sannsynligvis de vanligste.

Tilpassede akser

Tilpassede akser er skreddersydde akser som følger med fontdesigneren, og kan være noe i det hele tatt. De kan inkludere (for eksempel) Serif Length, X-Height, selv noe mer kreativt (og mindre typisk typisk), som rotasjon.

Begge typer akser må uttrykkes som en fire tegn-tag. Registrerte akser må være små bokstaver, mens tilpassede akser er store bokstaver. Begge kan kombineres i font-variasjonsinnstillingene. Font-variasjonsinnstillinger er animatable, som kan tillate noen veldig kule UI-effekter! Noen veldig interessante eksperimenter har blitt produsert ved hjelp av ikonfonter også.

05. Grafiske effekter

Hvis du er kjent med designverktøy som Photoshop og Illustrator, kan du være oppmerksom på blandingsmoduser og hvordan de kan brukes til å produsere forskjellige effekter på bilder. Måten blanding modus arbeid er å blande to eller flere lag sammen ved hjelp av matematiske formler for å beregne en resulterende verdi for hver piksel. Lagene kan være alt - bilder, gradienter eller flate farger. Noen blandingsmoduser produserer et mørkere resultat (f.eks. Multipliser, som multipliserer pikselverdiene til lagene), noen en lighter en (for eksempel skjerm og overlegg). Vi trenger imidlertid ikke å forstå matematikkene for å kunne bruke dem. Å spille rundt med forskjellige blandingsmoduser kan gi oss en god følelse for hvilken av dem produserer de ønskede resultatene når de kombineres med forskjellige lag.

Med CSS-egenskapene Bland-blandingsmodus og Bakgrunnsblandingsmodus , Vi kan oppnå Photoshop-lignende bildeeffekter i nettleseren. Begge eiendommene tar de samme verdiene, men jobber litt annerledes.

Bakgrunnsblandingsmodus

Bakgrunnsblandingsmodus Blander sammen bakgrunnslagene til elementet vi målretter mot. Vårt element kunne ha bakgrunnsbilder, farger og gradienter, og de ville alle bli blandet med hverandre uten å påvirke forgrunnsinnholdet. Vi kan angi flere verdier for Bakgrunnsblandingsmodus , en for hvert bakgrunnslag.

 .My-element {
Bakgrunn: URL (#Myurl),
Lineær gradient (45deg, RGBA (65, 68,
244, 1), RGBA (203, 66, 244, 0,5)),
RGBA (244, 65, 106, 1);
Bakgrunnsstørrelse: Deksel;
Bakgrunnsblandingsmodus: Skjerm,
multiplisere;
} 

Bland-blandingsmodus

Bland-blandingsmodus Påvirker hvordan elementet passer sammen med foreldrene og dets søsken, inkludert forgrunns- og bakgrunnsinnhold og pseudo-elementer. Noen interessante kreative effekter kan oppnås ved å blande overlaid pseudo-elementer (:: før og :: Etter).

 .My-element {
Bakgrunn: RGB (244, 65, 106);
MIX-blandingsmodus: Multipliser;
} 

CSS filtre

CSS-filtre kan også brukes til å skape slående visuelle effekter, ved hjelp av filter Eiendoms- og filterfunksjonsverdier. I motsetning til blandingsmoduser, bruker de en grafisk effekt direkte til elementet de målretter mot, og et element kan ha flere filtre påført.

Konverter til Grayscale.

Vi kan manipulere fargene til et element med større grad av kontroll enn å stole på blandingsmoduser. Filtre kan konvertere et bilde til gråtoner, justere lysstyrken, kontrast og metning, slør et element eller legg til en dropskygge. De kan også animeres også, og se bra ut med svingereffekter.

SVG filtre

CSS-filtre er faktisk forenklet versjoner av SVG-filtre. CSS. filter Eiendommen tar også en URL () Funksjon, slik at vi kan passere i en URL til et SVG-filter. SVG-filtre er ekstremt kraftige og tillater noen fantastiske bildeeffekter - men de er også langt mer kompliserte enn CSS-filterfunksjoner! Sara Soueidan har en fantastisk artikkel serie på Codrops hvis du er interessert i å dykke inn i koding dine egne tilpassede SVG-filtre. Sjekk ut artikkelen på https://tympanus.net/codrops/2019/01/15/svg-filtre -101/

Klipping og maskering: Utover rektangler

Vi er vant til å håndtere bokser på nettet, men ikke alt må være rektangulært! Klipping og maskering er to sider av samme mynt, og er forskjellige måter å skjule og vise forskjellige deler av et element slik at bakgrunnen viser gjennom. Dette gir oss muligheten til å introdusere interessante og kreative former til våre design.

Klipp-sti

De Clip-bane () Eiendommen lar oss "kutte ut" et element ved å definere en bane. Det tar en rekke grunnleggende formfunksjoner, INSET (), Sirkel (), Ellipse () eller Polygon () , som gjør det mulig for oss å lage mer komplekse utskjæringsformer som bruker par xy koordinater for å definere banen. Alternativt kan vi også passere i en SVG-sti ved hjelp av sti() funksjon, eller bruk URL () å gi en SVG-sti-ID.

Ikke inne i banen

Klipping av et element klemmer alt utenfor banen du definerer, men selve elementet er fortsatt et rektangel. Hvis du har innhold som strekker seg ut av klippets børsgrense, vil det også bli klippet - det vil ikke vikle i form.

Maske-image

maske-image Gjør det mulig for oss å vise og skjule deler av bildet ved å bruke et bilde (SVG eller transparent PNG) eller gradient som en maske. I motsetning til klipp-sti , Vi kan legge til tekstur på bildene våre med maskering, da maskekilden ikke trenger å være en sti - det tillater grader av gjennomsiktighet.

06. CSS-figurer

CSS-formers-spesifikasjonen gjør at vi kan pakke inn tekst rundt floated geometriske former, noe som skaper noen interessante, magasinlignende layouter. Dette gjøres mulig å bruke form-utenfor eiendom. Lik klipp-sti , vi kan gi denne egenskapen en grunnleggende formfunksjon Sirkel (), Ellipse (), Inset (), Polygon () eller en nettadresse til en SVG-sti, og faktisk de to arbeidet i harmoni veldig bra! form-utenfor Vil vikle vår tekst effektivt, men det vil ikke påvirke det flytende elementet. Hvis vi vil at teksten skal se ut som det er å pakke om bildet eller floated objektet, kan vi bruke samme verdi for klipp-sti . Bruk form-margin. For å legge til hvite mellomrom mellom formbanen og innholdet innpakning. Ta en titt på Stuff & amp; Tull Nettsted for å se hvordan CSS-figurer brukes til å pakke inn tekst rundt et sentralt bilde.

Firefox har A. form-sti editor Innenfor DEV-verktøypanelet, som er spesielt nyttig for å jobbe med komplekse former. Imidlertid, bruk med forsiktighet. Innpakning av forkant av et tekst av tekst er flott for kunstnerisk effekt, men er ikke alltid bra for brukeropplevelsen. Komplekse hakkede former kan lage blokker av tekst vanskeligere å lese. For viktig innhold, vil du kanskje styre klart.

07. Rull snapping.

Mange nettsteder utnytter JavaScript-biblioteker for å gi en glatt, innfødt app-lignende rulleopplevelse, hvor innhold "snaps" til poeng som brukeren ruller. Nå, med Scroll Snap-spesifikasjonen, kan vi gjøre dette rett i vår CSS-fil - det er lite behov for å importere i tunge JS-moduler for å oppstå siden din!

For å implementere Scroll-Snapping trenger vi et element for å fungere som vår Scroll-beholder. Beholderens direkte barn dikterer punktene som vil bli snappet til, og kan justeres på forskjellige måter i Snap-området.

Scroll snapping kan enda mer effektive når kombinert med en annen ny CSS eiendomsverdi - posisjon: klebrig . Denne posisjonen verdien "stikker" et element i en bestemt posisjon mens du ruller i beholderen - en annen oppførsel som tidligere bare var mulig med JavaScript. Sjekk ut denne rulle snapet med posisjon: Sticky and IntersectionObserver Eksempel .

08. CSS-rutenett og layouter

Front-end utviklere har hacket layout med hvilke verktøy som var tilgjengelige for bruk på det tidspunktet - senest flexbox, som mange moderne nettsystemer bruker. Men Flexbox ble aldri designet for å bygge strenge grids - dets formål er fleksibilitet!

CSS-grid er den første spesifikasjonen som er designet for todimensjonal layout, slik at vi har fullført kontroll over å bygge et layout og plassere elementer på både raden og kolonnaksen. Å bygge en responsiv layout med grid krever ikke kalk () eller hacking rundt med negative marginer. Det hemmelige våpenet er FR-enheten - en ny enhet eksklusivt til rutenettet. FR-enheten størrelser gridspor (rader og kolonner) som en andel av ledig plass. Det tar hensyn til eventuelle faste spor, takrenner og innhold, og distribuerer deretter gjenværende plass tilsvarende. Jen Simmons Coined Begrepet "Intrinsic Web Design" for å beskrive den nye epoken av weboppsett som rutenettet bruker i.

Slik bruker du CSS-rutenettet

Gitteret krever et element med displayegenskapsverdien satt til rutenett, for å fungere som rutenettbeholderen. Direkte barn i rutenettbeholderen er de elementene som kan plasseres på rutenettet. Vi bruker egenskapene Grid-Template-rader og Grid-template-kolonner For å definere sporene (rader og kolonner) på rutenettet, og kolonne-gap. og Row-Gap. å definere rennene (hullene mellom sporene).

 .Grid {
Vis: GRID;
Grid-template-kolonner: Gjenta (4, 1fr);
Grid-mal-rader: Gjenta (4, 200px);
Gap: 20px;
} 

Vi bruker den gjenta() Funksjon for å holde koden mer konsis, som et alternativ til longhanden (f.eks. GRID-TEMPLATE-COLUNNER: 1FR 1FR 1FR 1FR ). Dette eksemplet bruker også shorthandet mellomrom til Row-Gap. og kolonne-gap. .

Koden ovenfor gir oss fire radspor, hver 100px høy og fire kolonne spor som hver fyller en like stor del av ledig plass, ved hjelp av FR-enheten.

Det er verdt å merke seg at dette ikke er den eneste måten å lage rutenettspor på. Implisitte spor kan også opprettes ved å plassere rutenettelementer. Det er nyttig å lese litt om dette hvis du bruker rutenett, som det lønner seg å få en dypere forståelse av hvordan rutenett oppfører seg under forskjellige forhold, og kan gjøre koding en layout mye enklere.

Vi kan plassere elementer på rutenettet ved å referere til rutenettlinjene, som er numeriske linjer som sitter mellom hvert spor. Her bruker vi Shorthands Grid-kolonne og Grid-rad til Grid-Column-Start , Grid-kolonne-end , Grid-Row-Start og grid-row-end . Disse forteller nettleseren på hvilken linje varen vår skal starte og slutte på hver akse.

 .item {
Grid-kolonne: 1/4;
Grid-rad: 2;
} 

Gitteret gir oss mange forskjellige måter å plassere elementer på: Vi kan i stedet nevne våre rutenettlinjer:

 .Grid {
Vis: GRID;
Grid-Template-Columns: [Image-Start] 1FR
 1fr 1fr [image-start] 1fr;
Grid-Template-Rader: 200px [Image-Start]
 200px 200px [image-end] 200px;
Gap: 20px;
} 

Alternativt, den Grid-template-området Eiendom lar oss "tegne" et rutenettlayout med tekst.

 .Grid {
Vis: GRID;
Grid-template-kolonner: Gjenta (4, 1fr);
Grid-mal-rader: Gjenta (4, 200px);
Gap: 20px;
Grid-template-områder:
'. . . . '
'Image Image Image.'
'Image Image Image.'
'. . . . ';
} 

Ved hjelp av en av disse metodene kan vi bare referere til det tilsvarende rutenettet når du plasserer en rutenett:

 .Image {
Gitterområde: bilde;
} 

Denne artikkelen ble opprinnelig publisert i Creative Web Design Magazine Webdesigner . Kjøp problem 290 nå.

• 10 beste CSS-rammer i 2019
• Slik legger du animasjon til SVG med CSS
• 52 Webdesign verktøy for å hjelpe deg med å jobbe smartere i 2019