5 Hot New CSS-funktioner og hvordan du bruger dem

I denne artikel vil vi undersøge fem nye ejendomme, der kommer til CSS, kig på, hvad de gør, og hvordan man sætter dem til praktisk brug i dine projekter. Vi skal skabe en Website Layout. For en side, der indeholder en nyhedsfeed og en lille chatboks i hjørnet. For flere CSS-tricks, se vores artikel om at udforske anderledes CSS animation eksempler . Hvis du opretter et helt nyt websted, prøv en Website Builder. og sørg for at gennemse din Web Hosting. Valg her.

Til denne vejledning skal du bruge Chrome 65+ eller Firefox 59+. Tag et kig på ledsagende github repo for trin-for-trin-koden. Vi udnytter følgende funktioner til at skabe en bedre oplevelse og arbejde omkring nogle problemer. Og hvis du designer sammen med et hold, skal du bruge det bedste Sky lagring at holde tingene sammenhængende.

CSS-skærmmodul (niveau 3)

• Display: Indhold;
• W3C Status. - Arbejdsudkast
• Browser Support.

CSS betinget regler modul (niveau 3)

• @support(...) {...}
• W3C Status. - Anbefaling af kandidat
• Yderligere læsning: Mdn web docs.

CSS overscroll adfærdsmodul (niveau 1)

• overscroll-adfærd: indeholde;
• W3C Status. - uofficiel
• Browser Support.
• Yderligere læsning: Tag kontrol over din rulle

CSS Selectors Module (niveau 4)

• : fokus-indenfor
• W3C Status. - Arbejdsudkast
• Browser Support.
• Yderligere læsning: MDN Web Docs : fokus-indenfor Vi : Placeholder-vist

CSS-indeslutningsmodulet (niveau 1)

• indeholder: maling;
• W3C Status. - Anbefaling af kandidat
• Browser Support.
• Yderligere læsning: CSS-indeslutning i krom 52

01. Indstil HTML til nyhedsfeed

Først skal vi oprette nogle super simple, gentagende markup for vores nyhedsfeed. Lad os oprette en .beholder Div med en uordnet liste inde. Giv & lt; ul & gt; Klassen af .foder , og lav derefter 10 listelementer, der hver indeholder et div med .kort klasse og tekstkort 1, kort 2 osv.

Endelig oprette en anden Liste-Item. i mellem 5 og 6 med en klasse af .Næstet - Dette vil være nyttigt senere - og tilføj en & lt; ul & gt; Inde med tre liste elementer ved hjælp af tekstkortet A, kort B osv.

 & lt; Body & GT;
 & lt; div class = "beholder" & gt;
 & lt; ul klasse = "feed" & gt;
 & lt; li & gt; & lt; div class = "kort" & gt; kort 1 & lt; / div & g; / li & gt;
 & lt; li & gt; lt; div class = "kort" & gt; kort 2 & lt; / div & g; / li & gt;
 & lt; li & gt; lt; div class = "kort" & gt; kort 3 & lt; / div & g; / li & gt;
 & lt; li & gt; lt; div class = "kort" & gt; kort 4 & lt; / div & g; / li & gt;
 & lt; li & gt; lt; div class = "kort" & gt; kort 5 & lt; / div & g; / li & gt;
    & lt; li class = "nested" & gt;
 & lt; ul & gt;
 & lt; li & gt; & lt; div class = "kort" & gt; kort a & lt; / div & gt; / li & gt;
 & lt; li & gt; lt; div class = "kort" & gt; kort b & lt; / div & g; / li & gt;
 & lt; li & gt; lt; div class = "kort" & gt; kort c & lt; / div & gt; / li & gt;
 & lt; / ul & gt;
 & lt; / li & gt;
 & lt; li & gt; div class = "kort" & gt; kort 6 & lt; / div & g; / li & gt;
 & lt; li & gt; lt; div class = "kort" & gt; kort 7 & lt; / div & gt; / li & gt;
 & lt; li & gt; & lt; div class = "kort" & gt; kort 8 & lt; / div & g; / li & gt;
 & lt; li & gt; div class = "kort" & gt; kort 9 & lt; / div & g; / li & gt;
 & lt; li & gt; lt; div class = "kort" & gt; kort 10 & lt; / div & g; / li & gt;
 & lt; / ul & gt;
