Noțiuni introductive cu aspectul CSS

În ultimii câțiva ani, aspectul CSS s-a schimbat dramatic, precum și modul în care dezvoltăm front-end-ul site-urilor noastre. Acum avem o alegere reală în ceea ce privește metodele de aspect pe care le folosim în CSS pentru a ne dezvolta site-urile, ceea ce înseamnă că adesea trebuie să alegem ce abordare să adoptăm. În acest articol, voi trece prin diferitele metode de layout pe care le aveți la dispoziție, explicând elementele de bază despre cum sunt utilizate și pentru ce sunt folosite.

Acest ghid este pentru dvs. dacă sunteți destul de nou în CSS și vă întrebați care este cel mai bun mod de a aborda aspectul, dar și dacă sunteți un dezvoltator cu experiență din altă parte a stivei care dorește să se asigure că înțelegerea dvs. despre aspectul de astăzi este la zi. . Nu am încercat să documentez pe deplin fiecare metodă de aspect aici, deoarece asta ar fi creat o carte și nu un articol. În schimb, vă ofer o prezentare generală a ceea ce vă este disponibil, cu o mulțime de link-uri pentru a afla mai multe.

Debit normal

Dacă luați o pagină web HTML care nu are CSS aplicat pentru a schimba aspectul, elementele se vor afișa în flux normal . În flux normal, casetele sunt afișate una după alta în funcție de modul de scriere al documentului. Aceasta înseamnă că, dacă aveți un mod de scriere orizontal, unul în care propozițiile rulează de la stânga la dreapta sau de la dreapta la stânga, fluxul normal va afișa casetele cu elemente la nivel de bloc una după alta vertical în josul paginii.

Dacă sunteți într-un mod de scriere verticală, atunci propozițiile rulează pe verticală, astfel încât fluxul normal ar așeza blocurile pe orizontală.

Fluxul normal este locul în care începeți cu orice aspect: atunci când creați un aspect CSS, luați blocurile și le determinați să facă altceva decât fluxul normal.

Structurați-vă documentul pentru a profita de fluxul normal

Puteți profita de fluxul normal, asigurându-vă că documentul începe într-o manieră bine structurată. Imaginați-vă dacă, în loc de acest concept de flux normal, browserul v-a îngrămădit toate cutiile în colț una peste alta până când ați creat un aspect. Asta ar însemna că ar trebui să plasezi fiecare lucru pe pagină. În schimb, browserul afișează conținutul nostru într-un mod imediat lizibil.

Dacă CSS-ul dvs. nu reușește să se încarce, utilizatorul poate citi în continuare conținutul, iar utilizatorii care nu primesc deloc CSS (de exemplu, cineva care folosește un cititor de ecran) li se va livra conținutul în ordinea în care este în document. Acest lucru face important din punct de vedere al accesibilității ca documentul dvs. HTML să înceapă viața într-o ordine bună; cu toate acestea, vă va ușura viața ca dezvoltator web. Dacă conținutul dvs. este în ordinea pe care utilizatorul s-ar aștepta să-l citească, nu va trebui să faceți modificări masive la aspect pentru a-l aduce la locul potrivit. Cu metodele de layout mai noi, ați putea fi surprins de cât de puțin aveți de făcut.

Prin urmare, înainte de a vă gândi la aspect, gândiți-vă la structura documentului și la ordinea în care ați dori ca conținutul dvs. să fie citit din partea de sus până în jos a documentului.

Îndepărtarea de la fluxul normal

Odată ce avem un document bine structurat, trebuie să decidem cum să-l luăm și să-l transformăm în aspectul dorit. Acest lucru va implica îndepărtarea de la fluxul normal, pentru părți din documentul nostru. Avem un întreg set de metode de layout de utilizat. Prima metodă la care vom arunca o privire este float , deoarece flotoarele sunt o demonstrație excelentă a ceea ce înseamnă să scoți un element din fluxul normal.

Plutitoare

Flotante sunt folosite pentru a muta o casetă la stânga sau la dreapta, permițând conținutului să fie afișat înfășurat în jurul ei.

Pentru a flota un articol, utilizați proprietatea CSS float și o valoare stânga sau dreapta. Valoarea implicită a float este niciunul.

 .item { float: left; }

Este demn de remarcat faptul că atunci când plutiți un articol și textul se înfășoară în jurul lui, ceea ce se întâmplă este că casetele de rând ale acelui conținut sunt scurtate. Dacă flotați un articol și următoarea casetă care conține textul are aplicată o culoare de fundal, puteți vedea că această culoare de fundal va rula apoi sub elementul flotant.

