CSS “visibility” Özelliği Kullanımı

Bu derste, CSS “visibility” özelliği hakkında detaylı bir anlatım yapacağız. Bu özellik, web tasarımında öğeleri nasıl görüntüleyeceğimiz ya da gizleyeceğimiz konusunda bize esneklik sağlar.

CSS “visibility”

CSS visibility özelliği, bir web sayfasındaki öğelerin görünürlüğünü kontrol etmek için kullanılır. Bu özellik, genellikle bir öğeyi göstermek veya saklamak istediğimizde, ancak sayfa düzenindeki varlığını etkilemeden bu işlemi gerçekleştirmek istediğimizde tercih edilir. Alabileceği başlıca değerler ise şunlardır:

1. visible: Öğe görünür. Bu varsayılan değerdir.
2. hidden: Öğe gizlenir. Ancak burada dikkat etmemiz gereken bir nokta, “hidden” değeriyle gizlenen öğenin yerinin sayfa düzeninde boş bırakılmadığıdır. Yani, öğe sanki oradaymış gibi yer kaplar, sadece gözükmez.
3. collapse: Genellikle tablo satırları (tr) veya sütunları (col) için kullanılır. Eğer bir tablo hücresine (td veya th) uygulanırsa, “hidden” değeriyle aynı etkiye sahip olur.

Bazı durumlarda, ilgili öğeyi sadece gizlemek istemeyebiliriz. Yani ilgili öğenin sayfa üzerinde yer kaplamaya devam etmesini istemiyor, tabiri cazise yok etmek istiyorsak “display: none;” kullanırız. Böylece öğe hem görünmez olur, hem de sayfa üzerinde herhangi bir yer kaplamaz.

See the Pen CSS Visible by 1kodum (@1kodum) on CodePen.

Yukarıdaki örnekte beş farklı kutumuz var. Bu kutuların her biri, farklı bir arka plan rengine ve özelliğe sahip. “Default” adlı ilk kutumuz, herhangi bir ek özellik olmadan doğal durumda gösteriliyor. Ardından “Visibility Visible” ve “Visibility Hidden” adlı kutularımız var. Bu iki kutu aynı renkte (açık mavi) olmasına rağmen, “Visibility Hidden” özelliğiyle biçimlendirilmiş olan kutumuz tamamen görünmez hale getirilmiş. Ancak, bu kutu sayfa üzerinde yer kaplamaya devam ediyor, yani yerini koruyor.

“Display None” adlı kutuya gelindiğinde, bu kutuyu tamamen devre dışı bırakıyoruz. Bu kutu hem görünmez hale geliyor hem de sayfa üzerinde hiçbir yer kaplamıyor. Bu nedenle, diğer kutular arasında herhangi bir boşluk oluşturmuyor. Son olarak, “Display Block” adlı kutumuz, kırmızımsı bir renkte ve normal bir kutu olarak görüntüleniyor. Eğer, “display: none;” kodunu devre dışı bırakırsanız var olacağı için yerini alan “Display Block” adlı kutuyu bir aşağı indirecektir.

Özetle, “visibility: hidden” ve “display: none” arasındaki temel fark şu; “visibility: hidden” ile bir öğeyi gizlediğimizde, öğe görünmez hale gelir ama sayfada yer kaplamaya devam eder. Ancak “display: none” ile bir öğeyi gizlediğimizde, bu öğe hem görünmez olur hem de sayfa üzerinde yer kaplamaz.