Săpătură în proprietatea afișajului: cele două valori ale afișajului

Un aspect flex sau grilă începe cu declararea display: flex sau display: grid . Aceste metode de aspect sunt valori ale proprietății de display CSS. Tindem să nu vorbim prea mult despre această proprietate în sine, ci concentrându-ne pe valorile flex sau grid , cu toate acestea, există câteva lucruri interesante de înțeles despre display și modul în care este definită, care îți vor face viața mult mai ușoară pe măsură ce folosești CSS pentru aspect.

În acest articol, primul dintr-o serie scurtă, voi arunca o privire asupra modului în care valorile display sunt definite în specificația de Nivel 3. Aceasta este o modificare a modului în care am definit display în versiunile anterioare ale CSS. Deși poate părea neobișnuit la început pentru cei dintre noi care fac CSS de mulți ani, cred că aceste modificări ajută cu adevărat să explice ce se întâmplă atunci când schimbăm valoarea display pe un element.

Bloc și elemente în linie

Unul dintre primele lucruri pe care le învățăm oamenilor care sunt noi în CSS sunt conceptele de elemente bloc și inline. Vă vom explica că unele elemente de pe pagină sunt display: block și au anumite caracteristici din acest motiv. Ele se întind în direcția în linie, ocupând atât spațiu cât le este disponibil. Ei sparg pe o nouă linie; le putem da lățime, înălțime, margine precum și umplutură, iar aceste proprietăți vor împinge alte elemente din pagină departe de ele.

De asemenea, știm că unele elemente sunt display: inline . Elementele inline sunt ca cuvintele dintr-o propoziție; nu se sparg pe o linie nouă, ci în schimb își rezervă un caracter de spațiu alb între ele. Dacă adăugați margini și umplutură, acestea se vor afișa, dar nu vor îndepărta alte elemente.

Comportamentul elementelor bloc și inline este fundamental pentru CSS și pentru faptul că un document HTML marcat corespunzător va fi citit în mod implicit. Acest aspect este denumit „Block and Inline Layout” sau „Normal Flow”, deoarece acesta este modul în care elementele se așează dacă nu le facem altceva.

Valorile interioare și exterioare ale display

Înțelegem elementele bloc și inline, dar ce se întâmplă dacă facem display: grid ? Acesta este ceva complet diferit? Dacă ne uităm la o componentă pe care am specificat display: grid , în ceea ce privește elementul părinte din layout, acesta se comportă ca un element block level . Elementul se va întinde și va ocupa cât mai mult spațiu disponibil în dimensiunea în linie, va începe pe o linie nouă. Se comportă la fel ca un element block în ceea ce privește modul în care se comportă alături de restul aspectului. Nu am spus display: block totuși, sau nu?

Se pare că avem. La nivelul 3 al specificației de afișare, valoarea display este definită ca două cuvinte cheie. Aceste cuvinte cheie definesc valoarea exterioară a afișajului, care va fi în inline sau block și, prin urmare, definesc modul în care elementul se comportă în aspect alături de alte elemente. Ele definesc, de asemenea, valoarea interioară a elementului - sau modul în care copiii direcți ai acelui element se comportă.

Aceasta înseamnă că atunci când spui display: grid , ceea ce spui cu adevărat este display: block grid . Cereți un container cu grilă la nivel de bloc. Un element care va avea toate atributele blocului - îi puteți da înălțime și lățime, margine și umplutură și se va întinde pentru a umple containerul. Copiii acelui container, totuși, au primit valoarea interioară a grid astfel încât să devină elemente de grilă. Modul în care se comportă aceste elemente din grilă este definit în Specificația Grilei CSS: specificațiile de display ne oferă o modalitate de a spune browserului că aceasta este metoda de aspect pe care dorim să o folosim.

Cred că acest mod de a gândi despre display este incredibil de util; explică în mod direct ce facem cu diverse metode de layout. Dacă ar fi să specificați display: inline flex , la ce v-ați aștepta? Sperăm, o cutie care se comportă ca un element în linie, cu copii care sunt articole flexibile.

Există alte câteva lucruri explicate cu grijă gândindu-ne la display în acest mod nou și voi arunca o privire la unele dintre acestea în restul acestui articol.

Ne întoarcem întotdeauna la fluxul normal

Când ne gândim la aceste proprietăți de afișare interioare și exterioare, poate fi util să luăm în considerare ce se întâmplă dacă nu ne încurcăm deloc cu valoarea afișajului. Dacă scrieți ceva HTML și îl vizualizați într-un browser, ceea ce obțineți este bloc și aspect inline sau flux normal. Elementele sunt afișate ca elemente block sau inline .

Exemplul de mai jos conține un marcaj pe care l-am transformat într-un obiect media, făcând display: flex div : flex (cei doi copii direcți) devin acum elemente flex, deci imaginea este acum într-un rând cu conținutul. Dacă vedeți în conținut, totuși, există un titlu și un paragraf care se afișează din nou în flux normal. Copiii direcți ai obiectului media au devenit elemente flexibile; copiii lor revin la fluxul normal, cu excepția cazului în care modificăm valoarea afișajului pe elementul flexibil. Containerul flexibil în sine este o cutie bloc, așa cum puteți vedea prin faptul că chenarul se extinde până la marginea părintelui său.

Dacă lucrați cu acest proces, faptul că elementele de pe pagina dvs. se vor așeza singure cu acest aspect de flux normal, ușor de citit, mai degrabă decât să luptați împotriva lui și să încercați să plasați totul, CSS este mult mai ușor. De asemenea, aveți mai puține șanse de a cădea în probleme de accesibilitate, deoarece lucrați cu ordinea documentelor, ceea ce este exact ceea ce face un cititor de ecran sau o persoană care parcurge documentul.