Pe măsură ce scurtați casetele de linii pentru a face spațiu între textul flotant și textul de împachetare, trebuie să setați o marjă pentru elementul flotant. O marjă pe text ar muta textul de la marginea containerului. Pentru o imagine plutită la stânga, ați adăuga o marjă în dreapta și în jos, presupunând că doriți ca imaginea să fie aliniată cu partea de sus și din stânga containerului.

Clearing Floats

Odată ce ați plutit un element, toate elementele următoare se vor înfășura în jurul acelui element plutit până când se înfășoară dedesubt și fluxul normal continuă. Dacă doriți să preveniți acest lucru, trebuie să curățați plutitorul.

Pe elementul pe care doriți să începeți să îl afișați după float, adăugați proprietatea clear cu o valoare stânga pentru a indica ștergerea unui element flotat la stânga, dreapta pentru a șterge un element flotat la dreapta sau ambele pentru a șterge orice float.

 .clear { clear: both; }

Metoda de mai sus funcționează dacă doriți ca un element să înceapă după o plutire. Nu vă va ajuta dacă vă aflați într-o situație în care aveți un articol flotant într-o cutie, cu ceva text alături. Dacă textul este mai scurt decât elementul flotant, caseta va fi desenată sub conținut și va ignora elementul flotant. După cum am învățat deja, flotoarele scurtează casetele de linie, restul aspectului continuă în flux normal.

Pentru a preveni această situație, trebuie să curățăm ceva din interiorul cutiei. Am putea adăuga un element gol și am putea seta ca să ștergeți totul. Acest lucru implică introducerea div-urilor goale în documentul nostru, ceea ce nu este ideal și ar putea să nu fie posibil dacă pagina dvs. este generată de un CMS. Deci, în schimb, metoda obișnuită de clearing floats este ceea ce este cunoscut sub numele de hack fix clar. Această metodă funcționează prin adăugarea de conținut generat CSS și setarea acestuia pentru a le șterge pe ambele.

Contextul formatării blocurilor

O altă modalitate de a șterge elementele flotante din interiorul unei casete este de a invoca un context de formatare bloc (BFC) pe container. Un context de formatare bloc conține totul în interiorul său, care ar include elemente flotante care nu mai pot ieși în partea de jos a cutiei. Există câteva modalități de a forța un BFC, cel mai frecvent atunci când ștergeți floats este să setați proprietatea de overflow să aibă o altă valoare decât cea implicită vizibilă.

 .container { overflow: auto; }

Folosirea overflow-ului în acest fel va funcționa în general, totuși, în anumite situații, puteți ajunge cu umbre tăiate sau bare de defilare nedorite pe element. De asemenea, poate părea puțin confuz în foaia de stil: ați setat overflow pentru că ați vrut bare de defilare sau doar pentru a obține această capacitate de curățare?

Pentru a clarifica intenția și pentru a preveni crearea unui BFC care provoacă efecte secundare nedorite, puteți utiliza flow-root ca valoare a proprietății de display . Singurul lucru pe care îl display: flow-root este să creeze un BFC, ștergându-ți astfel float-urile fără alte probleme cauzate.

 .container { display: flow-root; }

Utilizarea moștenită a flotoarelor

Până la apariția unor metode de aranjare mai noi, floturile erau folosite pentru a crea aspecte de coloane, această tehnică a funcționat dând o lățime unui set de articole și setându-le să plutească unul lângă celălalt. Gestionarea atentă a dimensiunii procentuale a acestor cutii plutitoare ar putea crea un efect de grilă.

Nu aș sugera să începeți acum un nou design și să folosiți această metodă. Cu toate acestea, va rămâne pe site-urile existente mulți ani de acum înainte. Prin urmare, dacă dai peste un design în care aproape totul pare să plutească, aceasta este tehnica folosită.

Resurse și citiri suplimentare despre flotoare și clearing floats

• „The Clearfix: Forțați un element să-și curețe singur copiii”, Chris Coyier, CSS-Tricks
• „ float ”, CSS: Foi de stil în cascadă, documente web MDN
• „ clear ”, CSS: Foi de stil în cascadă, documente web MDN
• „Înțelegerea aspectului CSS și a contextului formatării blocurilor”, Rachel Andrew, Smashing Magazine

Poziționare

Pentru a elimina un element din fluxul normal sau pentru a-l muta din locul său în fluxul normal, puteți utiliza proprietatea de position în CSS. Când sunt în flux normal, elementele au o position static . Elementele se afișează unul după altul în dimensiunea Bloc și dacă derulați pagina, acestea derulează cu ea.

Când schimbați valoarea poziției, de obicei, veți folosi și valori de decalaj pentru a muta caseta de la un anumit punct de referință. Punctul de referință utilizat depinde de valoarea poziției pe care o utilizați.

