Noi funcții CSS de așteptat în 2022

Iată câteva actualizări Cascading Style Sheets pe care nu veți dori să le ratați, de la proprietăți puțin cunoscute de defilare până la palete de culori uimitoare.

CSS (Cascading Style Sheets) a debutat în 1996 și este încă o componentă importantă, în evoluție, a stivei de dezvoltare web. CSS, ca și alte limbi vii, adaugă mereu noi funcții ca răspuns la practicile din lumea reală. Datorită evoluției rapide, chiar și dezvoltatorii dedicați pot pierde funcții noi. Consultați unele dintre cele mai utile funcții care vor veni în CSS în viitorul apropiat.

Subgrid

CSS a fost criticat pentru o serie de defecte flagrante încă de la începuturile sale. Unele sarcini simple, cum ar fi centrarea ceva în CSS, necesită soluții de soluționare și rezolvare prea complexe.
O altă problemă semnificativă a fost realizarea unui aspect rezonabil al grilei, cel puțin până când modulul CSS Grid Layout a intervenit.

Un aspect al grilei este indicat de afișajul: declarație grilă și este similar cu Flexbox prin faptul că vă permite să definiți machete dreptunghiulare, controlând și grila în două dimensiuni.
Conform cercetărilor, majoritatea dezvoltatorilor CSS sunt conștienți de Grid Layout și mulți dintre noi îl folosim. (Nu uitați să îl încercați dacă nu ați făcut-o!)

Subgrid este o caracteristică nou-nouță și extrem de utilă pentru modulul Grid Layout. Caracteristica subgrilă vă permite să creați o grilă secundară care va moșteni aspectul grilei părinte.

Spre deosebire de imbricarea unui afișaj al grilei în altul, grila copil își definește propriile dimensiuni și goluri. Aspectul părintelui este aplicat subgrilei atunci când se utilizează subgrilă, dar subgrila poate încă suprascrie aspecte ale aspectului dacă este necesar.

Subgrid este în prezent disponibil numai în Firefox 71 și versiuni ulterioare, dar este planificat pentru Safari WebKit, Google Chrome și Microsoft Edge. O subgrilă va fi o caracteristică de aspect foarte utilă în viitor.

Culoare de accent

În ciuda popularității lor, unele elemente de afișare sunt notoriu dificil de stilat. Casetele de selectare și butoanele radio, de exemplu, sunt adesea înlocuite cu un widget personalizat care le imită comportamentul în timp ce ascunde implementarea browserului. Puteți viza aceste elemente cu noua opțiune CSS accent-color.

De exemplu, așa cum se arată în Lista 1, puteți aplica o culoare magenta la toate butoanele radio de pe pagina dvs. (consultați și acest exemplu live).

Lista 1: Controlul culorii CSS pentru butoanele radio

 <style> input[type="radio"] { accent-color: magenta; } </style> <form action="/foo.bar" > <p> Select your favorite outdoor adventure type </p> <input type="radio" name="type" value="mountain" > <label for="mountain" > Mountain </label><br> <input type="radio" name="type" value="ocean" > <label for="ocean" > Ocean </label><br> <input type="radio" name="type" value="desert" > <label for="desert" > Desert </label> </form>

Defilare rapidă

CSS oferă un set la îndemână de proprietăți pentru controlul acțiunii rapide de defilare într-un browser web. Multe dintre aceste funcții sunt deja disponibile în versiunile recente de browser, în timp ce altele sunt încă în curs de implementare.

Este demn de remarcat faptul că mai mult de o treime dintre utilizatorii CSS încă nu sunt conștienți de scroll snap.

Comanda proprietăți scroll-snap-* oferă mai multe opțiuni pentru reglarea fină a modului în care funcționează poziția de defilare pe un container. Dezvoltatorii beneficiază de o precizie sporită, în timp ce utilizatorii finali beneficiază de o experiență de utilizator mai fluidă și mai controlată.

Lista 2 arată un exemplu simplu de control al derulării pe un div (vezi și acest exemplu live).

Lista 2 este un exemplu de defilare simplă.

 <style> .scroll-container, .scroll-area { max-width: 850px; height: 300px; font-size: 60px; } .scroll-container { overflow: auto ; scroll-snap-type: y mandatory; height: 500px; } .scroll-area { scroll-snap-align: start; } .scroll-container, .scroll-area { margin: 0 auto ; } .scroll-area { display: flex; align-items: center; justify-content: center; color: white; } .scroll-area:nth-of-type(1) { background: IndianRed ; } .scroll-area:nth-of-type(2) { background: Moccasin ; } .scroll-area:nth-of-type(3) { background: thistle; } .scroll-area:nth-of-type(4) { background: seagreen; } </style> <div class="scroll-container" > <div class="scroll-area" > 1 </div> <div class="scroll-area" > 2 </div> <div class="scroll-area" > 3 </div> <div class="scroll-area" > 4 </div> </div>

