8 State-of-the-art CSS-funktioner (och hur du använder dem)

CSS utvecklas ständigt och en mängd spännande nya funktioner har lagts till för att göra specifikationen ett ännu mer kraftfullt vapen i en webbdesigners verktygsset.

CSS-nätet tar layouter till nya nivåer som inte ses tidigare, anpassade egenskaper introducerar konceptet variabler medan funktionsfrågor kontrollerar webbläsarstöd. Media-frågor flyttar upp en nivå med nya tillgänglighetsegenskaper, variabla teckensnitt erbjuder maximal kreativitet med minsta kodblooat medan Scroll Snapping eliminerar behovet av JavaScript. Kolla in vår coola CSS-animering Exempel på att se vad du kan skapa. Eller, för att bygga en webbplats utan kod, prova dessa Webbplatsbyggare .

För de som vill bli kreativa finns det CSS-former för unika layouter och en mängd blandningslägen och filter för att introducera Photoshop-stilens designeffekter. Läs vidare för att ta reda på hur du kan använda dessa måste-försök i dina senaste byggnader. Men kom ihåg att en komplex webbplats betyder att du behöver en webbhotell Tjänst som kan stödja dina behov.

01. Anpassade egenskaper

Om du har använt en preprocessor som SASS, eller ett programmeringsspråk som JavaScript, kommer du utan tvekan att vara bekant med begreppet variabler - värderingar som definieras för återanvändning i hela din kod. Anpassade egenskaper gör det möjligt för oss att göra detta i vår CSS, utan att behöva förprocessorer. Variabler kan ställas in på: rotnivå (skapa globala variabler) eller scoped i en väljare. De kan då kallas med hjälp av syntaxen var (-> - myvariablename). Till exempel kan vi ställa in en variabel som heter --grundfärg så här:

 / * på rotelementet (en global
variabel) * /
: root {
- -PrimaryColor: # F45942;
}
/ * Scoped till en väljare * /
.MY-komponent {
- -PrimaryColor: # 4171F4;
} 

Nu kan vi använda den variabeln som ett fastighetsvärde:

 H1 {
Färg: VaR (- -PrimaryColor);
} 

