5 Heta nya CSS-funktioner och hur man använder dem

I den här artikeln utforskar vi fem nya egenskaper som kommer till CSS, ta en titt på vad de gör och hur man lägger dem till praktisk användning i dina projekt. Vi ska skapa en Webbplatslayout För en sida som innehåller en nyhetsfodral och en liten chattlåda i hörnet. För mer CSS-tricks, ta en titt på vår artikel som utforskar olika CSS-animationsexempel . Om du skapar en helt ny webbplats, prova en Website Builder och var noga med att bläddra i din webbhotell Alternativ här.

För den här handledningen behöver du Chrome 65+ eller Firefox 59+. Ta en titt på medföljer github repo för steg-för-steg-koden. Vi utnyttjar följande funktioner för att skapa en bättre upplevelse och arbeta kring några problem. Och om du utformar tillsammans med ett lag, använd det bästa molnlagring för att hålla sakerna sammanhängande.

CSS-displaymodul (nivå 3)

• Display: Innehåll;
• W3C-status - Arbetsutkast
• Browser support

CSS villkorliga reglermodul (nivå 3)

• @Stöd(...) {...}
• W3C-status - Kandidatrekommendation
• Vidare läsning: MDN Web Docs

CSS Overcull Behavior Module (Nivå 1)

• Overcull-beteende: innehåller;
• W3C-status - inofficiell
• Browser support
• Vidare läsning: Ta kontroll över din bläddra

CSS-selektörmodul (nivå 4)

• : Fokus-Inom
• W3C-status - Arbetsutkast
• Browser support
• Ytterligare läsning: MDN Web Docs : Fokus-Inom , : Platshållare-visad

CSS-inneslutningsmodulen (nivå 1)

• Innehåll: färg;
• W3C-status - Kandidatrekommendation
• Browser support
• Vidare läsning: CSS-inneslutning i krom 52

01. Ställ in HTML för nyhetsfeed

Först måste vi ställa in några super enkla, upprepande markup för vår nyhetsfeed. Låt oss skapa en .behållare Div med en oorderad lista inuti. Ge & lt; ul & gt; klassen av .utfodra , skapa sedan 10 lista-objekt som innehåller en div med .kort klass och textkort 1, kort 2 etc.

Slutligen skapa en annan listobjekt in-mellan 5 och 6 med en klass av .Nested - Detta kommer att vara till hjälp senare - och lägg till en & lt; ul & gt; Inuti med tre listartiklar med textkortet A, kort B etc.

 & lt; kropp och gt;
 & lt; div class = "container" & gt;
 & lt; ul class = "feed" & gt;
 & lt; div class = "kort" & gt; card 1 & lt; / div & gt; & lt; / li & gt;
 & lt; li & gt; div class = "kort" & gt; card 2 & lt; / div & gt; & lt; / li & gt;
 & lt; div class = "kort" & gt; card 3 & lt; / div & gt; & lt; / li & gt;
 & lt; div class = "kort" & gt; kort 4 & lt; / div & gt; & lt; / li & gt;
 & lt; div class = "kort" & gt; kort 5 & lt; / div & gt; & lt; / li & gt;
    & lt; li class = "nested" & gt;
 & lt; ul & gt;
 & lt; div class = "kort" & gt; card a & lt; / div & gt; & lt; / li & gt;
 & lt; li & gt; & lt; div class = "card" & gt; card b & lt; / div & gt; & lt; / li & gt;
 & lt; div class = "kort" & gt; card c & lt; / div & gt; & lt; / li & gt;
 & lt; / ul & gt;
 & lt; / li & gt;
 & lt; li & gt; div class = "kort" & gt; card 6 & lt; / div & gt; & lt; / li & gt;
 & lt; div class = "kort" & gt; card 7 & lt; / div & gt; & lt; / li & gt;
 & lt; li & gt; & lt; div class = "card" & gt; card 8 & lt; / div & gt; & lt; / li & gt;
 & lt; li & gt; & lt; div class = "card" & gt; card 9 & lt; / div & gt; & lt; / li & gt;
 & lt; div class = "kort" & gt; card 10 & lt; / div & gt; & lt; / li & gt;
 & lt; / ul & gt;