& lt; / div & gt;
& lt; / body & gt; 

02. Stil nyhedsfeed

Nu skal vi tilføje nogle hurtige stilarter, så dette begynder at se mere ud som en nyhedsfeed. Først kan vi give & lt; body & gt; en subtil grå baggrund farve. Derefter give .beholder en maksimal bredde på 800px og brug Margin: 0 Auto; at centrere justere det.

Lad os også give .kort en hvid baggrund, 10px af polstring og margin og endelig en min-højde af 300px - dette skal give os nok til at gøre siden scrollable. Endelig vil vi drysse nogle flexbox magi på .foder For at gøre emnerne flyder pænt, med to kort pr. Række.

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

03. Fix layoutproblemer

Hvis du ruller ned på listen, vil du bemærke, at vores kort i den indlejrede liste, kort A - C, forårsager nogle layoutproblemer. Ideelt set vil vi gerne have dem til at strømme ind med resten af ​​kortene, men de er helt fast sammen i en blok. Årsagen til dette er, at en Flex Container - som er oprettet ved hjælp af Display: Flex. - Gør kun sine umiddelbare børn (dvs. listelementerne) i flexelementer.

Nu, normalt den eneste måde at fastsætte dette på er at ændre markeringen, men lad os lade som om du ikke har den luksus. Måske genereres Newsfeed-markeringen af ​​et tredjeparts script eller det er arvkode, som du kun forsøger at genopkanne. Så hvordan kan vi rette dette?

Møde Display: Indhold . Denne lille en-liner gør i det væsentlige et element opfører sig som om det ikke er der. Du ser stadig efterkommerne af elementet, men elementet selv påvirker ikke layoutet.

Fordi vi foregiver, kan vi ikke ændre markeringen (bare for dette trin) kan vi være lidt smarte om dette og gøre .kort Elementer Flex-elementerne og næsten udelukkende ignorerer listemarken.

Først fjern den eksisterende .feed li. klasse og derefter bruge Display: Indhold for begge & lt; ul & gt; og & lt; li & gt; Elementer:

 .feed ul,
.feed li {
Display: Indhold;
} 

Nu skal du se kortene, der flyder i rækkefølge, men vi har mistet størrelsen. Fix det ved at tilføje Flex-ejendommen til .kort i stedet:

 .Card {
Flex: 1 0 40%;
} 

TA-DA! Vores kort bruger nu flexbox vidundere, som om deres strukturelle uordnede liste markering ikke eksisterer.

Som en side note kan du undre sig over, hvorfor flex-basis. Værdien er indstillet til 40%. Dette skyldes, at .kort Klassen har en margen, som ikke er inkluderet i breddeberegningen, som du ville forvente, når du bruger Boksestørrelse: Border-boks . For at arbejde omkring dette skal vi bare sætte flex-basis. Højt nok til at udløse indpakningen på det nødvendige punkt, og Flexbox vil automatisk udfylde det resterende rum.

04. Udforsk funktion forespørgsler

Selvom Display: Indhold Gør det præcis det, vi har brug for, stadig kun på arbejdsopkastningsstatus med W3C. Og i Chrome Support ankom kun i version 65 udgivet i marts 2018. Utroligt Firefox har haft støtte siden april 2015!

Hvis du deaktiverer stilen i Devtools, vil du se, at vores ændringer har lavet lidt rod med layoutet, når Display: Indhold anvendes ikke. Så hvad kan vi gøre ved dette? Tid til vores næste nye funktion - Feature Queries.

