Näkyvyys - CSS-temppuja

Anonim

visibilityOmaisuus CSS on kaksi eri toimintoa. Se piilottaa taulukon rivit ja sarakkeet sekä piilottaa elementin muuttamatta asettelua.

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

visibilityon neljä kelvolliset arvot: visible, hidden, collapse, ja inherit. Käymme läpi ne kaikki saadaksesi lisätietoja.

näkyvä

Aivan kuten se kuulostaa, visibletekee asiat näkyviksi. Mikään ei ole piilotettu oletuksena, joten tämä arvo ei tee mitään, ellet ole asettanut hiddentälle tai tämän elementin vanhemmalle.

piilotettu

hidden Arvo piilottaa asioita. Tämä on erilainen kuin käyttö display: none, koska hidden vain piilottaa elementit visuaalisesti. Elementti on edelleen olemassa ja vie silti tilaa sivulla, mutta et näe sitä enää (ikään kuin kääntäisi opasiteetin 0: ksi). Mielenkiintoista on, että tämä ominaisuus ei peri oletuksena. Tämä tarkoittaa, että toisin kuin display tai opacity ominaisuudet, voit tehdä elementin hiddenja silti saada yksi sen lapsista visible, kuten tämä:

Huomaa, että vaikka ylätason elementti on piilotettu, se ei laukaise :hover.

romahdus

Tämä vaikuttaa vain taulukkoriveihin ( ), riviryhmiin (kuten ), sarakkeisiin ( ), sarakeryhmiin ( ) tai elementteihin, jotka on tehty sellaisiksi display).

Toisin kuin hiddentämä arvo piilottaa taulukon alielementin jättämättä tilaa missä se oli. Jos sitä käytetään missä tahansa muualla kuin taulukon alaelementissä, se toimii kuten visibility: hidden.

Tässä on niin paljon omituisuuksia, että on vaikea tietää, mistä aloittaa. Aivan alkupalana:

  • Chrome / Safari romahtaa rivin, mutta sen käyttämä tila säilyy. Ja jos sisällä olevissa taulukon soluissa oli reunus, se romahtaa yhdeksi reunaksi yläreunaa pitkin.
  • Chrome / Safari ei kutista saraketta tai sarakeryhmää.
  • Safari kutistaa taulukon solun (väärä), mutta Chrome ei (oikea).
  • Jos solu on sarakkeessa, joka on tiivistetty (riippumatta siitä, onko se todella romahtanut), selaimen tekstiä ei näytetä missään selaimessa.
  • Opera (pre WebKit) kutistaa paskaa kaikesta, paitsi taulukon solusta (mikä on oikein).

On enemmän, mutta periaatteessa: älä käytä tätä koskaan.

periä

Oletusarvo. Tämä yksinkertaisesti saa elementin perimään vanhemman arvon.

Flexbox

visibility: collapse; käytetään myös Flexboxissa, ja tarkemmin määritelty.

Selaimen tuki

Perusasiat, huomioimatta kaikkia romahduksia:

Minkä tahansa Minkä tahansa Minkä tahansa 4+ 4+ Minkä tahansa Minkä tahansa

IE 7- ei tue collapsetai inherit.