& lt; / div & gt;
& LT; / Body & GT; 

02. Stil nyhetsfeeden

Nu måste vi lägga till några snabbstilar så att det börjar se mer ut som en nyhetsfeed. Först kan vi ge & lt; kropp & gt; En subtil grå bakgrundsfärg. Ge sedan .behållare en maxbredd på 800px och användning Marginal: 0 Auto; att centrera den.

Låt oss också ge .kort en vit bakgrund, 10px av vaddering och marginal och slutligen a minhöjd av 300px - det borde ge oss tillräckligt för att göra sidrollbar. Slutligen stönar vi lite flexbox magi på .utfodra För att göra objekten flyter snyggt, med två kort per rad.

 .feed {
Visa: Flex;
Flex-wrap: Wrap;
}
.feed li {
Flex: 1 0 50%;
} 

03. Fixa layoutproblem

Om du bläddrar ner listan kommer du att märka att våra kort i den kapslade listan, kort A-C, orsakar några layoutproblem. Helst skulle vi vilja att de skulle flöda med resten av korten men de är fast fast i ett kvarter. Anledningen till detta är att en flexbehållare - som skapas med Display: Flex - Gör bara sina omedelbara barn (d.v.s. listobjekten) i flexobjekt.

Nu är det normalt det enda sättet att fixa det här att ändra markeringen, men låt oss låtsas att du inte har den lyxen. Kanske genereras nyhetsmarkeringen av ett tredje parts skript eller det är äldre koder som du bara försöker att omskatta. Så hur kan vi fixa det här?

Träffa Display: Innehåll . Denna lilla one-liner gör väsentligen ett element som beter sig som om det inte är där. Du ser fortfarande elementets efterkommare men själva elementet påverkar inte layouten.

Eftersom vi låtsas kan vi inte ändra markupen (bara för det här steget) vi kan vara lite smarta om detta och gör .kort Element av flexobjekten och ignorerar nästan helt listmarkeringen.

Ta först bort det befintliga .feed li klass och använd sedan Display: Innehåll för båda & lt; ul & gt; och & lt; li & gt; Element:

 .Feed ul,
.feed li {
Display: Innehåll;
} 

Nu bör du se korten som flyter i ordning, men vi har förlorat limningen. Fixa det genom att lägga till flexegenskapen till .kort istället:

 .Card {
Flex: 1 0 40%;
} 

TA-DA! Våra kort använder nu flexboxens underverk som om deras strukturella oorderade listmarkering inte existerar.

Som en sidoanteckning kanske du undrar varför flöjningsbas Värdet är inställt på 40%. Detta beror på att .kort klassen har en marginal, som inte ingår i bredden beräkning som du förväntar dig när du använder Box-dimensionering: Border-box . Att arbeta runt detta behöver vi bara ställa in flöjningsbas tillräckligt hög för att utlösa omslaget vid den nödvändiga punkten och Flexboxen kommer automatiskt att fylla det återstående utrymmet.

04. Utforska Feature Queries

Fastän Display: Innehåll Gör precis vad vi behöver, det är fortfarande bara vid arbetsförslag med W3C. Och i Chrome-stöd anlände endast i version 65 som släpptes i mars 2018. Otroligt Firefox har haft stöd sedan april 2015!

Om du inaktiverar stilen i DevTools ser du att våra förändringar har gjort lite av en röra med layouten när Display: Innehåll tillämpas inte. Så vad kan vi göra med det här? Tid för vår nästa nya funktion - funktionsfrågor.