Poziționare relativă

Dacă un articol are position: relative , atunci punctul de referință este locul în care ar fi în mod normal în flux normal. Puteți utiliza apoi valori de decalaj pentru proprietățile top , left , bottom și right pentru a muta caseta de unde ar fi afișată în mod normal.

 .item { position: relative; bottom: 50px; }

Rețineți că alte elemente de pe pagină nu răspund la noua poziție a elementului dvs. Locul în care a fost poziționat în flux normal este rezervat, prin urmare trebuie să gestionați singur orice suprapuneri.

Poziționare absolută

position: absolute pe un articol și va fi eliminat complet din fluxul normal. Spațiul rămas pentru el va fi eliminat. Elementul va fi apoi poziționat în raport cu blocul său care îl conține, care, dacă nu este imbricat în interiorul altui element poziționat, va fi fereastra.

Prin urmare, primul lucru care se va întâmpla dacă setați position: absolute pentru un articol este că acesta ajunge de obicei blocat în partea de sus și din stânga ferestrei de vizualizare. Puteți utiliza apoi valori de decalaj pentru proprietățile top , left , bottom și right pentru a muta caseta din acea poziție în locul în care doriți să fie.

 .item { position: absolute; top: 20px; right: 20px; }

Adesea nu doriți ca caseta să fie poziționată în funcție de fereastra de vizualizare, dar referitor la un element care conține, este în interior. În acest caz, trebuie să dați acelui element care conține o valoare de poziție, alta decât static implicit.

Ca position: relative nu scoate elementul din fluxul normal, aceasta este alegerea obișnuită. Dați elementului părinte pe care doriți să vă setați decalajele față de position: relative și apoi decalați blocul poziționat absolut de limitele acelui element.

Poziționare fixă

Ceva cu position: fixed va fi poziționat în majoritatea cazurilor în raport cu fereastra și eliminat din fluxul de documente, astfel încât să nu fie rezervat spațiu pentru acesta. Când pagina este derulată, elementul fix rămâne în poziție față de fereastra de vizualizare, deoarece restul conținutului în flux normal se derulează ca de obicei.

 .item { position: fixed; top: 20px; left: 100px; }

Acest lucru poate fi util pentru a activa un panou de navigare fix care rămâne pe ecran, de exemplu în timp ce conținutul derulează. Ca și în cazul altor valori de poziționare, puteți provoca suprapuneri atunci când faceți acest lucru, așa că ar trebui să aveți grijă ca tot conținutul să poată fi citit și să nu ajungă în spatele unui element fix.

Pentru a poziționa un element fix, altfel decât în ​​raport cu fereastra de vizualizare, trebuie să aveți un element de conținut cu una dintre proprietățile de transform , perspective sau filter setată la altceva decât valoarea implicită a none . În acest caz, acel element va deveni blocul care conține, iar decalajele dvs. se referă la acel bloc și nu la fereastra de vizualizare.

Poziționare lipicioasă

position: sticky pe un element va face ca elementul să defileze cu documentul la fel ca în fluxul normal, totuși, odată ce ajunge la un anumit punct în raport cu fereastra (folosind decalajele obișnuite), se „lipește” și începe să acționează ca position: fixed . Aceasta este o valoare mai nouă și este mai puțin acceptată în browsere decât alte metode, cu toate acestea, se retrage doar la derularea cu sistemul de operare a paginii, este o valoare bine folosită ca îmbunătățire fără a cauza probleme dacă nu este acceptată.

 .item { position: sticky; top: 0; }

Acesta este modul în care puteți crea efectul popular al unei bare de navigare care derulează cu conținutul și apoi se oprește în partea de sus a ferestrei de vizualizare pentru a rămâne pe ecran în timp ce derulați conținutul.

Resurse și lecturi suplimentare despre poziționare

• „Poziționare”, MDN Learning Area, MDN web docs, Mozilla
• “ position: sticky; ”, Chris Coyier, CSS-Tricks
• „CSS position:sticky”, informații de suport pentru browser pentru poziționare lipicioasă, caniuse

Aspect flexibil

Flexible Box Layout (Flexbox) este o metodă de aspect concepută pentru aspectul unidimensional. Unidimensional înseamnă că doriți să vă aranjați conținutul într-un rând sau ca o coloană. Pentru a vă transforma elementul într-un aspect flex, utilizați proprietatea de display cu o valoare flex .

 .container { display: flex; }

Copiii direcți ai acelui element devin elemente flexibile, se vor așeza pe un rând, aliniați la marginea de pornire în direcția inline.

Axele Flexbox