Disse arbejder ligesom medieforespørgsler, men de giver dig mulighed for at spørge browseren - ved hjælp af CSS alene - hvis en ejendom og værdiskuesudtryk understøttes. Hvis de er, vil stilene indeholdt i forespørgslen blive anvendt. Lad os nu flytte vores Display: Indhold stilarter i en funktion forespørgsel.

 @Supports (Display: Indhold) {
.feed ul,
.feed li {
  Display: Indhold;
}
.kort {
  Flex: 1 0 40%;
}
} 

05. Brug 'ikke' for et rengøringsresultat

Normalt i denne form for progressiv forbedringsscenarie ville vi bruge forespørgslen til at tilføje de nye stilarter, men det skal også deaktivere nogle af de originale stilarter, der er nødvendige for tilbageslagslayoutet.

Men du kan beslutte, at fordi støtte til funktionsforespørgsler er ret god (hvis du ignorerer IE), vil du faktisk bruge funktionen forespørgsel ikke operatør. Det virker ligesom du ville forvente, så vi kan genbruge vores originale Flex. Ejendom til listen-elementer, når Display: Indhold understøttes ikke:

 @Supports ikke (Display: Indhold) {
.feed li {
  Flex: 1 0 50%;
}
} 

Inde i ikke forespørgsel vi kan tilføje nogle stilarter, så .Næstet Varer svarer i grunden, hvad der blev arvet ved at bruge Display: Indhold .

 Feed Li.Nested {
Flex-basis: 100%;
}
.feed li.nested ul {
 Display: Flex;
 Flex-wrap: Wrap;
} 

06. At tage det et skridt videre

Du kan allerede se potentialet i funktionsspørgsmål, men det rigtige cool ting er, at du kan kombinere udtryk ved hjælp af de tre tilgængelige operatører: og Vi eller og ikke . Måske kunne vi også tjekke for Display: Flex. Support og tilføj derefter en flydebaseret tilbagesendelse.

Vi kommer ikke til at gøre det her, men hvis vi var, ville vi først ændre de to funktionsspørgler som sådan:

 @Supports (Display: Flex) og (Display: Indhold) {
...
}
@Supports (display: flex) og (ikke (display: indhold)) {
...
} 

Som en bonus kan du også teste for brugerdefinerede egenskaber Support som denne:

 @Supports (--foo: grøn) {
...
} 

07. Tilføj en chat boks

Nu har vi en smuk nyhedsfeed på plads, lad os tilføje en lille chatboks, der er fastgjort til nederst til højre på skærmen. Vi har brug for en liste over meddelelser og et tekstfelt, som brugeren skal indtaste deres besked. Tilføj denne blok lige efter åbningen & lt; body & gt; Tag:

 & div class = "chat" & gt;
 & lt; div class = "beskeder" & gt;
 & lt; ul & gt;
& lt; li & gt; & lt; div class = "besked" & gt; besked 1 & lt; / div & gt; / li & gt;
& lt; div class = "besked" & gt; besked 2 & lt; / div & g; / li & gt;
& lt; li & gt; & lt; div class = "besked" & gt; besked 3 & lt; / div & g; / li & gt;
& lt; div class = "besked" & gt; besked 4 & lt; / div & gt; / li & gt;
& lt; div class = "besked" & gt; besked 5 & lt; / div & gt; / li & gt;
& lt; li & gt; lt; div class = "besked" & gt; besked 6 & lt; / div & gt; / li & gt;
& lt; div class = "besked" & gt; besked 7 & lt; / div & gt; / li & gt;
& lt; div class = "besked" & gt; besked 8 & lt; / div & gt; / li & gt;
& lt; div class = "besked" & gt; besked 9 & lt; / div & gt; / li & gt;
& lt; li & gt; & lt; div class = "besked" & gt; besked 10 & lt; / div & gt; / li & gt;
 & lt; / ul & gt;
 & lt; / div & gt;
 & lt; input type = "tekst" klasse = "input" & gt;
& lt; / div & gt; 

08. Style chatkassen

