5 caracteristici noi CSS și cum să le folosească

În acest articol vom explora cinci proprietăți noi venind la CSS, aruncați o privire la ceea ce fac și cum să le puneți la utilizarea practică în proiectele dvs. Vom crea un a Layout-ul site-ului Pentru o pagină care include o notă de știri și o cutie de chat în colț. Pentru mai multe trucuri CSS, aruncați o privire la articolul nostru explorând diferit Exemple de animație CSS. . Dacă creați un site complet nou, încercați a Builder de site-uri web și asigurați-vă că vă răsfoiți web hosting Opțiuni aici.

Pentru acest tutorial veți avea nevoie de Chrome 65+ sau Firefox 59+. Aruncați o privire la care însoțește Github Repo. pentru codul pas cu pas. Vom proiecta următoarele caracteristici pentru a crea o experiență mai bună și pentru a lucra în jurul unor probleme. Și dacă proiectați alături de o echipă, utilizați cele mai bune Stocare in cloud pentru a păstra lucrurile coezive.

Modul de afișare CSS (nivelul 3)

• Afișaj: Conținut;
• W3C Status. - Proiect de lucru
• Suport pentru browser.

CSS Reguli condiționate Modul (nivelul 3)

• @a sustine(...) {...}
• W3C Status. - Recomandarea candidatului
• Citirea suplimentară: MDN Web Docs

CSS Modul de comportament de supradimensionare (nivelul 1)

• Suprasolicitarea comportamentului: conține;
• W3C Status. - neoficial
• Suport pentru browser.
• Citirea ulterioară: Preluați controlul de pe parcursul dvs.

Modulul selectors CSS (nivelul 4)

• : Focus-în interiorul
• W3C Status. - Proiect de lucru
• Suport pentru browser.
• Citire suplimentară: MDN Web Docs : Focus-în interiorul , : Plasat-prezentat

Modulul de reținere CSS (nivelul 1)

• Conține: vopsea;
• W3C Status. - Recomandarea candidatului
• Suport pentru browser.
• Citirea suplimentară: CSS de izolare în Chrome 52

01. Configurați HTML pentru newsfeed

Mai întâi trebuie să înființăm un marcaj super simplu și repetat pentru newsfeedul nostru. Să creăm a .container. Div cu o listă neordonată din interior. Da. & lt; ul & gt; Clasa lui .a hrani , apoi creați 10 elemente de listă fiecare care conține un div cu .card clasa și cartea de text 1, cardul 2 etc.

În cele din urmă creați altul Listă-item între 5 și 6 cu o clasă de .cuibărit - acest lucru va fi util mai târziu - și adăugați a & lt; ul & gt; În interior cu trei elemente de listă utilizând cardul de text a, cardul B etc.

 & Lt; corp & gt;
 & lt; div clasa = "container" & gt;
 & lt; ul clasa = "feed" & gt;
 "Card" Lt, Li & Gt; Div; Cardul 1 și Lt; / Li & Gt;
 "Card" Card "Lt; Div; Cardul 2 & Lt; / Li & Gt;
 & Lt; Div; Div CLASS = "CARD" CARD "/ LT; ​​/ DIV & GT; / LI & GT;
 "Cardul" Cardul 4 și Lt; Div; / Lt; / Li & gt;
 "Cardul" Cardul 5 și Lt; Div; / Lt; / Li & gt;
    & lt; li clasa = "imbricat" & gt;
 & lt; ul & gt;
 "Card" Lt; Div; Cardul A & Lt; / Div & gt; / Li & gt;
 "Card" Lt, Li & Gt; Cardul B & Lt; / Li & gt;
 "Card" Li & Gt; Cardul C & GT; Cardul C & LT; / LI & GT;
 & lt; / ul & gt;
 & lt; / li & gt;
 "Card" Li & Gt; Cardul 6 și Lt; / Div & gt; / Li & gt;
 "Card" și Lt; Div; / Lt; / Li & gt;
 "CARD" LT; LIT; CARD "CARD" CARD "/ LT; ​​/ DIV & GT; / LI & GT;
 & Li & gt; și gt; Cardul 9 și Lt; / Li & gt;
 "Card" Lit, Li & Gt; Cardul 10 & Lt; / Li & gt;
 & lt; / ul & gt;