În exemplul de mai sus, am descris articolele ca fiind aliniate la marginea de început a rândului nostru în direcția inline, mai degrabă decât să le descriu ca fiind aliniate la stânga. Articolele noastre sunt așezate într-un rând, deoarece valoarea implicită a proprietății flex-direction este row , aceasta creează un rând în direcția inline, direcția de-a lungul căreia se execută propozițiile. Întrucât lucrăm în engleză, o limbă de la stânga la dreapta, începutul unui rând este în stânga și astfel articolele noastre încep acolo. Valoarea flex-direction definește astfel axa principală a Flexbox.

Prin urmare, axa transversală trece peste axa principală în unghi drept. Dacă direcția dvs. de flexibilitate este row și articolele sunt afișate în direcția în linie, axa transversală rulează în direcția Bloc. Dacă flex-direction este column , astfel încât articolele rulează în direcția Bloc, atunci axa transversală este de-a lungul rândului.

Dacă vă obișnuiți să gândiți în termeni de axă principală și transversală atunci când lucrați cu Flexbox, vă va ușura multe lucruri.

Direcție și ordine

Flexbox vă oferă posibilitatea de a schimba direcția articolelor pe axa principală utilizând o valoare a flex-direction de row-reverse sau column-reverse .

De asemenea, puteți modifica ordinea articolelor flexibile individuale cu proprietatea order . Cu toate acestea, ar trebui să aveți mare grijă atunci când faceți acest lucru, deoarece acest lucru poate cauza o problemă oricărui utilizator care navighează folosind tastatura, mai degrabă decât mouse-ul sau ecranul tactil, deoarece ordinea de file a documentului va urma ordinea conținutului în sursă. Consultați secțiunea de mai jos despre Ordinea vizuală și a documentelor pentru mai multe detalii.

Proprietățile Flex

Proprietățile flexibile sunt modul de control al rapoartelor elementelor flexibile de-a lungul axei principale. Cele trei proprietăți sunt:

• flex-grow
• flex-shrink
• flex-basis

Acestea sunt de obicei utilizate în forma lor scurtă a proprietății flex , prima valoare fiind flex-grow , a doua flex-shrink și a treia flex-basis .

 .item { flex: 1 1 200px; }

Valoarea flex-basis oferă o dimensiune pe care o va avea articolul înainte de a avea loc orice creștere sau micșorare. În exemplul de mai sus, dimensiunea respectivă este de 200 de pixeli, așa că am oferi fiecărui articol 200 de pixeli de spațiu. Este puțin probabil ca containerul nostru să se împartă cu 200 de pixeli și, prin urmare, va rămâne spațiu rămas sau nu va fi suficient spațiu pentru toate articolele dacă fiecare are 200 de pixeli. Proprietățile flex-grow și flex-shrink ne permit să controlăm ce se întâmplă cu articolele dacă există prea mult sau nu este suficient spațiu pentru ele.

Dacă flex-grow este setat la orice valoare pozitivă, atunci elementului i se permite să crească pentru a ocupa spațiu. Prin urmare, în exemplul nostru de mai sus, după ce acordăm fiecărui articol 200 de pixeli, orice spațiu suplimentar va fi împărțit între elemente.

Dacă flex-shrink este setată la o valoare pozitivă, atunci articolul se poate micșora în situația în care s-ar întâmpla un depășire dacă tuturor articolelor li s-ar fi dat baza flex-basis . Dacă nu ar exista suficient spațiu în container în exemplul nostru, fiecare articol s-ar micșora o cantitate egală pentru a se reduce până când toate articolele încap în container.

Valorile flex-grow și flex-shrink pot fi orice valoare pozitivă. Un articol cu ​​o valoare mai mare flex-grow i se va acorda mai mult spațiu disponibil proporțional atunci când crește, iar cu o valoare mai mare flex-shrink mai mult va fi eliminat la micșorare.

Înțelegerea modului în care funcționează aceste proprietăți flexibile este cu adevărat cheia pentru înțelegerea Flexbox, iar resursele enumerate mai jos vă vor oferi toate detaliile. Cu toate acestea, luați în considerare utilizarea Flexbox atunci când aveți o grămadă de lucruri pe care doriți să le întindeți și să le striviți într-un container într-o singură dimensiune. Dacă încercați să aliniați lucrurile în rânduri și coloane, doriți o Grilă și, în acest caz, probabil că Flexbox nu este instrumentul pentru muncă.

Resurse și lecturi suplimentare pentru Flex Layout

• „CSS Flexible Box Layout”, Un ghid complet pentru specificații, documente web MDN, Mozilla
• „Un ghid complet pentru Flexbox”, Chris Coyier, CSS-Tricks
• „Flexbox Froggy”, un joc pentru a învăța Flexbox
• „Flexbugs”, o listă organizată de comunitate de erori ale browserului legate de Flexbox

