Nähtavus - CSS-trikid

Anonim

visibilityVara CSS on kaks erinevat funktsiooni. See peidab tabeli read ja veerud ning peidab ka elemendi paigutust muutmata.

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

visibilityon neli kehtivad väärtused: visible, hidden, collapse, ja inherit. Läheme neist kõigist lisateabe saamiseks läbi.

nähtav

Täpselt nii, nagu see kõlab, visiblemuudab asjad nähtavaks. Midagi pole vaikimisi peidetud, nii et see väärtus ei tee midagi, kui te pole hiddensellele või selle elemendi vanemale määranud .

varjatud

hidden Väärtus peidab asju. See erineb kasutamisest display: none, sest hidden ainult visuaalselt peidab elemente. Element on endiselt olemas ja võtab lehel endiselt ruumi, kuid te ei näe seda enam (umbes nagu muudaks läbipaistmatuse 0-ks). Huvitav on see, et see vara vaikimisi ei päri. See tähendab, et erinevalt display või opacity omadustest saate teha elemendi hiddenja teil on ikkagi üks tema lastest visible, näiteks:

Pange tähele, et varjatud kujul ei käivita vanemelement :hover.

kokku kukkuma

See mõjutab ainult tabeliridu ( ), rearühmi (nagu ), veerge ( ), veerugruppe ( ) või selleks tehtud elemente display).

Erinevalt hiddenpeidab see väärtus tabeli alamelemendi, jätmata ruumi sinna, kus see oli. Kui seda kasutatakse kuskil mujal kui tabeli alamelemendil, toimib see sarnaselt visibility: hidden.

Sellega on nii palju veidrusi, et on raske teada, millest alustada. Just eelroana:

  • Chrome / Safari kukub rida kokku, kuid tema hõivatud ruum jääb alles. Ja kui sees olevatel lahtri lahtritel oli piir, siis variseb see ülemisest servast ühtseks piiriks.
  • Chrome / Safari ei ahenda veergu ega veerugruppi.
  • Safari ahendab tabeliraku (vale), kuid Chrome mitte (paremal).
  • Kui lahtris on aardes olev veerg (olenemata sellest, kas see tegelikult variseb või mitte), siis ei kuvata selles lahtris olevat teksti.
  • Opera (pre WebKit) ahendab jama kõigest, välja arvatud tabelirakust (mis on õige).

Neid on veel, kuid põhimõtteliselt: ära kasuta seda kunagi.

pärima

Vaikeväärtus. See lihtsalt paneb elemendi oma vanema väärtuse pärima.

Flexbox

visibility: collapse; kasutatakse ka Flexboxis ja paremini määratletud.

Brauseri tugi

Põhitõed, arvestamata kõiki varisemisega seotud veidrusi:

Ükskõik Ükskõik Ükskõik 4+ 4+ Ükskõik Ükskõik

IE 7- ei toeta collapseega inherit.