& lt; / div & gt;
& lt; / corp & gt; 

02. Stilul newsfeed

Acum trebuie să adăugăm niște stiluri rapide, astfel încât acest lucru să înceapă să arate mai mult ca un newsfeed. Mai întâi putem da & lt; corp & gt; o culoare subtilă de fundal gri. Apoi dați-o .container. o lățime maximă de 800px și utilizare Marja: 0 Auto; la centru aliniați-l.

Să dăm, de asemenea .card un fundal alb, 10px de padding și margine și în cele din urmă a min-înălțime de 300px - acest lucru ar trebui să ne ofere suficient pentru a face pagina scrollabilă. În cele din urmă vom presăra niște magie cu FlexBox pe .a hrani Pentru a face ca elementele să curgă frumos, cu două cărți pe rând.

Afișaj: Flex;
Flex-Wrap: Înfășurați;
}
.feed Li {
Flex: 1 0 50%;
} 

03. Fixați problemele de aspect

Dacă derulați în jos lista, veți observa că cărțile noastre din lista imbricată, cardul A - C, cauzează unele probleme de aspect. În mod ideal, ne-ar plăcea să curgă cu restul cărților, dar toate sunt blocate împreună într-un singur bloc. Motivul pentru aceasta este că un recipient flexibil - care este creat folosind Afișaj: Flex. - face doar copiii săi imediați (adică elementele de listă) în elemente flexibile.

Acum, în mod normal, singura modalitate de fixare a acestora este de a schimba marcajul, dar să ne prefacem că nu aveți acel lux. Poate că marcajul newsfeed este generat de un scenariu al unei terțe părți sau de codul vechi pe care încercați doar să îl revin. Deci, cum putem rezolva asta?

Întâlni Afișaj: Conținut . Această mică căptușeală face ca un element să se comporte ca și cum nu este acolo. Încă mai vedeți descendenții elementului, dar elementul în sine nu afectează aspectul.

Pentru că ne prefacem că nu putem schimba marcajul (doar pentru acest pas) putem fi un pic cam inteligent în legătură cu acest lucru și facem .card Elementează elementele flexibile și ignorați aproape în întregime marcajul listei.

Înainte de a elimina mai întâi .feed Li. clasa și apoi utilizați Afișaj: Conținut pentru amandoi & lt; ul & gt; și & Li & gt; Elemente:

 .feed ul,
.feed Li {
Afișaj: Conținut;
} 

Acum ar trebui să vedeți cărțile care curg în ordine, dar am pierdut dimensionarea. Fixați asta prin adăugarea proprietății Flex la .card in schimb:

 .Card {
Flex: 1 0 40%;
} 

Ta-da! Cartile noastre folosesc acum minunile de Flexbox ca si cum marcajul lor structural neordonat nu exista.

Ca o notă laterală, s-ar putea să vă întrebați de ce Flex-bază Valoarea este setată la 40%. Acest lucru se datorează faptului că .card clasa are o marjă, care nu este inclusă în calculul lățimii, după cum vă așteptați atunci când utilizați Dimensionarea casetei: Border-cutie . Pentru a lucra în jurul acestui lucru, trebuie doar să stabilim Flex-bază suficient de mare pentru a declanșa ambalajul la punctul necesar, iar Flexbox va umple automat spațiul rămas.

04. Explorați interogări cu caracteristici

Cu toate că Afișaj: Conținut Are exact ceea ce avem nevoie, este încă doar la starea de lucru cu W3C. Și în sprijinul Chrome a sosit numai în versiunea 65 lansată în martie 2018. Incredibil Firefox a avut sprijin din aprilie 2015!