Aspect grilă

CSS Grid Layout a fost conceput ca o metodă de aspect bidimensional. Bidimensional înseamnă că doriți să vă aranjați conținutul în rânduri și coloane. Ca și în cazul Flexbox, Grid Layout este o valoare a display și, prin urmare, pentru a începe să utilizați Grid, ar trebui să începeți cu display: grid pe container, apoi configurați unele coloane și/sau rânduri folosind grid-template-columns și grid-template-rows proprietățile grid-template-rows .

 .container { display: grid; grid-template-columns: 200px 200px 200px; grid-template-rows: 200px 200px; }

CSS-ul de mai sus ar crea o grilă de dimensiune fixă, cu coloane și rânduri complet fixe. Probabil că acest lucru nu este ceea ce doriți pe web, iar Grid vă acoperă bine. Valoarea implicită pentru orice melodie este auto , care poate fi considerată în general „suficient de mare pentru conținut”. Dacă nu am creat nicio pistă de rând, atunci s-ar crea rânduri pentru ca noi să luăm orice conținut adăugat, iar acestea ar fi dimensionate auto . Un model obișnuit este de a specifica urmele coloanelor, dar permite Grid să creeze rânduri după cum este necesar.

În timp ce vă puteți configura traseele coloanelor și rândurilor folosind orice unitate de lungime sau un procent, puteți utiliza și noua unitate fr , o unitate creată pentru aspectul grilă. Unitatea fr este o unitate flexibilă și denotă o parte din spațiul disponibil în containerul grilă.

Grid poate distribui spațiu pentru tine; nu trebuie să calculați procente pentru a vă asigura că lucrurile se potrivesc într-un container. În exemplul de mai jos, creăm coloane folosind unitatea fr și permitem crearea automată a pistelor. De asemenea, folosim grid-gap pentru a ne distanța traseele (consultați secțiunea despre Box Alignment pentru mai multe detalii despre spații și aspectul grilei).

Ca și în cazul Flexbox și flex-grow sau flex-shrink , unitatea fr se ocupă de împărțirea spațiului disponibil. O valoare fr mai mare pentru o piesă înseamnă că primește mai mult spațiu disponibil proporțional. De asemenea, puteți amesteca unități fr și lungimi absolute. Spațiul necesar pentru lungimi va fi scăzut din spațiul disponibil înainte de a calcula unitățile fr .

Terminologie grilă

O grilă are întotdeauna două axe: axa în linie rulează în direcția în care sunt așezate cuvintele pe pagină și axa blocului în direcția în care sunt așezate blocurile.

Containerul Grid este elementul pe care l-ați setat display: grid activată. Apoi aveți Grid Lines, create de coloanele și rândurile pe care le-ați specificat când utilizați grid-template-columns și grid-template-rows . Cea mai mică unitate de pe grilă (între patru linii care se intersectează) este cunoscută sub numele de Celulă Grilă, în timp ce o colecție de Celule Grilă care alcătuiesc un dreptunghi complet se numește Arie Grilă.

Plasare automată în grilă

De îndată ce creați o Grilă, copiii direcți ai containerului dvs. grilă încep să se așeze, câte unul în fiecare celulă a grilei. Ei fac acest lucru conform regulilor de plasare automată a rețelei. Aceste reguli asigură că fiecare articol este plasat într-o celulă goală, evitând suprapunerea elementelor.

Orice copil direct al containerului grilă căruia nu i-ați acordat o poziție va fi plasat conform regulilor de auto-plasare. În exemplul de mai jos, am făcut ca fiecare al treilea articol să se întinde pe piese pe două rânduri, fiind încă plasat automat în ceea ce privește linia de start.

Poziționare de bază pe linie

Cea mai simplă modalitate de a poziționa elementele pe Grid este poziționarea bazată pe linii, oferindu-i regulile articolului pentru a-i spune să se întindă de la o linie la alta a grilei. De exemplu, dacă am o grilă cu trei coloane și două rânduri, pot plasa un articol de la linia coloană 1 la linia de coloană 3 și linia de rând 1 la linia de rând 3. Apoi va acoperi patru celule de grilă în total , cuprinzând două linii de coloană și două rânduri de coloană.

 .item { grid-column-start: 1; grid-column-end: 3; grid-row-start: 1; grid-row-end: 3; }

Aceste proprietăți pot fi reprezentate ca prescurtare, grid-column grid-row , prima valoare fiind start și a doua sfârșit .

 .item { grid-column: 1 / 3; grid-row: 1 / 3; }