Poziția de defilare y din Lista 3 se mută automat la elementul copil, indiferent de locul în care eliberați mișcarea de defilare. Acest lucru se datorează faptului că proprietatea scroll-snap-type a containerului de defilare este setată la y și elementele copil au declarația scroll-snap-align: start.

Acest comportament poate fi, de asemenea, schimbat. Puteți, de exemplu, să setați proprietatea scroll-snap-type la proximitatea y. Funcționează așa cum era de așteptat, făcându-se numai când scroll-ul este aproape de element.

În plus, proprietatea aferentă overscroll-behavior controlează modul în care se comportă containerele cu defilare imbricată.

Proprietăți logice CSS

Probabil că ați experimentat supărarea de a trebui să scrieți textul proprietățile de margine-stânga și chenar-dreapta sau chenar-sus, chenar-jos, dacă ați dorit vreodată să setați un chenar de container la stânga și la dreapta sau de jos și top. Problema este că nu există nicio modalitate de a folosi proprietatea comenzii rapide fără a afecta chenarele pe care nu doriți să le modificați. Acest lucru este valabil și pentru elemente precum umplutura și marginile.

Modulul CSS Logical Properties vă permite să vă referiți la lucruri într-un mod abstract, folosind cuvintele cheie inline și bloc. Când vă referiți la stânga și la dreapta, utilizați inline; când te referi la partea de sus și de jos, folosește bloc. De exemplu, pentru a adăuga un chenar în partea stângă și dreaptă a unui div, utilizați codul din Lista 3. (vezi și un exemplu live aici).

Lista 3: Umplutură la stânga și la dreapta cu logică în linie

 div { border- inline : 10px dashed seagreen; }

Acestea sunt scurtături utile pentru chenare, dar cuvintele cheie logice inline și bloc pot fi găsite și într-o varietate de alte proprietăți.

Majoritatea dezvoltatorilor folosesc aceste comenzi rapide pentru a rezolva problemele legate de direcția textului și modul de scriere. În aceste cazuri, o proprietate precum padding-inline-end vă permite să vizați umplutura finală, indiferent de direcția textului.

În esență, abstracția la inline și la bloc permite crearea de stiluri generalizate care pot fi aplicate la o varietate de situații. Mai multe informații pot fi găsite la, CSS Logical Properties and Values.

Căutări de containere

Interogările containerului nu sunt încă pe deplin stabile în CSS, dar vor fi în curând. Ele vor avea un impact semnificativ asupra modului în care gândim designul responsive. Ideea de bază este că veți putea seta un punct de întrerupere bazat pe dimensiunea unui container părinte, mai degrabă decât doar pe portul de vizualizare și pe media.

Nu există o definiție clară a sintaxei, dar probabil se va asemăna cu Lista 4.

@container Lista 4.

 @container (max-width: 650px){ … }

Luați în considerare cât de puternic va fi să reglați un aspect pe baza dimensiunii diferitelor containere care apar în straturile imbricate ale unei interfețe de utilizare. Aceasta este o schimbare destul de semnificativă, care aproape sigur va declanșa un val de inovații de interfață.

Trei noi scheme de culori

Practicanții CSS au folosit culorile RGB, HEX și cu nume pentru a înfrumuseța și a anima afișajele dispozitivelor din timpuri imemoriale. Declarația de culoare în stil HSL a fost introdusă recent. Specificația CSS introduce acum noi descriptori de culoare, și anume hwb, lab și lch.

HWB este o abreviere pentru nuanță, alb și negru. Este o atingere plăcută care se remarcă prin lizibilitatea sa umană - alegi o culoare și apoi adaugi alb și negru. Este compatibil cu cele mai recente versiuni de Chrome, Firefox și Safari. (Referința caracteristicii Microsoft Edge este ciudat de asurzitor de tăcută pe acest subiect.) Pentru a afla mai multe despre HWB, consultați hwb() – o notație de culoare pentru oameni? La fel ca RGB și HWL, are un canal alfa pentru transparență.

LCH, care înseamnă luminozitate, cromanță și nuanță, este remarcabil pentru extinderea paletei de culori disponibile. Ce, de ce și cum sunt utilizate culorile LCH în CSS? Aceasta este o prezentare generală bună, care include o discuție revelatoare despre teoria culorilor în CSS. Doar Safari acceptă în prezent LCH.

Cel mai teoretic dintre noile spații de culoare este LAB, care este derivat din teoria culorilor CIE LAB. Descriptorul de culori de laborator pretinde că acoperă întregul spectru de culori perceptibile de om, ceea ce este o afirmație îndrăzneață. Acesta, ca și LCH, este în prezent acceptat doar de Safari. Mai multe informații despre LAB pentru CSS pot fi găsite în documentația Mozilla CSS.