5 Hot New CSS-functies en hoe ze ze gebruiken

In dit artikel verkennen we vijf nieuwe eigenschappen die naar CSS komen, kijk eens naar wat ze doen en hoe ze ze in uw projecten in praktisch gebruiken. We gaan een maken Website-indeling Voor een pagina met een newsfeed en een klein chatbox in de hoek. Neem voor meer CSS-trucs een kijkje in ons artikel verkennen CSS-animatievoorbeelden ​Als je een hele nieuwe site maakt, probeer dan een website bouwer en zorg ervoor dat u doorbladert web hosting Opties hier.

Voor deze tutorial heb je chroom 65+ of Firefox 59+ nodig. Kijk eens naar de Begeleidende Github Repo voor de stapsgewijze code. We zullen de volgende functies gebruiken om een ​​betere ervaring te creëren en een aantal problemen te vinden. En als u naast een team ontstaat, gebruik dan het beste cloud opslag om dingen samenhangend te houden.

CSS-displaymodule (niveau 3)

• Display: Inhoud;
• W3C-status - Werkversie
• Browser-ondersteuning

CSS Conditional Rules-module (niveau 3)

• @support (...) {...}
• W3C-status - Kandidaat-aanbeveling
• Verder lezen: MDN Web Docs

CSS overcroll-gedragsmodule (niveau 1)

• overcroll-gedrag: bevatten;
• W3C-status - Niet-officieel
• Browser-ondersteuning
• Verder lezen: Neem de controle over uw scroll

CSS Selectors Module (niveau 4)

• : Focus-Binnen
• W3C-status - Werkversie
• Browser-ondersteuning
• Verder lezen: MDN Web Docs : Focus-Binnen ​ : Placeholder-getoond

De CSS-containmentmodule (niveau 1)

• bevatten: verf;
• W3C-status - Kandidaat-aanbeveling
• Browser-ondersteuning
• Verder lezen: CSS-containment in Chrome 52

01. Stel de HTML in voor de newsfeed

Eerst moeten we wat super eenvoudige, herhalende markup opzetten voor onze newsfeed. Laten we een .container div met een ongeordende lijst binnen. Geef de & LT; UL & GT; de klasse van .voeden , maak vervolgens 10 lijst-items die elk een div met de .kaart Klasse en de tekstkaart 1, kaart 2 etc.

Maak eindelijk een ander lijst tussen 5 en 6 met een klasse van .nested - Dit zal later nuttig zijn - en voeg een toe & LT; UL & GT; binnen met drie lijstitems met behulp van de tekstkaart A, kaart B etc.

 & LT; BODY & GT;
 & lt; div class = "container" & GT;
 & LT; UL-klasse = "Feed" & GT;
 & LT; LI & GT; & LT; DIV-klasse = "Kaart" & GT; Kaart 1 & LT; / DIV & GT; & LT; / LI & GT;
 & LT; LI & GT; & LT; DIV-klasse = "Kaart" & GT; Kaart 2 & LT; / DIV & GT; & LT; / LI & GT;
 & lt; li & gt; & lt; div class = "kaart" & GT; kaart 3 & lt; / div & gt; & lt; / li & gt;
 & lt; li & gt; & lt; div class = "kaart" & gt; kaart 4 & lt; / div & gt; & lt; / li & gt;
 & lt; li & gt; & lt; div class = "kaart" & gt; kaart 5 & lt; / div & gt; & lt; / li & gt;
    & LT; LI-klasse = "genest" & GT;
 & LT; UL & GT;
 & LT; LI & GT; & LT; DIV-klasse = "Card" & GT; Kaart A & LT; / DIV & GT; & LT; / LI & GT;
 & LT; LI & GT; & LT; DIV-klasse = "Kaart" & GT; Kaart B & LT; / DIV & GT; & LT; / LI & GT;
 & LT; LI & GT; & LT; DIV-klasse = "Kaart" & GT; Kaart C & LT; / DIV & GT; & LT; / LI & GT;
 & LT; / UL & GT;
 & LT; / LI & GT;
 & LT; LI & GT; & LT; DIV-klasse = "Kaart" & GT; Kaart 6 & LT; / DIV & GT; & LT; / LI & GT;
 & LT; LI & GT; & LT; DIV-klasse = "Kaart" & GT; Kaart 7 & LT; / DIV & GT; & LT; / LI & GT;
 & LT; LI & GT; & LT; DIV-klasse = "Kaart" & GT; Kaart 8 & LT; / DIV & GT; & LT; / LI & GT;
 & LT; LI & GT; & LT; DIV-klasse = "Kaart" & GT; Kaart 9 & LT; / DIV & GT; & LT; / LI & GT;
 & LT; LI & GT; & LT; DIV-klasse = "Kaart" & GT; Kaart 10 & LT; / DIV & GT; & LT; / LI & GT;
 & LT; / UL & GT;