Elementele grilă pot ocupa aceleași celule, permițând crearea de modele cu conținut suprapus. Articolele se stivuiesc în modul obișnuit în care conținutul se stivuiește pe web, articolele care coboară în jos sursa apărând în partea de sus a altor articole. Totuși, puteți folosi z-index pentru a controla acest lucru.

Poziționare cu zone denumite

Puteți, de asemenea, să poziționați elemente pe grilă utilizând Zonele denumite. Pentru a utiliza această metodă, dați un nume fiecărui element și apoi descrieți aspectul ca valoare a proprietății grid-template-areas .

 .item1 { grid-area: a; } .item2 { grid-area: b; } .item3 { grid-area: c; } .container { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; grid-template-areas: "aabb" "aacc"; }

Există câteva reguli de reținut atunci când utilizați această metodă. Dacă doriți ca un articol să acopere mai multe celule, atunci ar trebui să repetați numele. Zonele trebuie să formeze un dreptunghi complet, nu sunt permise piese în formă de L sau Tetris! Grila trebuie să fie completă - fiecare celulă trebuie să fie completată. Dacă doriți să lăsați spațiu alb, completați acea celulă cu un . . De exemplu, în CSS-ul de mai jos, las colțul din dreapta jos gol.

 .container { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; grid-template-areas: "aabb" "aac ."; }

Acesta este un mod frumos de a lucra, deoarece oricine se uită la CSS poate vedea exact cum va funcționa aspectul.

Resurse și lecturi suplimentare pentru aspectul grilei

Există mult mai mult în CSS Grid Layout decât această prezentare generală rapidă, iar resursele de mai jos vă vor ajuta să aflați specificația. Componentele și aspectul întregii pagini deopotrivă pot fi grile, alegeți Grid Layout dacă aveți de creat un aspect bidimensional – indiferent cât de mare sau mic.

• „CSS Grid Layout”, tehnologie web pentru dezvoltatori, documente web MDN, Mozilla
• „Grid by Example”, Tot ce aveți nevoie pentru a învăța CSS Grid Layout, Rachel Andrew
• „Grid Garden”, Un joc interactiv distractiv pentru a-ți testa și îmbunătăți abilitățile CSS
• „Layout Land”, Jen Simmons, YouTube

De asemenea, am scris o serie de articole aici pe Smashing Magazine care vă pot ajuta să explorați diferite concepte de Grid:

• „Cele mai bune practici cu aspectul grilă CSS”
• „Stilizarea celulelor goale cu conținut generat și aspect al grilei CSS”
• „Folosirea CSS Grid: acceptarea browserelor fără grilă”
• „CSS Grid Gotchas și poticniri”
• „Denumirea lucrurilor în aspectul grilă CSS”

Ordinea vizuală și a documentelor

La începutul acestui articol, ți-am sugerat să începi cu documentul într-o ordine logică, citit de sus în jos, deoarece acest lucru ar fi util atât pentru accesibilitate, cât și în ceea ce privește modul în care funcționează aspectul CSS. Din scurta noastră introducere la Flexbox și CSS Grid, puteți vedea că ar fi posibil să mutați lucrurile în mod destul de dramatic departe de această ordine. Acest lucru are potențialul de a cauza o problemă.

Browserele vor urma sursa documentului pentru orice utilizare non-vizuală a documentului. Prin urmare, un cititor de ecran va citi ordinea documentului și oricine folosește o tastatură pentru a naviga va trece prin documentul în ordinea în care se află în sursă și nu în ordinea de afișare. Mulți utilizatori de cititoare de ecran nu sunt complet orbi și, prin urmare, pot folosi cititorul de ecran împreună cu posibilitatea de a vedea unde se află în document. În ambele cazuri, un afișaj care este amestecat în comparație cu sursa poate provoca într-adevăr o situație foarte confuză.

Fiți foarte conștienți atunci când mutați elemente departe de ordinea în care sunt în sursă. Dacă te trezești că rearanjezi ordinea articolelor în CSS, ar trebui să te întorci și să reorganizezi documentul? Testați pentru a vedea dacă mai puteți tabula în jurul documentului și ordinea vizuală are sens.

Resurse și lecturi suplimentare pentru ordinea vizuală și a documentelor

• „CSS Grid Layout and Accessibility”, tehnologie web pentru dezvoltatori, documente web MDN, Mozilla
• „Comandă sursă HTML vs ordine de afișare CSS”, Adrian Roselli
• „Flexbox și deconectarea navigației cu tastatură”, Code Things, Tink
• „Conflictul de ordine de răspuns pentru focalizarea tastaturii”, Alastair Campbell

Box Generation

