CSS'deki empty-cellsözellik, üzerlerinde kenarlıkların ve arka planların görüntülenip görüntülenmeyeceğini belirlemek amacıyla boş tablo hücrelerini seçer. Başka bir deyişle, tarayıcıya bir tablo hücresinin etrafına kenarlık çizip çizmeyeceğini veya hücre içerik içermediğinde arka planı doldurup çizmeyeceğini söyler. Bu visibility, boş tablo hücrelerine bir özellik uygulamaya benzer .
table ( empty-cells: show; )Değerler
empty-cellsÖzellik iki temel değer vardır:
show: boş bir hücrede bir kenarlık ve arka plan görüntüler.hide: boş bir hücrede kenarlık veya arka plan görüntülemez.
Aşağıdaki genel değerler de kabul edilir:
inherit: ana elemanın özellik değerini devralır.initial: özellik için tanımlanan varsayılan değeri kullanın.unset: özelliği miras alınan değerine sıfırlar.
Ne Zaman Kullanılmalı
Bu ilginç bir özelliktir çünkü CSS'ye bir tablonun içindeki içerik için HTML işaretlemesini kontrol etme ve buna göre yanıt verme yeteneği verir. Normalde CSS'yi dinamik bir dil olarak düşünmüyoruz, ancak bu oldukça yakın olduğu bir örnek.
Bir empty-cellstablonun boş veri noktaları içerip içermeyeceğini bilmediğiniz ve bunları gizlemeye karar verdiğiniz bir durum için iyi bir kullanım durumu olabilir. Tablolar eskiden web sayfası düzenlerinin fiili olarak oluşturulma şekliydi, bu nedenle tablolar sunum için kullanıldığında veya öğelerin display: tableözelliği içerdiği durumlarda öğeleri göstermek ve gizlemek için yararlı bir araç olabilir .
Demo
CodePen'de CSS-Tricks (@ css-tricks) tarafından Kalem mPLVzB'ye bakın.
İlişkili
displayvisibility:empty
Daha fazla bilgi
- CSS Seviye 2 spesifikasyonu
- MDN referansı
- CodePen'de SitePoint demosu
- CodePen'de tablo katmanları ve şeffaflık demosu
Tarayıcı Desteği
| Krom | Safari | Firefox | Opera | IE | Android | iOS |
|---|---|---|---|---|---|---|
| 1.0 | 1.2 | 1.1 | 4.0 | 8.0 | 1.0 | 3.1 |