& LT; / DIV & GT;
& LT; / BODY & GT; 

02. Stijl de newsfeed

Nu moeten we enkele snelle stijlen toevoegen, zodat dit lijkt op een nieuwsfeed. Eerst kunnen we geven & LT; BODY & GT; Een subtiele grijze achtergrondkleur. Geef dan .container een maximale breedte van 800px en gebruik Marge: 0 Auto; om het te centreren.

Laten we ook geven .kaart een witte achtergrond, 10px van opvulling en marge en eindelijk een min-hoogte van 300px - dit zou ons genoeg moeten geven om de pagina te laten schuiven. Ten slotte zullen we wat flexbox-magie strooien op de .voeden Om de items mooi te maken, met twee kaarten per rij.

. Feed {
Display: Flex;
Flex-wrap: wrap;
​
. Feed li {
Flex: 1 0 50%;
} 

03. Fix Layout-problemen

Als u door de lijst scrolt, merkt u dat onze kaarten in de genestelijst, kaart A - C, sommige lay-outproblemen veroorzaken. Idealiter zouden we graag willen stromen met de rest van de kaarten, maar ze zitten allemaal in één blok samen. De reden hiervoor is dat een flexcontainer - die is gemaakt met Display: Flex - maakt alleen zijn directe kinderen (d.w.z. de lijstitems) in flexitems.

Nu, normaal gesproken is de enige manier om dit te bevestigen om de markup te veranderen, maar laten we doen alsof je die luxe niet hebt. Misschien wordt het nieuwsfeed-markup gegenereerd door een script van derden of zijn erfeniscode die u alleen maar probeert te resineren. Dus hoe kunnen we dit oplossen?

Ontmoeten Display: Inhoud ​Deze kleine een-voering laat in wezen een element gedragen alsof het er niet is. Je ziet nog steeds de afstammelingen van het element, maar het element zelf heeft geen invloed op de lay-out.

Omdat we doen alsof we de markup (alleen voor deze stap) niet kunnen veranderen, kunnen we hier een beetje slim zijn en de .kaart elementen de flex-items en negeren bijna volledig de lijstmarkering.

Verwijder eerst het bestaande .feed li klas en dan gebruiken Display: Inhoud voor beide & LT; UL & GT; en & LT; LI & GT; Elementen:

. Feed ul,
. Feed li {
Display: Inhoud;
} 

Nu moet je de kaarten in volgorde zien stromen, maar we hebben de maatregel verloren. Bevestig dat door het toevoegen van de flex-eigenschap aan de .kaart in plaats daarvan:

 .card {
Flex: 1 0 40%;
} 

TA-DA! Onze kaarten gebruiken nu de wonderen van Flexbox alsof hun structurele ongeordende lijstmarkering niet bestaat.

Als een kant opmerkt, vraagt ​​u zich misschien af ​​waarom de flex-basis waarde is ingesteld op 40%. Dit komt omdat de .kaart Klasse heeft een marge, die niet is opgenomen in de breedteberekening zoals u zou verwachten bij gebruik Box-sizing: rand-box ​Om dit te werken, moeten we alleen de flex-basis Hoog genoeg om de verpakking op het benodigde punt te activeren en flexbox zal de resterende ruimte automatisch vullen.

04. Explore-functiequery's

Hoewel Display: Inhoud Is precies wat we nodig hebben, het is nog steeds alleen op de werkstatus met W3C. En in Chrome-ondersteuning alleen aangekomen in versie 65 uitgebracht in maart 2018. Ongelooflijk Firefox heeft sinds april 2015 ondersteuning gehad!

Als je de stijl in Devtools uitschakelt, zie je dat onze veranderingen een beetje een puinhoop hebben gemaakt met de lay-out wanneer Display: Inhoud wordt niet toegepast. Dus wat kunnen we hieraan doen? Tijd voor onze volgende nieuwe functie - functiequery's.

Deze werken net als media-query's, maar ze stellen u toe om de browser te vragen - alleen CSS gebruiken - als een eigendom en waardexpressie wordt ondersteund. Als ze zijn, worden de stijlen in de vraag toegepast. Laten we ons nu verplaatsen Display: Inhoud stijlen in een functiequery.

 @Supports (display: Inhoud) {
.feed ul,
. Feed li {
  Display: Inhoud;
​
.card {
  Flex: 1 0 40%;
​
} 

05. Gebruik 'niet' voor een schonere uitkomst

Normaal gesproken gebruiken we in dit soort progressieve verbeteringsscenario de query om de nieuwe stijlen toe te voegen, maar het zou ook een deel van de originele stijlen moeten uitschakelen die nodig zijn voor de terugvallay-out.

U kunt echter besluiten dat ondersteuning voor functiequery's redelijk goed is (als u IE negeert) U wilt eigenlijk de functiequery gebruiken niet operator. Het werkt net zoals je zou verwachten, dus we kunnen ons origineel opnieuw toepassen buigen onroerend goed aan de lijst-items wanneer Display: Inhoud wordt niet ondersteund:

 @Supports niet (display: inhoud) {
. Feed li {
  Flex: 1 0 50%;
​
} 

Binnen in de niet Query kunnen we wat stijlen toevoegen, zodat de .nested items zijn in feite opnieuw aan wat er werd geërfd door te gebruiken Display: Inhoud ​

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

06. Een stap verder brengen

U kunt het potentieel van functiequery's al zien, maar het echt coole ding is dat u uitdrukkingen kunt combineren met behulp van de drie beschikbare operators: en ​ of en niet ​Misschien kunnen we ook controleren Display: Flex Ondersteuning en voeg vervolgens een op float gebaseerde fallback toe.

We gaan dat niet hier, maar als we er waren, zouden we eerst de twee functiequery's als het volgende wijzigen:

 @Supports (display: flex) en (display: inhoud) {
​
​
@Supports (display: flex) en (niet (weergave: inhoud)) {
​
} 

Als een bonus kunt u ook testen voor ondersteuning voor aangepaste eigenschappen als deze:

 @Supports (- foo: groen) {
​
} 

07. Voeg een chatbox toe

Nu hebben we een mooie newsfeed op zijn plaats, laten we een kleine chatbox toevoegen die aan de onderkant van het scherm is bevestigd. We hebben een lijst met berichten en een tekstveld nodig voor de gebruiker om hun bericht in te voeren. Voeg dit blok toe net na de opening & LT; BODY & GT; label:

 & lt; div class = "chat" & GT;
 & lt; div class = "berichten" & GT;
 & LT; UL & GT;
& lt; li & gt; & lt; div class = "bericht" & gt; bericht 1 & lt; / div & gt; & lt; / li & gt;
& lt; li & gt; & lt; div class = "bericht" & gt; bericht 2 & lt; / div & gt; & lt; / li & gt;
& lt; li & gt; & lt; div class = "bericht" & gt; bericht 3 & lt; / div & gt; & lt; / li & gt;
& lt; li & gt; & lt; div class = "bericht" & gt; bericht 4 & lt; / div & gt; & lt; / li & gt;
& lt; li & gt; & lt; div class = "bericht" & gt; bericht 5 & lt; / div & gt; & lt; / li & gt;
& lt; li & gt; & lt; div class = "bericht" & gt; bericht 6 & lt; / div & gt; & lt; / li & gt;
& lt; li & gt; & lt; div class = "bericht" & gt; bericht 7 & lt; / div & gt; & lt; / li & gt;
& lt; li & gt; & lt; div class = "bericht" & gt; bericht 8 & lt; / div & gt; & lt; / li & gt;
& lt; li & gt; & lt; div class = "bericht" & gt; bericht 9 & lt; / div & gt; & lt; / li & gt;
& lt; li & gt; & lt; div class = "bericht" & gt; bericht 10 & lt; / div & gt; & lt; / li & gt;
 & LT; / UL & GT;
 & LT; / DIV & GT;
 & LT; INPUT TYPE = "Tekst" Klasse = "Input" & GT;
& LT; / DIV & GT; 

08. Stijl de chatbox

Tijd om snel wat styling toe te voegen, zodat het er half fatsoenlijk uitziet.

 .chat {
 Achtergrond: #fff;
 Grens: 10px Solid # 000;
 onderkant: 0;
 FONT-SIZE: 10PX;
 Positie: vastgesteld;
 RECHTS: 0;
 Breedte: 300px;
 Z-index: 10;
​
.Messages {
 Border-bodem: 5px solide # 000;
 Overloop: Auto;
 Vulling: 10px;
 Max-hoogte: 300px;
​
.message {
 Achtergrond: # 000;
 Border-Radius: 5px;
 Kleur: #fff;
 Marge: 0 20% 10px 0;
 Vulling: 10px;
​
.Messages Li: Last Child .message {
 margin-bodem: 0;
​
.invoer {
 Grens: Geen;
 Weergave: blok;
 Vulling: 10px;
 Breedte: 100%;
} 

09. Scroll Chaining

Hopelijk heb je nu een kleine chatbox met een scrollable lijst met berichten die bovenop je news-feed zitten. Super goed. Maar heb je gemerkt wat er gebeurt als je in een genesteld gebied scrolt en je het einde van het scrollable assortiment bereikt? Probeer het. Blader helemaal naar het einde van de berichten en je ziet dat de pagina zelf begint te scrollen. Dit wordt Scroll Chaining genoemd.

Het is geen grote deal in ons voorbeeld, maar in sommige gevallen zou het kunnen zijn. We hebben deze functie voor het maken van schuifbare gebieden binnen modals of contextmenu's.

De vuile oplossing is om de & LT; BODY & GT; naar overloop verborgen , maar er is een leuke, glanzende nieuwe CSS-eigenschappen die dit allemaal oplost en het is een eenvoudige one-liner. Zeg hallo tegen overcroll-gedrag ​Er zijn drie mogelijke waarden:

• auto - de standaard, waarmee scroll-chainen mogelijk is
• bevatten - Schakelt Scroll Chainer uit
• geen - Schakelt Scroll Chaining en andere overcroll-effecten uit (b.v. RubberBanding)

We kunnen de steno gebruiken overcroll-gedrag of we kunnen een specifieke richting targeten met overcroll-gedrag-x (of -Y ​Laten we het toevoegen aan onze .messages klasse:

. Messages {
​
overcroll-gedrag-y: bevatten;
...} 

Probeer nu opnieuw het scrollen en je zult zien dat het niet langer de scroll van de pagina beïnvloedt wanneer je het einde van de inhoud bereikt.

Deze accommodatie is ook vrij handig als je een pull-to-vernieuwende functie in je PWA wilde implementeren, zeg om de newsfeed te vernieuwen. Sommige browsers, zoals Chrome voor Android, voegen automatisch hun eigen toe en tot nu toe is er geen eenvoudige manier geweest om het uit te schakelen zonder dat u JS gebruikt om gebeurtenissen te annuleren met behulp van niet-passieve handlers met prestaties.

Nu moet je gewoon toevoegen overcroll-gedrag: bevatten naar het viewport-bevattende element, waarschijnlijk & LT; BODY & GT; of & lt; html & gt; ​

Het is vermeldenswaard dat deze eigenschap geen W3C-standaard is, eerder een voorstel van de Web Incubator Community Group (WICG). Populaire, stabiele en volwassen WICG-voorstellen worden in een later stadium beschouwd voor migratie naar een W3C-werkgroep.

10. Collapse de chatbox wanneer u niet in gebruik bent

Op dit moment neemt de chatbox behoorlijk een beetje ruimte in, die tenzij we ermee interactie hebben een beetje afleidend is. Gelukkig kunnen we hier iets aan doen met een beetje CSS-magie.

Maar eerst moeten we onze bestaande stijlen iets wijzigen. Standaard willen we dat de chatbox wordt ingestort, dus we moeten de maximale hoogte waarde in de .messages klasse. Terwijl we daar zijn, kunnen we ook een overgang toevoegen aan de maximale hoogte eigendom:

. Messages {
 ​
 Max-hoogte: 25px;
Overgang: max-hoogte 500ms; } 

Volgende pagina: Ga door met het verkennen van nieuwe CSS-functies in stappen 11-20

• 1
• 2

Huidige pagina: Ontdek 5 nieuwe CSS-functies: Stappen 01-10