Tot ceea ce puneți pe o pagină web creează o casetă și totul în acest articol descrie cum puteți utiliza CSS pentru a dispune acele casete în designul dvs., totuși, în anumite circumstanțe, este posibil să nu doriți deloc să creați o casetă. Există două valori ale proprietății de display care se ocupă de situațiile în care nu doriți casete.

Nu generați cutia sau conținutul ( display: none )

Dacă doriți ca elementul și tot conținutul acelui element, inclusiv orice elemente secundare, să nu fie generate, puteți utiliza display: none . Elementul nu va fi acum afișat și niciun spațiu nu va fi rezervat pentru locul în care ar fi fost.

 .item { display: none; }

Nu generați acest element, ci generați elemente secundare ( display: contents )

O valoare mai nouă a display este display: contents . Aplicați display: contents unui element și caseta pentru acel element nu va fi generată, dar orice copil va fi generat în mod normal. Acest lucru poate fi util dacă doriți ca elementele secundare indirecte să devină parte dintr-un aspect flexibil sau grilă.

În exemplul de mai jos, primul articol flexibil conține doi copii imbricați, dar așa cum este setat să display: contents caseta sa nu este închiriată, iar copiii se afișează ca și cum ar fi copilul direct și devin articole flexibile. Eliminați display: contents din acel element pentru a vedea cum se modifică aspectul.

Resurse și lecturi suplimentare pentru generarea casetei

• „Cutii care dispar cu display: contents ”, Rachel Andrew
• Cum display: contents; Funcționează”, Ire Aderinokun,
• display: contents ,” Informații de asistență pentru browser, caniuse

Aliniere

Alinierea a fost un subiect dificil pe web până de curând, cu modalități foarte limitate de a alinia corect elementele în interiorul cutiilor. Acest lucru se schimbă cu Modulul de aliniere a casetei, pe care în prezent îl veți folosi când controlați alinierea în containerele Grid și Flex. În viitor, alte metode de layout vor implementa și aceste proprietăți de aliniere. Lista proprietăților de aliniere detaliată în specificația Caseta de aliniere este următoarea:

• justify-content
• align-content
• place-content
• justify-items
• align-items
• place-items
• justify-self
• align-self
• place-self
• row-gap
• column-gap
• gap

Deoarece modelele de aspect au caracteristici diferite, alinierea funcționează ușor diferit în funcție de modelul de aspect utilizat. Să aruncăm o privire la modul în care funcționează alinierea cu câteva aspecte simple Grid și Flex.

Proprietățile align-items și justify-items setează proprietățile align-self și justify-self ca un grup. Aceste proprietăți aliniază elementele în interiorul zonei lor de grilă.

Proprietățile align-content și justify-content aliniază pistele grilei, unde există mai mult spațiu în Containerul Grid decât este necesar pentru afișarea pistelor.

În Flexbox, align-items și align-self se ocupă de alinierea pe axa transversală, în timp ce justify-content se ocupă de distribuția spațiului pe axa principală.

Pe axa transversală, puteți utiliza align-content acolo unde ați înfășurat linii flexibile și spațiu suplimentar în containerul flexibil.

See the resources for some links that discuss Box Alignment in detail across layout methods. It really is worth spending some time understanding how alignment works, as it will make working with Flexbox, Grid and future layout methods far easier.

Row And Column Gaps

A multiple-column layout has the column-gap property, and the Grid Layout spec had — until recently — the properties grid-column-gap , grid-row-gap , and grid-gap . These have now been removed from the Grid specification and added to Box Alignment. At the same time, the grid- prefixed properties were renamed to column-gap , row-gap , and gap . Browsers will alias the prefixed properties to the new renamed ones so you do not need to worry if you are using the better supported old names in your code right now.

The renaming means that these properties can be also applied to other layout methods, the obvious candidate being Flexbox. While no browser supports gaps in Flexbox at the moment, in future we should be able to use column-gap and row-gap to create space between flex items.

Resources And Further Reading For Alignment

• “CSS Box Alignment,” CSS: Cascading Style Sheets, MDN web docs, Mozilla
• “Box Alignment in Flexbox,” CSS Flexible Box Layout, MDN web docs, Mozilla
• “Box Alignment in CSS Grid Layout,” CSS Grid Layout, MDN web docs, Mozilla
• “The New Layout Standard For The Web: CSS Grid, Flexbox And Box Alignment,” Rachel Andrew, Smashing Magazine
• “Box Alignment Cheatsheet,” Rachel Andrew

Multi-Column Layout

A multiple-column layout is a layout type that enables the creation of columns, such as you might find in a newspaper. A block is split into columns, and you read down a column in the block direction then return to the top of the next column. While reading content in this way is not always useful in a web context as people don't want to have to scroll up and down to read, it can be a helpful way to display small amounts of content or to collapse down sets of checkboxes or other small UI elements.