Dacă dezactivați stilul din DevTools veți vedea că schimbările noastre au făcut un pic de mizerie cu aspectul când Afișaj: Conținut nu se aplică. Deci, ce putem face despre asta? Timpul pentru următoarea nouă caracteristică - interogări ale caracteristicilor.

Acestea funcționează la fel ca interogările media, dar vă permit să întrebați browserul - folosind numai CSS - dacă este acceptată o expresie de proprietate și valoare. Dacă sunt, vor fi aplicate stilurile conținute în interiorul interogării. Acum, hai să ne mișcăm Afișaj: Conținut stiluri într-o interogare de caracteristici.

 @supports (Afișaj: Cuprins) {
.feed ul,
.feed Li {
  Afișaj: Conținut;
}
.Card {
  Flex: 1 0 40%;
}
} 

05. Utilizați "nu" pentru un rezultat mai curat

În mod normal, în acest tip de scenariu de îmbunătățire progresivă, am folosi interogarea pentru a adăuga noile stiluri, dar ar trebui, de asemenea, să dezactiveze unele dintre stilurile originale necesare pentru aspectul căderelor.

Cu toate acestea, ați putea decide că, deoarece suportul pentru interogările caracteristicilor este destul de bun (dacă ignorați IE), doriți să utilizați interogarea caracteristică nu operator. Funcționează exact așa cum ați aștepta, astfel încât să putem re-aplica originalul nostru contracta proprietate la lista-articole când Afișaj: Conținut nu e suportat:

 @supports nu (afișaj: conținut) {
.feed Li {
  Flex: 1 0 50%;
}
} 

În interiorul nu interogare putem adăuga niște stiluri, astfel încât .cuibărit Elementele re-aplicați în principal ceea ce era moștenit prin utilizarea Afișaj: Conținut .

 Hrăniți Li.nested {
Flex-bază: 100%;
}
.feed li.ned {
 Afișaj: Flex;
 Flex-Wrap: Înfășurați;
} 

06. Luând-o cu un pas mai departe

Puteți vedea deja potențialul interogărilor de caracteristici, dar lucrul cu adevărat rece este că puteți combina expresii utilizând cei trei operatori disponibili: și , sau și nu . Poate că am putea verifica și pentru Afișaj: Flex. Suport și apoi adăugați o cădere bazată pe float.

Nu vom face asta aici, dar dacă am fi mai întâi să modificăm cele două interogări ale caracteristicilor așa:

 @supports (Afișaj: Flex) și (afișaj: Cuprins) {
...
}
@supports (Afișaj: Flex) și (nu (afișaj: Cuprins)) {
...
} 

Ca bonus puteți testa și pentru proprietăți personalizate, astfel:

 @supports (--Foo: verde) {
...
} 

07. Adăugați o cutie de chat

Acum avem un frumosfeed frumos în loc, să adăugăm o cutie de chat care este fixată în partea dreaptă jos a ecranului. Vom avea nevoie de o listă de mesaje și un câmp de text pentru ca utilizatorul să introducă mesajul lor. Adăugați acest bloc imediat după deschidere & lt; corp & gt; etichetă:

 & Lt; Div clasa = "chat" & gt;
 & lt; div clasa = "mesaje" & gt;
 & lt; ul & gt;
& Li & gt; Div; Div; mesajul 1 

08. Stilul casetei de chat

Timpul pentru a adăuga rapid niște stiluri, așa că arată pe jumătate decent.

 .chat {
 fundal: #fff;
 Frontieră: 10px solid # 000;
 Partea de jos: 0;
 Font-dimensiune: 10px;
 Poziție: fixă;
 dreapta: 0;
 Lățime: 300px;
 Z-Index: 10;
}
.Sassages {
 Border-Bottom: 5px solid # 000;
 Overflow: Auto;
 Padding: 10px;
 Max-înălțime: 300px;
}
.Sessage {
 Context: # 000;
 Raza de frontieră: 5px;
 Culoare: #ffff;
 Marja: 0 20% 10px 0;
 Padding: 10px;
}
.Sassages Li: Ultimul copil .Message {
 Margin-fund: 0;
}
.intrare {
 frontieră: nici unul;
 Afișaj: bloc;
 Padding: 10px;
 Lățime: 100%;
} 

