visibilityProprietatea în CSS are două funcții diferite. Ascunde rândurile și coloanele unui tabel și ascunde, de asemenea, un element fără a schimba aspectul.
p ( visibility: hidden; ) tr ( visibility: collapse; )visibilityare patru valori valide: visible, hidden, collapse, și inherit. Vom parcurge fiecare dintre ele pentru a afla mai multe.
vizibil
Așa cum sună, visibleface lucrurile vizibile. Nimic nu este ascuns în mod implicit, deci această valoare nu face nimic decât dacă ați setat hiddenacest element sau un părinte al acestui element.
ascuns
hidden Valoarea ascunde lucrurile. Acest lucru este diferit de a folosi display: none, deoarece hidden ascunde doar elemente vizuale. Elementul este încă acolo și încă ocupă spațiu pe pagină, dar nu îl mai puteți vedea (cam ca și cum ați transforma opacitatea la 0). Interesant este că această proprietate nu moștenește în mod implicit. Asta înseamnă că, spre deosebire de proprietățile display sau opacity, puteți crea un element hiddenși puteți avea totuși unul dintre copiii săi astfel visible:
Observați că, în timp ce este ascuns, elementul părinte nu declanșează :hover.
colaps
Acesta afectează doar rândurile tabelului ( ), grupurile de rânduri (cum ar fi ), coloanele ( ), grupurile de coloane ( ) sau elementele făcute astfel prin intermediul display).
Spre deosebire de hiddenaceastă valoare, aceasta ascunde subelementul tabelului, fără a părăsi spațiul în care se afla. Dacă este utilizat oriunde , ci pe un sub-element de tabel, se comportă ca visibility: hidden.
Există atât de multe ciudățenii cu acest lucru încât este greu să știi de unde să începi. La fel ca aperitiv:
- Chrome / Safari se va prăbuși un rând, dar spațiul pe care l-a ocupat va rămâne. Și dacă celulele de masă din interior au avut o margine, aceasta se va prăbuși într-o singură margine de-a lungul marginii superioare.
- Chrome / Safari nu va restrânge o coloană sau un grup de coloane.
- Safari restrânge o celulă de tabel (greșit), dar Chrome nu (corect).
- În orice browser, dacă o celulă se află într-o coloană care este prăbușită (indiferent dacă se prăbușește sau nu efectiv), textul din acea celulă nu va fi afișat.
- Opera (pre WebKit) va restrânge merda din toate, cu excepția unei celule de tabel (care este corectă).
Există mai multe, dar practic: nu utilizați acest lucru niciodată.
moşteni
Valoarea implicită. Acest lucru determină pur și simplu elementul să moștenească valoarea părintelui său.
Flexbox
visibility: collapse; este folosit și în Flexbox și mai bine definit.
Suport pentru browser
Noțiunile de bază, fără a lua în considerare toate ciudățenile cu colaps:
| Orice | Orice | Orice | 4+ | 4+ | Orice | Orice |
IE 7- nu acceptă collapsesau inherit.