A multiple-column layout can also be used to display sets of cards or products which have differing heights.

Setting A Column Width

To set an optimal column width, and instruct the browser to display as many columns as possible at that width use the following CSS:

 .container { column-width: 300px; }

This will create as many as 300 pixel columns as possible, any leftover space is shared between the columns. Therefore, unless your space divides into 300 pixels with no remainder, it is likely that your columns will be slightly wider than 300 pixels.

Setting A Number Of Columns

Instead of setting the width, you could set a number of columns using column-count . In this case, the browser will share the space between the number of columns you have asked for.

 .container { column-count: 3; }

If you add both column-width and column-count , then the column-count property acts as a maximum. In the below code, columns will be added until there are three columns, at which point any extra space will be shared between those three columns even if there was enough space for an additional column.

 .container { column-width: 300px; column-count: 3; }

Gaps And Column Rules

You cannot add margins or padding to individual column boxes, to space out columns use the column-gap property. If you do not specify a column-gap , it will default to 1em to prevent columns bumping up against each other. This is a different behavior to the way column-gap is specified for other layout methods, where it defaults to 0. You can use any length unit for your gap, including 0 if you want no gap at all.

The column-rule property gives you the ability to add a rule between two columns. It is a shorthand for column-rule-width , column-rule-color , and column-rule-style , and acts in the same way as border . Note that a rule does not take up any space of its own. It lays on top of the gap so to increase or decrease space between the rule and the content you need to increase or decrease the column-gap .

Allowing Elements To Span Columns

You can span an element inside the multicol container across all of the columns using the column-span property on that element.

 h3 { column-span: all; }

When a column-span happens, the multicol container essentially stops above the spanning element, therefore, the content forms into columns above the element and then remaining content forms a new set of column boxes below the spanning element.

You can only use column-span: all or column-span: none ; it isn't possible to span some of the columns. At the time of writing, Firefox does not support the column-span property.

Resources And Further Reading For Multiple-Column Layout

• “Using Multi-Column Layouts,” CSS Multi-column Layout, MDN web docs, Mozilla

Fragmentation

Multiple-Column Layout is an example of fragmentation . In this case, the content is broken into columns. It is, however, very similar to the way that content is broken into pages when printing. This process is dealt with by the Fragmentation specification, and this specification contains properties to help control the breaking of content.

For example, if you have laid out a set of cards using multicol and you want to make sure that a card never breaks in half, becoming split between two columns you can use the property break-inside with a value of avoid . Due to browser compatibility reasons, you will also want to use the legacy page-break-inside property as well.

 .card { page-break-inside: avoid; break-inside: avoid; }

If you want to avoid a break directly after a heading, you can use the break-after property.

 .container h2 { page-break-after: avoid; break-after: avoid; }

These properties can be used when preparing a print stylesheet and also in multicol. In the example below, I have three paragraphs in a multicol container that fragments into three columns. I have given break-inside: avoid to the p element meaning that the paragraphs end up one in each column (even if this makes the columns uneven).

Resurse și lecturi suplimentare pentru fragmentare

• „Un ghid pentru starea foilor de stil tipărite în 2018”, Rachel Andrew, Smashing Magazine
• „Column Breaks”, QuirksMode.org

Selectarea tipurilor de aspect: Cum să alegi?

Majoritatea paginilor web vor folosi o combinație a acestor tipuri de aspect și fiecare specificație definește exact modul în care interacționează între ele. De exemplu, este posibil să aveți un aspect Grid în care unele Elemente Grid sunt, de asemenea, containere Flex. Unele dintre aceste containere flexibile ar putea fi un bloc de conținut pentru un articol poziționat sau au o imagine plutită în interior. Specificațiile sunt scrise cu așteptarea că vom amesteca modele de aspect, în funcție de ceea ce este cel mai bine pentru conținutul pe care îl prezentăm. În acest ghid, am încercat să ofer o privire de ansamblu asupra modului de bază în care se comportă fiecare tip de layout, pentru a vă ajuta să vă concentrați pe ceea ce este probabil cel mai bun mod de a obține un anumit efect.

Cu toate acestea, nu vă fie teamă să vă jucați cu diferite moduri de a crea designul pe care îl aveți în minte. Există mai puține locuri decât ți-ai putea imagina unde ar trebui să te îngrijorezi că alegerile tale ar cauza vreo problemă reală. Începeți cu o structură bună a documentului și aveți grijă să nu deconectați afișajul vizual de la acea ordine. O mare parte din restul este doar un caz de testare a faptului că lucrurile funcționează așa cum vă așteptați în browserele dvs. țintă.