09. Scroll Chelaring.

Sperăm că acum veți avea o cutie de chat cu o listă de mesaje scrollabile care stau pe partea de sus a știrilor dvs. Grozav. Dar ați observat ce se întâmplă atunci când parcurgeți în interiorul unei zone imbricate și ajungeți la sfârșitul intervalului său scrollabil? Incearca-l. Derulați tot drumul până la sfârșitul mesajelor și veți vedea că pagina însăși va începe derularea în schimb. Aceasta se numește lanț de derulare.

Nu este o afacere mare în exemplul nostru, dar în unele cazuri ar putea fi. Am trebuit să lucrăm în jurul acestei caracteristici înainte de a crea domenii scrollebile în interiorul modurilor sau meniurilor context.

Fixarea murdară este de a seta & lt; corp & gt; la Depășirea: ascunsă , dar există o nouă proprietate CSS, strălucitoare, care stabilește toate acestea și este o simplă linie. Salută-l pe Supraveghere-comportament . Există trei valori posibile:

• auto - Implicit, care permite lanțului derulant
• conține - Dezactivează înlănțuirea derulării
• nici unul - Dezactivează lanțarea de defilare și alte efecte de suprasolicitare (de exemplu, cauciuc)

Putem folosi stenograma Supraveghere-comportament sau putem viza o direcție specifică cu Supraveghere-comportament-x (sau -Da ). Să o adăugăm la noi .Sessages clasă:

 .Sessages {
...
Supravegherea-comportament-Y: conține;
...} 

Acum încercați din nou defilarea și veți vedea că nu mai afectează defilarea paginii când ajungeți la sfârșitul conținutului.

Această proprietate este, de asemenea, destul de utilă dacă ați vrut să implementați o caracteristică de tracțiune în PWA, să spuneți reîmprospătarea newsfeed-ului. Unele browsere, cum ar fi Chrome pentru Android, adaugă automat propriile lor și până acum nu a existat nici o modalitate ușoară de ao dezactiva fără a utiliza JS să anuleze evenimentele care utilizează manipulatori non-pasivi de performanță.

Acum trebuie doar să adăugați Supravegherea de comportament: conține la elementul care conține vizualizarea, probabil & lt; corp & gt; sau & lt; html & gt; .

Este demn de remarcat faptul că această proprietate nu este un standard W3C, mai degrabă o propunere a grupului comunitar de incubator Web (WICG). Propunerile populare, stabile și mature WICG sunt luate în considerare pentru migrație către un grup de lucru W3C într-o etapă ulterioară.

10. Reduceți caseta de chat atunci când nu utilizați

În momentul de față, caseta de chat ocupă un spațiu destul de mult, dacă dacă nu interacționăm cu ea este un pic distragătoare. Din fericire, putem face ceva despre asta cu un mic magie CSS.

Dar, în primul rând, trebuie să ne modificăm ușor stilurile existente. În mod prestabilit, dorim ca caseta de chat să fie prăbușită, așa că trebuie să reducem Max-înălțime valoare în .Sessages clasă. În timp ce suntem acolo, putem adăuga și o tranziție la Max-înălțime proprietate:

 .Sessages {
 ...
 Max-înălțime: 25px;
Tranziție: Max-înălțime 500ms; } 

Pagina următoare: Continuați să explorați noi caracteristici CSS în pașii 11-20

• 1.
• 2.

Pagina curenta: Explorați 5 caracteristici noi CSS: Pași 01-10