Dessa fungerar precis som medifrågor, men de låter dig fråga webbläsaren - med hjälp av CSS ensam - om en egendom och värdeuttryck stöds. Om de är, kommer de stilar som finns i frågan att tillämpas. Nu, låt oss flytta vår Display: Innehåll stilar i en funktionsfråga.

 @supports (Display: Innehåll) {
.Feed ul,
.feed li {
  Display: Innehåll;
}
.Card {
  Flex: 1 0 40%;
}
} 

05. Använd 'inte "för ett rengöringsresultat

Normalt i denna typ av progressivt förbättringsscenario skulle vi använda frågan för att lägga till de nya stilarna, men det måste också inaktivera några av de ursprungliga stilarna som är nödvändiga för fallback-layouten.

Men du kan bestämma att eftersom stöd för funktionsfrågor är ganska bra (om du ignorerar IE) vill du faktiskt använda funktionen förfrågan inte operatör. Det fungerar precis som du kan förvänta dig, så vi kan återansöka vårt original böja egendom till listrutan när Display: Innehåll stöds inte:

 @Supports ej (display: innehåll) {
.feed li {
  Flex: 1 0 50%;
}
} 

Inuti inte fråga vi kan lägga till några stilar så att .Nested objekt i grunden återanvända vad som var ärvt med att använda Display: Innehåll .

 Feed li.nested {
flex-basis: 100%;
}
.Feed li.nested ul {
 Visa: Flex;
 Flex-wrap: Wrap;
} 

06. Ta det ett steg längre

Du kan redan se potentialen i funktionsfrågor, men det riktigt coola är att du kan kombinera uttryck med de tre tillgängliga operatörerna: och , eller och inte . Kanske kan vi också kolla på Display: Flex Stöd och lägg sedan till en flottörbaserad fallback.

Vi ska inte göra det här, men om vi var vi skulle först ändra de två funktionerna som så:

 @supports (display: flex) och (display: innehåll) {
...
}
@Supports (display: flex) och (ej (display: innehåll)) {
...
} 

Som en bonus kan du också testa för anpassade egenskaper stöd så här:

 @supports (--FOO: Green) {
...
} 

07. Lägg till en chattruta

Nu har vi en vacker nyhetsfeed på plats, låt oss lägga till en liten chattlåda som är fixerad till skärmens nedre höger. Vi behöver en lista med meddelanden och ett textfält för användaren att ange sitt meddelande. Lägg till det här blocket strax efter öppningen & lt; kropp & gt; märka:

 & lt; div class = "chat" & gt;
 & lt; Div Class = "Meddelanden" & GT;
 & lt; ul & gt;
& lt; div class = "meddelande" & gt; meddelande 1 & lt; / div & gt; & lt; / li & gt;
& lt; div class = "meddelande" & gt; meddelande 2 & lt; / div & gt; & lt; / li & gt;
& lt; div class = "meddelande" & gt; meddelande 3 & lt; / div & gt; & lt; / li & gt;
& lt; div class = "meddelande" & gt; meddelande 4 & lt; / div & gt; & lt; / li & gt;
& lt; div class = "meddelande" & gt; meddelande 5 & lt; / div & gt; & lt; / li & gt;
& lt; div class = "meddelande" & gt; meddelande 6 & lt; / div & gt; & lt; / li & gt;
& lt; div klass = "meddelande" & gt; meddelande 7 & lt; / div & gt; & lt; / li & gt;
& lt; div class = "meddelande" & gt; meddelande 8 & lt; / div & gt; & lt; / li & gt;
& lt; div class = "meddelande" & gt; meddelande 9 & lt; / div & gt; & lt; / li & gt;
& lt; div class = "meddelande" & gt; meddelande 10 & lt; / div & gt; & lt; / li & gt;
 & lt; / ul & gt;
 & lt; / div & gt;
 & LT; Input Type = "Text" Class = "Input" & GT;
& lt; / div & gt; 

08. Stil chattrutan

