Vidljivost - CSS-trikovi

Anonim

visibilityNekretnina u CSS ima dvije različite funkcije. Sakriva retke i stupce tablice, a skriva i element bez promjene izgleda.

p ( visibility: hidden; ) tr ( visibility: collapse; )

visibilityima četiri valjane vrijednosti: visible, hidden, collapse, i inherit. Proći ćemo kroz svaki od njih kako bismo saznali više.

vidljivo

Baš kao što zvuči, visiblečini stvari vidljivima. Prema zadanim postavkama ništa nije skriveno, tako da ova vrijednost ne čini ništa ako niste postavili hiddenovaj ili roditelj ovog elementa.

skriven

hidden Vrijednost skriva stvari. Ovo se razlikuje od korištenja display: none, jer hidden samo vizualno skriva elemente. Element je još uvijek tamo i još uvijek zauzima prostor na stranici, ali više ga ne možete vidjeti (nekako poput okretanja neprozirnosti na 0). Zanimljivo je da ovo svojstvo ne nasljeđuje prema zadanim postavkama. To znači da, za razliku od display ili opacity svojstava, možete izraditi element hiddeni još uvijek imati jedno od njegovih djece kao visible, na primjer:

Primijetite da, iako je skriveni, nadređeni element ne pokreće :hover.

kolaps

Ovaj utječe samo na retke tablice ( ), grupe redaka (poput ), stupce ( ), skupine stupaca ( ) ili elemente napravljene da budu na taj način putem display).

Za razliku od toga hidden, ova vrijednost skriva podelement tablice, ne ostavljajući prostor na kojem je bila. Ako se koristi bilo gdje, osim na podelementu tablice, ponaša se poput visibility: hidden.

Toliko je neobičnosti s tim da je teško znati odakle početi. Baš kao predjelo:

  • Chrome / Safari sagnut će red, ali prostor koji je zauzeo ostat će. A ako su stanice tablice unutar imale obrub, to će se srušiti u jednu obrub uz gornji rub.
  • Chrome / Safari neće sažeti stupac ili grupu stupaca.
  • Safari saže ćeliju tablice (pogrešno), ali Chrome neće (točno).
  • U bilo kojem pregledniku, ako se ćelija nalazi u stupcu koji je sažet (bez obzira na to je li zapravo skupljen), tekst u toj ćeliji neće biti prikazan.
  • Opera (prije WebKita) uništit će sranje iz svega, osim iz ćelije tablice (što je točno).

Ima još, ali u osnovi: nemojte ovo koristiti nikad.

naslijediti

Zadana vrijednost. To jednostavno uzrokuje da element nasljeđuje vrijednost svog roditelja.

Flexbox

visibility: collapse; koristi se i u Flexboxu i preciznije je definiran.

Podrška preglednika

Osnove, ne uzimajući u obzir sve hirove s kolapsom:

Bilo koji Bilo koji Bilo koji 4+ 4+ Bilo koji Bilo koji

IE 7- ne podržava collapseili inherit.