Anpassade egenskaper är ärft, vilket har några mycket användbara konsekvenser. En av dem är teman. Ta ovanstående exempel: Vi kan definiera en global variabel (# F45942 - en ljus orange röd) för --grundfärg På rotnivå, så varje förekomst där vi använder denna variabel kommer värdet att vara rött. Men vi omdefinierar också samma variabel inom en väljare, med ett annat värde (# 4171F4 - mediumblå). Så för alla fall där vi använder --grundfärg Variabel inom den väljaren kommer det beräknade värdet att vara blått.

Ställa in standardvärden

Scoping av variabler är en bra funktion, men en som kan fånga dig ibland! Om du försöker använda en variabel som ännu inte är definierad kommer det resulterande värdet att falla tillbaka till webbläsarens standard, eller ett ärftligt värde, snarare än en variabel definierad längre upp kaskaden. I vissa fall kan det vara lämpligt att ställa in ett standardvärde:

 H1 {
Färg: var (- -Primaryfärg, blå);
} 

Hur skiljer sig egna egenskaper från preprocessorvariabler?

Anpassade egenskaper skiljer sig från preprocessorvariabler på några viktiga sätt. Förprocessorvariabler sammanställs innan din kod skickas till webbläsaren. Webbläsaren ser aldrig att ett värde är en variabel, det ser bara slutresultatet. Anpassade egenskaper beräknas i webbläsaren. Du kan inspektera dem i moderna verktygsverktyg, ändra variabeln och se det upplösta värdet. De är dynamiska variabler, vilket innebär att deras värden kan ändras inom CSS, eller vid körning med JavaScript.

Till skillnad från preprocessorvariabler kan anpassade egenskaper inte användas inom selector namn, fastighetsnycklar eller mediafråga-deklarationer - endast CSS-fastighetsvärden. CSS preprocessorer har fortfarande gott om fördelar, så vi kommer troligen att se dem klibba i ett tag längre, men de kommer sannolikt att användas oftare i kombination med egna egenskaper.

02. Funktionsproblem

Funktionsfrågor är ett sätt att testa om en webbläsare stöder en viss CSS-fastighetskombination i din CSS-fil. De tar nästan bort behovet av funktionsdetekteringsbibliotek som Modernizr. Syntaxen liknar en mediefråga: Du använder AT-regeln @supports , följt av ditt fastighetsvärdespar, förpackning av koden som ska utföras om webbläsaren uppfyller de angivna förhållandena.

Funktionsfrågor är väl stödda i moderna webbläsare, men de är relativt nya, och en "Gotcha" är att vissa webbläsare du kanske vill testa för support kanske inte stöder funktionsfrågor själva. Ofta det bästa sättet att hantera detta är att tillhandahålla fallbackstilar först (utanför funktionen förfrågan), sedan wrap dina förbättringar för att stödja webbläsare inuti @supports regel.

Var medveten, funktionsfrågor behöver endast användas sparsamt. En av de stora funktionerna i CSS är att webbläsare helt enkelt kommer att ignorera några egenskaper eller värderingar som de inte förstår. Det är bäst att bara anställa funktionsfrågor när du inte gör det skulle orsaka en visuell bugg, annars kan du ställa dig upp för mycket extra arbete.

Hur man använder funktionsfrågor

För att testa för stöd av ett enda fastighetsvärde kan vi ge fallbacken först. I det här exemplet ger vi en FlexBox-fallback för webbläsare som inte stöder rutnätlayout.

 .My-komponent {
Visa: Grid;
}
@supports (display: rutnät) {
.MY-komponent {
Visa: Flex;
}
} 

03. Media Queries

Du kommer sannolikt att vara van vid att använda medifrågor för att upptäcka bredden och höjden på visningsporten och typen av media (vanligast skärm eller utskrift). Nivå 5 Media Queries Specification ger oss några nyare mediafunktioner till (valfritt) test för, som redan stöds i vissa webbläsare. Dessa erbjuder några stora fördelar för tillgänglighet.

Användare med vestibulära störningar, och de som lider av rörelsesjuka, kanske inte uppskattar webbsidor med mycket rörelse, som animationer och parallaxrullningseffekter. Med hjälp av den föredragna medföljande materiella inställningen kan vi erbjuda användare som väljer ett alternativt alternativ.

 .My-element {
Animering: Skaka 500ms lätta in-out 5;
}
@Media (föredrar-reducerad rörelse: minska) {
.MY-element {
Animering: Ingen;
}
} 

Det blir allt populärare för webbplatser att ge ett alternativt mörkt tema. Prefers-Colors-Scheme tillåter oss att fråga om användaren har ställt in en systemövergripande preferens (med hjälp av sökorden, mörk, ljus eller no-preferens) och visar det lämpliga färgschemat i enlighet därmed.

 / * Media Queries 02 * /
kropp {
Bakgrund: Linjär-gradient (till
botten, # b5faff, # ffe2b4);
}
@Media (föredrar-färg-schema: mörk) {
kropp {
färg vit;
Bakgrund: Linjär-gradient (till
botten, # 0c1338, # 3e3599);
}
} 

04. Variabel typsnitt

I allmänhet, om vi vill inkludera ett antal olika teckensnitt ansikten av samma familj på vår webbsida, skulle vi behöva ladda samma antal teckensnittsfiler. Ju mer teckensnittsfiler du laddar desto mer vikt läggs du på din sida, med en inverkan på prestanda - så det är vanligtvis klokt att ladda högst tre eller fyra teckensnittsfiler (beroende på din prestationsbudget).

Variabel typsnitt Ändra allt det. De gör det möjligt för oss att ladda en enda teckensnittsfil för en hel fontfamilj. Även om den här filen vanligtvis kommer att vara större än ett enda teckensnitt skulle, om du vill utnyttja olika vikter och stilar, så är en variabel typsnitt desto mer prestandantlösning. Om du har köpt en helfontfamilj, kom ihåg att stash den på ett säkert sätt molnlagring Så du förlorar inte dina filer!

Variationsaxel

Inte bara det, men med variabla teckensnitt, är vi inte begränsade till en liten delmängd av typsnittsvikt. När man arbetar med vanliga teckensnitt ges de tillgängliga typsnittsviktarna i multiplar av 100. Typiskt kan 400 vara den vanliga vikten, 300 ljusvikten och 700 den djärva vikten - med olika familjer som levererar fler vikter eller färre. Variabelt teckensnitt har en variationsaxel, som ger oss en rad värden för egenskaper som typsnittsvikt. Ett teckensnitt kan ha en axel på 1-900, vilket skulle ge oss tillgång till 900 olika vikter!

Variationsaxeln är inte bara begränsad till vikt. Variabel typsnitt kan ha olika axlar för x-höjd, sned, serif längd och kontrast (för att välja några exempel) - vilket betyder att en enda teckensnittsfil kan ge oss tillgång till hundratals eller till och med tusentals variationer! Vi kunde till och med animera dessa egenskaper, vilket gör det möjligt för oss att uppnå några riktigt coola effekter. Mandy Michael ( https://codepen.io/mandymichael ) Har en hel last av kreativa demos som verkligen testar gränserna.

Browser support för variabla teckensnitt är ganska bra, och många fontfoundries utvecklar aktivt nya variabla teckensnitt som du kan börja använda nu - även om de ofta kommer till ett premium, särskilt för de mer fullföljda fontfamiljerna. Om du bara vill komma igång med att spela runt med variabla teckensnitt för att se vad de kan göra, finns det ett antal olika lekplatser för variabel typsnitt:

Var medveten om du vill använda variabla teckensnitt just nu måste du se till att du använder ett aktuellt operativsystem - de kommer inte att fungera på äldre oss.

Font-variation-inställningar

Medan vi kan ändra typsnittet lätt nog med font-vikt CSS-fastighet, Font-variation-inställningar är en ny egendom som ger oss fullständig tillgång till ett teckensnitts olika variationsaxlar. Dessa inkluderar både registrerade axlar och anpassade axlar.

Registrerade axlar

Det finns fem olika registrerade axlar, vilket motsvarar olika CSS-egenskaper. Var och en av dessa har det som är känt som en "Axis-tag". De registrerade axlarna är: vifta (typsnitt), wdth (font-stretch), sln (Font-stil: snett / vinkel), ite (font-stil: kursiv), opsz (font-optisk storlek). Vi kan komma åt dessa axlar antingen av CSS-egendomen, eller med Font-variation-inställningar .

Dessa axlar är inte nödvändigtvis alla som ingår i varje variabel typsnitt (vissa får bara ha en eller två axlar), men de är sannolikt de vanligaste.

Anpassade axlar

Anpassade axlar är skräddarsydda axlar som ingår av teckensnittet, och kan vara någonting alls. De kunde inkludera (till exempel) seriflängd, x-höjd, även något mer kreativt (och mindre typografiskt typiskt), som rotation.

Båda typerna av axlar måste uttryckas som en fyra tecken tagg. Registrerade axlar måste vara små bokstäver, medan anpassade axlar är stora bokstäver. Båda kan kombineras i Font-variation-inställningsegenskapen. Font-variation-inställningar är animerbara, vilket kan möjliggöra några mycket coola UI-effekter! Några mycket intressanta experiment har producerats med hjälp av ikonfonter också.

05. Grafiska effekter

Om du är bekant med designverktyg som Photoshop och Illustrator, kan du vara medveten om blandningslägen och hur de kan användas för att producera olika effekter på bilder. Det sätt som blendlägger fungerar är att blanda två eller flera lager tillsammans med matematiska formler för att beräkna ett resulterande värde för varje pixel. Skikten kan vara något - bilder, gradienter eller plana färger. Vissa blandningslägen ger ett mörkt resultat (t ex multiplicera, vilket multiplicerar pixelvärdena för skikten), någon lättare (t ex skärm och överlagring). Vi behöver inte förstå matematik för att kunna använda dem. Att spela med olika blandningslägen kan ge oss en bra känsla för vilken av dem som producerar de önskade resultaten när de kombineras med olika lager.

Med CSS-egenskaperna mix-blend-mode och bakgrundsblandningsläge , Vi kan uppnå Photoshop-liknande bildeffekter i webbläsaren. Båda egenskaperna tar samma värden, men fungerar lite annorlunda.

Bakgrundsblandningsläge

Bakgrundsblandningsläge Blandar tillsammans bakgrundsskikten av det element vi riktar in. Vårt element kan ha bakgrundsbilder, färger och gradienter, och de skulle alla blandas med varandra utan att påverka förgrundsinnehållet. Vi kan ange flera värden för bakgrundsblandningsläge , en för varje bakgrundsskikt.

 .My-element {
Bakgrund: URL (#MYURL),
Linjär-gradient (45deg, RGBA (65, 68,
244, 1), RGBA (203, 66, 244, 0,5)),
RGBA (244, 65, 106, 1);
Bakgrundsstorlek: Skydd;
Bakgrund-Blend-läge: Skärm,
multiplicera;
} 

Mix-blend-mode

Mix-blend-mode Påverkar hur elementet blandar med sin förälder och dess syskon, inklusive förgrund och bakgrundsinnehåll och pseudo-element. Några intressanta kreativa effekter kan uppnås genom att blanda överlagda pseudo-element (:: före och :: efter).

 .My-element {
Bakgrund: RGB (244, 65, 106);
MIX-BLEND-MODE: Multiplicera;
} 

CSS-filter

CSS-filter kan också användas för att skapa slående visuella effekter, med hjälp av filtrera Fastighets- och filterfunktionsvärden. Till skillnad från blandningslägen tillämpar de en grafisk effekt direkt på det element som de riktar in, och ett element kan ha flera filter applicerade.

Konvertera till gråskala

Vi kan manipulera färgerna i ett element med större grad av kontroll än att förlita sig på blandningslägen. Filter kan konvertera en bild till gråskala, justera ljusstyrkan, kontrast och mättnad, oskärpa ett element eller lägga till en droppskugga. De kan också animeras också och ser bra ut med svängningseffekter.

SVG-filter

CSS-filter är faktiskt förenklade versioner av SVG-filter. CSS filtrera egendom tar också en URL () Funktion, så att vi kan passera i en webbadress till ett SVG-filter. SVG-filter är extremt kraftfulla och möjliggör några otroliga bildeffekter - men de är också mycket mer komplicerade än CSS-filterfunktioner! Sara Soueidan har en underbar artikel-serie på CODROPS om du är intresserad av att dyka på att koda dina egna anpassade SVG-filter. Kolla in artikeln på https://typanus.net/codrops/2019/01/15/SVG-Filters-101/

Klippning och maskering: bortom rektanglar

Vi är vana vid att hantera lådor på webben, men inte allt måste vara rektangulärt! Klippning och maskering är två sidor av samma mynt, och är olika sätt att dölja och visa olika delar av ett element så att bakgrunden visar igenom. Detta ger oss befogenhet att introducera intressanta och kreativa former till våra mönster.

Klämväg

De Clip-path () Egenskapen tillåter oss att "skära ut" ett element genom att definiera en sökväg. Det tar ett antal grundläggande formfunktioner, Inset (), cirkel (), ellipse () eller polygon () , som tillåter oss att hämta mer komplexa utklippsformer med hjälp av par av XY-koordinater för att definiera banan. Alternativt kan vi också passera på en SVG-väg med hjälp av väg() funktion, eller använda URL () för att tillhandahålla ett SVG-väg-ID.

Inte inne i vägen

Clipping ett element clips allt utanför den väg du definierar, men själva elementet är fortfarande en rektangel. Om du har innehåll som sträcker sig ut ur klippvägens gräns, kommer det också att klippas - det kommer inte att linda inuti formen.

Mask-bild

mask-bild Gör det möjligt för oss att visa och dölja delar av bilden med hjälp av en bild (SVG eller transparent PNG) eller gradient som en mask. Till skillnad från klämväg , vi kan lägga till konsistens till våra bilder med maskering, eftersom maskkällan inte behöver vara en väg - det tillåter grader av öppenhet.

06. CSS-former

CSS-former-specifikationen gör det möjligt för oss att fästa text runt flytande geometriska former, vilket skapar några intressanta, magasin-liknande layouter. Detta är möjligt med hjälp av form-utanför fast egendom. Liknande klämväg , vi kan ge den här egenskapen en grundläggande formfunktion Cirkel (), ellipse (), insats (), polygon () , eller en URL till en SVG-väg, och faktiskt de två arbetar i harmoni mycket bra! form-utanför Kommer att slå vår text effektivt, men det påverkar inte det flytande elementet. Om vi ​​vill att texten ska se ut som om det är omslag runt bilden eller det flytande objektet kan vi använda samma värde för klämväg . Använda sig av formmarginal För att lägga till blankutrymme mellan formvägen och innehållet omsluter det. Ta en titt på Stuff & amp; Dumheter Webbplats för att se hur CSS-former används för att vikla text runt en central bild.

Firefox har en formbanor Inom DEV Tools-panelen, som är särskilt användbar för att arbeta med komplexa former. Använd dock med försiktighet. Förpackning av framkanten av ett stycke text är utmärkt för konstnärlig effekt, men är inte alltid bra för användarupplevelse. Komplexa skarpa former kan göra block av text som är svårare att läsa. För viktigt innehåll kanske du vill styra.

07. Scroll snapping

Många webbplatser utnyttjar JavaScript-bibliotek för att ge en slick, infödd appliknande rullningsupplevelse, där innehållet "snaps" till punkter som användaren rullar. Nu, med Scroll Snap-specifikationen, kan vi göra det här i vår CSS-fil - det finns lite behov av att importera i tunga JS-moduler för att blåsa din sida!

För att implementera bläddra, behöver vi ett element som fungerar som vår rullbehållare. Behållarens direkta barn dikterar de punkter som kommer att knäppas till, och kan anpassas på olika sätt inom snapområdet.

Scroll Snapping kan vara ännu effektivare när den kombineras med ett annat nytt CSS-fastighetsvärde - Position: klibbig . Detta positionsvärde "pinnar" ett element till en angiven position medan du rullar in i behållaren - ett annat beteende som tidigare var möjligt med JavaScript. Kolla in den här Scroll Snap med position: Sticky och IntersectionobServer Exempel .

08. CSS Grid och Layouts

Front-end-utvecklare har hackat layout med vilka verktyg som var tillgängliga att använda vid den tidpunkten - senast Flexbox, som många moderna rutsystem använder. Men Flexbox var aldrig utformad för att bygga stränga galler - dess syfte är flexibilitet!

CSS-nät är den första specifikationen som är konstruerad för tvådimensionell layout, vilket gör att vi har fullständig kontroll över att bygga en layout och placera objekt på både raden och kolonnaxeln. Att bygga en responsiv layout med galler kräver inte beräkning () eller hacking runt med negativa marginaler. Det hemliga vapnet är FR-enheten - en ny enhet exklusiv till rutnät. FR-enhetens storlekar gridspår (rader och kolumner) som en andel av det lediga utrymmet. Det tar hänsyn till eventuella fasta spår, takrännor och innehåll och distribuerar sedan det återstående utrymmet i enlighet med detta. Jen Simmons myntade termen "Intrinsic Web Design" för att beskriva den nya eran av webbutik som galler i.

Hur man använder CSS Grid

Grid kräver ett element med displayens egendomsvärde som är inställt på rutnätet, för att fungera som nätbehållare. De direkta barnen i rutnätet är de föremål som kan placeras på rutnätet. Vi använder egenskaperna gridmall-rader och Grid-mall-kolumner för att definiera spåren (raderna och kolumnerna) på gallret, och kolonnklyfta och roddgap för att definiera takrännorna (luckorna mellan spåren).

 .grid {
Visa: Grid;
Grid-mall-kolumner: upprepa (4, 1Fr);
Grid-mall-rader: upprepa (4, 200px);
Gap: 20px;
} 

Vi använder upprepa() funktion för att hålla koden mer kortfattad, som ett alternativ till longhand (t ex Grid-mall-kolumner: 1Fr 1Fr 1Fr 1FR ). Detta exempel använder också Shorthand glipa för roddgap och kolonnklyfta .

Koden ovan ger oss fyra radspår, varje 100px hög och fyra kolumnspår som varje fyller en lika stor andel av det lediga utrymmet med FR-enheten.

Det är värt att notera att detta inte är det enda sättet att skapa rutnätspår. Implicit spår kan också skapas genom att placera rutnät. Det är användbart att läsa lite om detta om du använder rutnät, eftersom det betalar för att få en djupare förståelse för hur rutnätet beter sig under olika förhållanden, och kan göra kodning en layout mycket lättare.

Vi kan placera objekt på rutnätet genom att referera till rutnätnummer, som är numeriska linjer som sitter mellan varje spår. Här använder vi Shorthand gridkolonn och gridrad för gallerkolumnstart , gallerkolumn , nätstart och gridrad . Dessa berättar om webbläsaren vid vilken linje vårt objekt ska börja och sluta på varje axel.

 .Item {
Grid-kolonn: 1/4;
Grid-rad: 2;
} 

Grid ger oss många olika sätt att placera saker: vi kunde istället namnge våra rutiner:

 .grid {
Visa: Grid;
Grid-mall-kolumner: [bildstart] 1Fr
 1Fr 1FR [Bildstart] 1Fr;
Grid-mall-rader: 200px [bildstart]
 200px 200px [Image-end] 200px;
Gap: 20px;
} 

Alternativt, gridmall-område Fastigheten låter oss "rita" en rutnätlayout med text.

 .grid {
Visa: Grid;
Grid-mall-kolumner: upprepa (4, 1Fr);
Grid-mall-rader: upprepa (4, 200px);
Gap: 20px;
Grid-mall-områden:
'. . . .
'Bildbildbild.'
'Bildbildbild.'
'. . . . ';
} 

Med någon av dessa metoder kan vi helt enkelt referera till motsvarande gallerområde när du placerar ett gallerobjekt:

 .Image {
Gridområde: bild;
} 

Den här artikeln publicerades ursprungligen i kreativ webbdesignmagasin Webbdesigner . Köp utgåva 290 nu.

• 10 bästa CSS-ramarna 2019
• Hur man lägger till animering till SVG med CSS
• 52 Webbdesignverktyg som hjälper dig att arbeta smartare 2019