visibilityCSS özellik iki farklı işlevlere sahiptir. Bir tablonun satırlarını ve sütunlarını gizler ve ayrıca düzeni değiştirmeden bir öğeyi de gizler.
p ( visibility: hidden; ) tr ( visibility: collapse; )visibilityDört geçerli değerlere sahiptir: visible, hidden, collapse, ve inherit. Daha fazlasını öğrenmek için her birini gözden geçireceğiz.
gözle görülür
Tıpkı göründüğü gibi visible, her şeyi görünür kılar. Varsayılan olarak hiçbir şey gizli değildir, bu nedenle hiddenbu veya bu öğenin bir üst öğesi üzerinde ayarlamadığınız sürece bu değer hiçbir şey yapmaz .
gizli
hidden Değer şeyler gizler. Bu, kullanmaktan farklıdır display: none, çünkü hidden öğeleri yalnızca görsel olarak gizler. Öğe hala oradadır ve sayfada hala yer kaplar, ancak artık onu göremezsiniz (opaklığı 0'a çevirmek gibi). İlginç bir şekilde, bu özellik varsayılan olarak devralmaz. Bu, display veya opacity özelliklerinden farklı olarak, bir öğe oluşturabileceğiniz hiddenve bunun visiblegibi çocuklarından birine sahip olabileceğiniz anlamına gelir :
Üst öğenin gizliyken :hover.
çöküş
Bu yalnızca tablo satırlarını ( ), satır gruplarını (benzer ), sütunları ( ), sütun gruplarını ( ) veya bu şekilde yapılmış öğeleri etkiler display.
Aksine hidden, bu değer tablo alt elemanını olduğu yerde bırakmadan gizler. Herhangi bir yerde kullanılırsa ancak bir tablo alt öğesi gibi davranır visibility: hidden.
Bununla ilgili o kadar çok tuhaflık var ki, nereden başlayacağınızı bilmek zor. Tıpkı meze olarak:
- Chrome / Safari bir satırı daraltacak, ancak kapladığı alan kalacak. Ve içindeki tablo hücrelerinin bir sınırı varsa, bu üst kenar boyunca tek bir sınıra dönüşür.
- Chrome / Safari bir sütun veya sütun grubunu daraltmayacaktır.
- Safari bir tablo hücresini daraltır (yanlış) ancak Chrome bunu yapmaz (doğru).
- Herhangi bir tarayıcıda, bir hücre daraltılmış bir sütunun içindeyse (aslında daralmış olsun ya da olmasın) o hücredeki metin görüntülenmeyecektir.
- Opera (WebKit öncesi), bir tablo hücresi dışında (doğru olan) her şeyi çökertir.
Dahası var, ama temelde: bunu asla kullanmayın.
miras almak
Varsayılan değer. Bu, basitçe öğenin, üst öğesinin değerini devralmasına neden olur.
Flexbox
visibility: collapse; Flexbox'ta da kullanılır ve daha iyi tanımlanmıştır.
Tarayıcı Desteği
Temel bilgiler, çöküşle ilgili tüm tuhaflıkları dikkate almamak:
| Hiç | Hiç | Hiç | 4+ | 4+ | Hiç | Hiç |
IE 7- collapseveya desteklemiyor inherit.