Săpătură în proprietatea afișajului: generarea casetei

Acesta este al doilea dintr-o serie scurtă de articole despre proprietatea de display în CSS. Puteți citi articolul inițial din serie la „The Two Values ​​Of Display”. Specificația display este o specificație foarte utilă de înțeles, deoarece stă la baza tuturor metodelor diferite de aspect pe care le avem.

În timp ce multe dintre valorile display au propria lor specificație, mulți termeni și idei sunt detaliate în display . Aceasta înseamnă că înțelegerea acestei specificații vă ajută să înțelegeți specificațiile care detaliază în esență valorile display . În acest articol, voi arunca o privire la valorile de generare a casetei de display - none și contents .

Totul Este O Cutie

În CSS totul generează casete. O pagină web este în esență un set de casete bloc și inline, lucru pe care îl înțelegeți foarte bine dacă deschideți DevTools în browserul dvs. preferat și începeți să selectați elemente de pe pagină. Puteți vedea casetele care alcătuiesc aspectul și modul în care sunt aplicate marginile, umplutura și marginile acestora.

Controlul generării cutiei

Valorile none și contents ale display se ocupă de dacă casetele ar trebui să apară. Dacă aveți elemente în marcaj și nu doriți ca acestea să genereze o casetă în CSS, atunci trebuie să suprimați cumva generarea casetei. Există două lucruri posibile pe care ați dori să le faceți. Care sunt:

• Preveniți generarea unei cutii și a tuturor copiilor ei.
• Preveniți generarea unei cutii, dar încă afișați copiii.

Putem arunca o privire la fiecare dintre aceste scenarii pe rând.

display: niciunul

Valoarea none a display este modul în care împiedicăm generarea unei cutii și a tuturor copiilor acelei cutii. Se comportă ca și cum elementul nu ar fi fost deloc acolo. Prin urmare, este util în situațiile în care intenționați să ascundeți complet acel conținut, poate pentru că acesta va fi dezvăluit mai târziu după activarea unui link.

Dacă am un exemplu cu un paragraf, o listă neordonată și un alt paragraf, puteți vedea că articolele sunt afișate în flux normal. ul are un fundal și o chenar aplicate, plus unele umplutură.

Dacă adaug display: none la ul dispare din afișajul vizual, luând cu el copiii ul plus fundalul și chenarul.

Dacă utilizați display: none , acesta ascunde conținutul tuturor utilizatorilor site-ului. Aceasta include utilizatorii de cititoare de ecran. Prin urmare, ar trebui să utilizați acest lucru numai dacă intenția dvs. este ca cutia și tot ce este în interiorul ei să fie complet ascunse pentru toată lumea.

Există situații în care ați putea dori să adăugați informații suplimentare pentru utilizatorii tehnologiei de asistență, cum ar fi cititoarele de ecran, dar să le ascundeți pentru alți utilizatori; în astfel de cazuri, trebuie să utilizați o tehnică diferită. Câteva sugestii excelente sunt făcute de Scott O 'Hara în articolul său „Inclusively Hidden”.

Utilizarea display: none este așadar destul de simplu. Utilizați-l într-o situație în care doriți ca o cutie și conținutul să dispară de pe afișaj, din arborele de casete și din arborele de accesibilitate (ca și cum nu ar fi fost niciodată acolo).

afișare: conținut

Pentru al doilea scenariu, trebuie să ne uităm la o valoare mult mai nouă a afișajului. display: contents va elimina caseta la care este aplicat din arborele de casete în același mod în care display: none nu o face, dar lăsați copiii pe loc. Acest lucru determină un comportament util în ceea ce privește lucrurile pe care le putem face apoi în machetele noastre. Să ne uităm la un exemplu simplu și apoi să explorăm mai departe.

Folosesc același exemplu ca înainte, dar de data aceasta am folosit display: contents pe ul . Elementele din listă sunt acum vizibile, cu toate acestea, nu au fundal și chenare și se comportă ca și cum ați adăuga elemente li la pagină fără nicio anexare a ul .