Tid til hurtigt at tilføje nogle styling, så det ser halvt anstændigt ud.

 .Chat {
 Baggrund: #fff;
 Border: 10px fast # 000;
 Bund: 0;
 Font-størrelse: 10px;
 Position: Fast;
 Højre: 0;
 Bredde: 300px;
 Z-indeks: 10;
}
.Beskeder {
 Border-Bottom: 5px fast # 000;
 Overflow: Auto;
 Padding: 10px;
 Max-højde: 300px;
}
.message {
 Baggrund: # 000;
 Border-radius: 5px;
 Farve: #fff;
 Margin: 0 20% 10px 0;
 Padding: 10px;
}
.messages li: sidste barn .message {
 Margin-bottom: 0;
}
.input {
 Border: Ingen;
 Display: Blok;
 Padding: 10px;
 Bredde: 100%;
} 

09. Scroll Chaining.

Forhåbentlig nu har du en lille chatboks med en rullebart liste over meddelelser, der sidder oven på din nyhedsfeed. Store. Men har du bemærket, hvad der sker, når du ruller ind i et indlejret område, og du når slutningen af ​​dets rullebart område? Prøv det. Rul hele vejen til slutningen af ​​meddelelserne, og du vil se selve siden begynder at rulle i stedet. Dette kaldes Scroll Chaining.

Det er ikke en big deal i vores eksempel, men i nogle tilfælde kan det være. Vi har været nødt til at arbejde omkring denne funktion før, når vi opretter rulleområder inden for modeller eller kontekstmenuer.

Den beskidte fix er at indstille & lt; body & gt; til Overflow: Hidden. , men der er en dejlig, skinnende ny CSS-ejendom, der løser alt dette, og det er en simpel one-liner. Sig hej til overscroll-adfærd . Der er tre mulige værdier:

• Auto. - Standard, som tillader scrollkædning
• indeholde - Deaktiverer Scrollkædning
• ingen - Deaktiverer rulningskæde og andre overskridelser (f.eks. Gummibånd)

Vi kan bruge shorthand overscroll-adfærd eller vi kan målrette en bestemt retning med overscroll-adfærd-x (eller -y. ). Lad os tilføje det til vores .Beskeder klasse:

 .messages {
...
Overscroll-adfærd-Y: Indeholde;
...} 

Prøv nu at rulle igen, og du vil se, at den ikke længere påvirker sidens rulle, når du når slutningen af ​​indholdet.

Denne ejendom er også ret praktisk, hvis du ønskede at implementere en pull-to-refresh-funktion i din PWA, siger at opdatere nyhedsfeed. Nogle browsere, som f.eks. Chrome til Android, tilføjer automatisk deres egen, og indtil nu har der ikke været nogen nem måde at deaktivere det uden at bruge JS til at annullere begivenheder ved hjælp af præstationsspændende ikke-passive håndtere.

Nu skal du bare tilføje Overscroll-adfærd: Indeholde til det visningsmiddelholdige element, sandsynligvis & lt; body & gt; eller & lt; html & gt; .

Det er værd at bemærke, at denne ejendom ikke er en W3C-standard, snarere et forslag fra Web Incubator Community Group (WICG). Populære, stabile og modne WICG-forslag overvejes for migration til en W3C-arbejdsgruppe på et senere tidspunkt.

10. Skjul chatboksen, når den ikke er i brug

I øjeblikket tager chatboksen ganske lidt plads, hvilket medmindre vi interagerer med det, er lidt distraherende. Heldigvis kan vi gøre noget ved dette med en lille CSS magi.

Men først og fremmest skal vi ændre vores eksisterende stilarter lidt. Som standard ønsker vi, at chatkassen bliver kollapset, så vi skal reducere max-højde værdi i .Beskeder klasse. Mens vi er der, kan vi også tilføje en overgang til max-højde ejendom:

 .messages {
 ...
 Max-højde: 25px;
Overgang: Max-højde 500ms; } 

Næste side: Fortsæt med at udforske nye CSS-funktioner i trin 11-20

• 1
• 2.

Nuværende side: Udforsk 5 nye CSS-funktioner: trin 01-10