Tiden att snabbt lägga till lite styling så det ser halvt anständigt ut.

 .chat {
 Bakgrund: #fff;
 Border: 10px Solid # 000;
 botten: 0;
 FONT-STORLEK: 10px;
 Position: Fast;
 rätt: 0;
 Bredd: 300px;
 Z-Index: 10;
}
.messages {
 Gräns-Bottom: 5px Solid # 000;
 Överflöde: Auto;
 Padding: 10px;
 Maxhöjd: 300px;
}
.message {
 Bakgrund: # 000;
 Border-Radius: 5px;
 Färg: #fff;
 Marginal: 0 20% 10px 0;
 Padding: 10px;
}
.messages li: sista-barn .message {
 marginalbotten: 0;
}
.inmatning {
 gräns: ingen;
 Visa: Block;
 Padding: 10px;
 Bredd: 100%;
} 

09. Scroll kedja

Förhoppningsvis nu har du en liten chattruta med en rullbar lista över meddelanden som sitter ovanpå din nyhetsfeed. Bra. Men har du märkt vad som händer när du bläddrar inuti ett kapslat område och du når slutet av sitt rullningsområde? Försök. Bläddra hela vägen till slutet av meddelandena och du får se sidan själv kommer att börja bläddra istället. Detta kallas Scroll Chaining.

Det är inte en stor sak i vårt exempel, men i vissa fall kan det vara. Vi har behövt arbeta runt den här funktionen innan du skapar rullbara områden inom modals eller kontextmenyer.

Den smutsiga fixen är att ställa in & lt; kropp & gt; till Överflöde: dold , Men det finns en trevlig, glänsande ny CSS-fastighet som fixar allt detta och det är ett enkelt en-liner. Säg hej till överdrivet beteende . Det finns tre möjliga värden:

• bil - Standard, som tillåter rullkedja
• innehålla - Inaktiverar scrolleding
• ingen - Inaktiverar rullkedja och andra överskrollseffekter (t ex gummibanding)

Vi kan använda Shorthand överdrivet beteende eller vi kan rikta in en specifik riktning med Overcrull-beteende-x (eller en ). Låt oss lägga till det i vår .messages klass:

 .messages {
...
Overcrull-beteende-Y: innehåller;
...} 

Försök nu att rulla igen och du får se att det inte längre påverkar sidans bläddring när du når slutet av innehållet.

Den här egenskapen är också ganska praktisk om du ville implementera en pull-to-refresh-funktion i din PWA, säg för att uppdatera nyheten. Vissa webbläsare, som Chrome for Android, lägger automatiskt till egen och hittills har det inte varit något enkelt sätt att inaktivera det utan att använda JS för att avbryta händelser med hjälp av prestanda som påverkar icke-passiva hanterare.

Nu behöver du bara lägga till Overcull-beteende: Innehåll till det visningsort som helst, förmodligen & lt; kropp & gt; eller & lt; html & gt; .

Det är värt att notera att den här egenskapen inte är en W3C-standard, snarare ett förslag från Web Incubator Community Group (WICG). Populära, stabila och mogna WICG-förslag behandlas för migration till en W3C-arbetsgrupp i ett senare skede.

10. kollapsa chattrutan när den inte används

För tillfället tar chattrutan ganska lite utrymme, som om vi inte interagerar med det är lite distraherande. Lyckligtvis kan vi göra något med det här med lite CSS-magi.

Men först och främst måste vi ändra våra befintliga stilar något. Som standard vill vi att chatboxen ska kollapsas, så vi måste minska maximal höjd värde i .messages klass. Medan vi är där kan vi också lägga till en övergång till maximal höjd fast egendom:

 .messages {
 ...
 Maxhöjd: 25px;
Övergång: maxhöjd 500ms; } 

Nästa sida: Fortsätt att utforska nya CSS-funktioner i steg 11-20

• 1
• 2

Nuvarande sida: Utforska 5 nya CSS-funktioner: Steg 01-10