Motivul pentru care scoaterea unei cutii și păstrarea copiilor este utilă se datorează modului în care se comportă alte valori de display . Când schimbăm valoarea de display , o facem pe o cutie și pe copiii direcți ai acelei cutii, așa cum am descris în ultimul articol. Dacă adaug display: flex la regulile CSS pentru un element, acel element devine o casetă la nivel de bloc, iar copiii direcți devin elemente flexibile. Copiii acelor elemente flexibile revin la fluxul normal (nu fac parte din aspectul flexibil).

Puteți vedea acest comportament în exemplul următor. Aici am un element care conține setat pentru a afișa flex, are patru copii directe, trei elemente div și un ul . ul are două elemente de listă. Toți copiii direcți participă la aspectul flexibil și se așează ca elemente flexibile. Elementele din listă nu sunt copii direcți și astfel se afișează ca elemente din listă în interiorul casetei ul .

Dacă luăm acest exemplu și adăugăm display: contents la ul , caseta este eliminată din afișajul vizual și acum copiii participă la aspectul flexibil. Puteți vedea că nu devin copii direcți. Ele nu sunt selectate de către selectorul universal de copil direct ( .wrapper > * ) în felul în care sunt elementele div și ul și mențin fundalul care le este dat. Tot ceea ce s-a întâmplat este că cutia cu ul care conține a fost îndepărtată, totul se desfășoară normal.

Acest lucru are implicații potențial foarte utile dacă luăm în considerare elementele HTML care sunt importante pentru accesibilitate și datele semantice, dar care generează o casetă suplimentară care ne poate împiedica să dispunem conținutul cu aspect flexibil sau grid.

Acesta nu este un CSS „Resetare”

Este posibil să fi observat cum un efect secundar al utilizării display: contents este că marginea și umplutura de pe element sunt eliminate. Acest lucru se datorează faptului că sunt legate de casetă, parte a modelului de casetă CSS. Acest lucru v-ar putea face să credeți că display: contents este o modalitate bună de a scăpa rapid de umplutura și marginea unui element.

Aceasta este o utilizare pe care Adrian Roselli a observat-o în sălbăticie; a fost suficient de îngrijorat pentru a scrie o postare detaliată în care să explice problemele de a face acest lucru - „ display: contents nu este o resetare CSS”. Unele dintre problemele pe care le ridică se datorează unei probleme nefericite de accesibilitate în browserele cu afișare în prezent: conținut pe care îl vom discuta mai jos. Cu toate acestea, chiar și odată ce aceste probleme sunt rezolvate, eliminarea unui element din arborele de cutie pur și simplu pentru a scăpa de marjă și de umplutură este oarecum extremă.

Dacă nimic altceva, ar fi problematic pentru întreținerea viitoare a site-ului, un viitor dezvoltator s-ar putea întreba de ce nu părea să aplice nimic acestei casete misterioase - ratând faptul că a fost eliminată! Dacă aveți nevoie ca marja și umplutura să fie 0 , fă-ți o favoare viitorului tău și setează-le la 0 într-un mod onorat. Rezervați utilizarea display: contents pentru acele cazuri speciale în care doriți cu adevărat să eliminați cutia.

De asemenea, merită remarcată diferența dintre display: contents și subgrilă CSS Grid Layout. Unde display: contents elimină complet caseta, fundalul și chenarul de pe afișaj, făcând un element de grilă o subgrilă ar menține orice stil de casetă pe acel articol și ar trece doar prin dimensiunea pistei, astfel încât articolele imbricate să poată utiliza aceeași grilă. Aflați mai multe în articolul meu, „CSS Grid Level 2: Here Comes Subgrid”.

Probleme de accesibilitate și afișare: conținut

O problemă serioasă face în prezent display: contents nu este util chiar pentru ceea ce ar fi cel mai util. Cazurile evidente pentru display: contents sunt acele cazuri în care sunt necesare casete suplimentare pentru a adăuga un marcaj care face conținutul dvs. mai ușor de înțeles de către cei care folosesc cititoare de ecran sau alte dispozitive de asistență.

Elementul ul al listei noastre din primul display: contents CodePen este un exemplu perfect. Puteți obține același rezultat vizual prin aplatizarea marcajului și fără a utiliza deloc o listă. Cu toate acestea, dacă conținutul a fost din punct de vedere semantic o listă, ar fi cel mai bine înțeles și citit de un cititor de ecran ca o listă, ar trebui să fie marcat ca una.