Explicarea flow-root și inline-block

Valoarea inline-block este, de asemenea, probabil să fie familiară multora dintre noi, care facem CSS de ceva vreme. Această valoare este o modalitate de a obține o parte din comportamentul blocului pe un element inline . De exemplu, un element inline-block poate avea o lățime și o înălțime. Un element cu display: inline-block se comportă, de asemenea, într-un mod interesant prin faptul că creează un B lock F ormatting C ontent (BFC).

Un BFC face niște lucruri utile în ceea ce privește aspectul, de exemplu, conține floats. Pentru a citi mai detaliat despre contextele de formatare a blocurilor, consultați articolul meu anterior „Înțelegerea aspectului CSS și a contextului de formatare a blocurilor”. Prin urmare, a spune display: inline-block vă oferă o casetă inline care stabilește și un BFC.

După cum veți descoperi (dacă citiți articolul de mai sus despre contextul de formatare a blocurilor), există o valoare mai nouă a afișajului care creează, de asemenea, în mod explicit un BFC. Aceasta este valoarea flow-root . Această valoare creează un BFC pe un bloc, mai degrabă decât un element inline.

• display: inline-block vă oferă un BFC pe o cutie inline.
• display: flow-root vă oferă un BFC pe o casetă de bloc.

Probabil că acum vă gândiți că totul este puțin confuz: de ce avem aici două cuvinte cheie complet diferite și ce s-a întâmplat cu sintaxa cu două valori despre care vorbeam înainte? Acest lucru duce clar la următorul lucru pe care trebuie să-l explic despre display , adică faptul că CSS are o istorie cu care trebuie să ne ocupăm în ceea ce privește proprietatea de display .

Valorile moștenite ale afișajului

Specificația CSS2 a detaliat următoarele valori pentru proprietatea de display :

• inline
• block
• inline-block
• list-item
• none
• table
• inline-table

De asemenea, au fost definite diferitele proprietăți interne ale tabelului, cum ar fi table-cell care nu avem de-a face în acest articol.

Apoi am adăugat la acestea câteva valori pentru afișare, pentru a sprijini aspectul flexibil și grid:

• grid
• inline-grid
• flex
• inline-flex

Notă : specificația definește, de asemenea, ruby ​​și inline-ruby pentru a suporta Ruby Text despre care puteți citi în specificația Ruby.

Toate acestea sunt valori unice pentru proprietatea de display , definite înainte ca specificația să fie actualizată pentru a explica aspectul CSS în acest fel. Ceva foarte important despre CSS este faptul că nu ne străduim să spargem web-ul; nu putem schimba pur și simplu lucrurile . Nu putem decide brusc că toată lumea ar trebui să folosească această nouă sintaxă cu două valori și, prin urmare, fiecare site web creat vreodată care a folosit sintaxa cu o singură valoare se va rupe dacă un dezvoltator nu revine și o remediază!

În timp ce te gândești la această problemă, s-ar putea să te bucuri de această listă de greșeli în proiectarea CSS-ului, care sunt mai puține greșeli în multe cazuri ca lucruri care au fost concepute fără o bilă de cristal pentru a vedea în viitor! Cu toate acestea, adevărul este că nu putem sparge web-ul, motiv pentru care avem această situație în care chiar acum browserele acceptă un set de valori unice pentru afișare, iar specificația se mută la două valori pentru afișare.

Modul în care ocolim acest lucru este să specificăm valorile vechi și scurte pentru afișare, care includ toate aceste valori unice. Aceasta înseamnă că o mapare poate fi definită între valori individuale și valori noi de două cuvinte cheie. Care ne oferă următorul tabel de valori:

Pentru a explica cum funcționează, ne putem gândi la un container grilă. În lumea cu două valori, am crea un container grilă la nivel de bloc cu:

 .container { display: block grid; }

Cu toate acestea, cuvântul cheie moștenit înseamnă că următoarele face același lucru:

 .container { display: grid; }

Dacă, în schimb, am dori un container grid inline, în lumea cu două valori am folosi:

 .container { display: inline grid; }

Și dacă folosiți valorile moștenite:

 .container { display: inline-grid; }

Acum putem să ne întoarcem la locul unde a început această conversație și să privim display: inline-block . Privind tabelul, puteți vedea că acesta este definit în lumea cu două valori ca display: inline flow-root . Acum se potrivește display: flow-root care într-o lume cu două valori ar fi display: block flow-root . Un pic de aranjare și clarificare a modului în care sunt definite aceste lucruri. O refactorizare a CSS, dacă doriți.

Suport pentru browser pentru sintaxa cu două valori

Până acum, browserele nu acceptă sintaxa cu două valori pentru proprietatea de display . Bug-ul de implementare pentru Firefox poate fi găsit aici. Implementarea - atunci când se întâmplă - ar implica în esență aliasarea valorilor moștenite la versiunile cu două valori. Prin urmare, probabil că va dura mult timp înainte să puteți utiliza efectiv aceste versiuni cu două valori în codul dvs. Cu toate acestea, chiar nu acesta este scopul acestui articol. În schimb, cred că analiza valorilor afișajului în lumina modelului cu două valori ajută la explicarea mult din ceea ce se întâmplă.

Când definiți aspectul unei casete în CSS, definiți ce se întâmplă cu această casetă în ceea ce privește modul în care se comportă în raport cu toate celelalte casete din aspect . De asemenea, definiți cum se comportă copiii acelei cutii. Puteți gândi în acest fel cu mult înainte de a putea declara în mod explicit valorile ca două lucruri separate, deoarece cuvintele cheie vechi sunt asociate cu acele valori și vă va ajuta să înțelegeți ce se întâmplă când modificați valoarea display .