Dacă apoi doriți ca elementele copil să facă parte dintr-un aspect flexibil sau grilă, la fel ca și cum caseta ul nu ar fi acolo, ar trebui să puteți utiliza display: contents pentru a îndepărta cutia și pentru a o face așa - totuși lăsați semantica în loc. Specificația spune că acesta ar trebui să fie cazul,

„Proprietatea de display nu are niciun efect asupra semanticii unui element: acestea sunt definite de limbajul documentului și nu sunt afectate de CSS. Pe lângă valoarea none, care afectează, de asemenea, ieșirea sonoră/vorbirii și interactivitatea unui element și a descendenților săi, proprietatea de display afectează doar aspectul vizual: scopul ei este de a permite designerilor libertatea de a schimba comportamentul de aspect al unui element fără a afecta aspectul subiacent. semantica documentului.”

După cum am discutat deja, valoarea none ascunde elementul de cititoarele de ecran, cu toate acestea, alte valori de display sunt doar acolo pentru a ne permite să schimbăm modul în care lucrurile se afișează vizual . Nu ar trebui să atingă semantica documentului.

Din acest motiv, pe mulți dintre noi i-a luat prin surprindere să ne dăm seama că display: contents elimina, de fapt, elementul din arborele de accesibilitate în cele două browsere (Chrome și Firefox) care îl implementaseră. Prin urmare, modificarea semantică a documentului, astfel încât un cititor de ecran să nu știe că o listă este o listă odată ce ul a fost eliminat folosind display: contents . Aceasta este o eroare a browserului - și una serioasă.

Anul trecut, Hidde de Vries a scris această problemă în postarea sa „Markup mai accesibil cu display:contents ” și a ridicat cu ajutor probleme împotriva diferitelor browsere pentru a crește gradul de conștientizare și a le face să lucreze la o remediere. Firefox a remediat parțial problema, deși există încă probleme cu anumite elemente, cum ar fi butonul. Problema se lucrează activ în Chrome. Există, de asemenea, o problemă pentru WebKit. Vă încurajez să marcați aceste erori dacă aveți cazuri de utilizare pentru afișare: conținut care ar fi afectat de probleme.

Până când aceste probleme sunt remediate, iar versiunile de browser care au prezentat problema nu se mai folosesc, trebuie să fiți foarte atenți când utilizați conținutul afișaj: pe orice transmite informații semantice și trebuie expus la tehnologie de asistență. După cum spune Adrian Roselli,

„Deocamdată, vă rugăm să utilizați numai conținutul afișaj: dacă veți testa cu tehnologie de asistență și puteți confirma că rezultatele funcționează pentru utilizatori.”

Există locuri în care puteți utiliza în siguranță display: contents fără această problemă. Unul ar fi dacă trebuie să adăugați un marcaj suplimentar pentru a crea alternative pentru grila dvs. de aspecte flexibile în browserele mai vechi. Browsere care acceptă display: contents acceptă și grid și flexbox, prin urmare puteți display: contents elementele div redundante adăugate. În exemplul de mai jos, am creat o grilă pe bază de plutire, completă cu învelișuri de rând.

Apoi folosesc display: contents pentru a elimina ambalajele de rând pentru a permite tuturor elementelor să devină elemente grilă și, prin urmare, să poată face parte din aspectul grilei. Acest lucru vă poate oferi un instrument suplimentar atunci când creați alternative pentru machete avansate, în sensul că, dacă aveți nevoie să adăugați un marcaj suplimentar, îl puteți elimina cu afișare: conținut atunci când faceți aspectul grilă sau flexibil. Nu cred că această utilizare ar trebui să provoace probleme - deși dacă cineva are informații mai bune de accesibilitate decât mine și poate sublinia o problemă, vă rugăm să faceți asta în comentarii.

Încheierea

Acest articol a analizat valorile de generare a casetei ale proprietății de display . Sper că acum înțelegeți comportamentul diferit al display: none - care elimină complet o cutie și toți copiii și display: contents care elimină doar cutia în sine. De asemenea, ar trebui să înțelegeți problemele potențiale ale utilizării acestor metode în ceea ce privește accesibilitatea.