CSS Layout Görüntüleme Biçimleri (display ve visibility)

Her Şeyden Bir Parça

CSS Layout Görüntüleme Biçimleri (display ve visibility)

 

CSS’de elemanların görünürlüklerini kontrol etmek için kullanılabilecek iki property bulunmaktadır. Bu property’lerden “display” bir elemanın nasıl görüneceğini kontrol ederken, “visibility” ise bir elemanın görünür mü olacağını yoksa gizleneceğini belirtmek için kullanılır.

 

      1. Display

Block-level elemanlar için “display: block”, inline elemanlar için de “display: inline” şeklinde kullanılarak ilgili elemanlar görünür kılınabilir ya da “display: none” şeklinde kullanılarak ilgili eleman gizlenebilir. Ayrıca istenirse varsayılan olarak “block-level” olan elemanlar override yapılarak “inline” eleman haline dönüştürülebilir ya da tam tersi şekilde “inline” elemanlar “block-level” haline dönüştürülebilir. “display” property’si bunlar dışında “initial”, “inherit” gibi değerler de alabilir.

 

     2. Visibility

Tüm elamanlar için “visibility: visible” şeklinde kullanılarak görünür kılınabilir ya da “visibility: hidden” şeklinde kullanılarak ilgili eleman gizlenebilir. “visibility” property’si ayrıca “collapse”, “initial” ve “inherit” gibi değerler de alabilir.

 

     3. “display: none” ve “visibility: hidden” Karşılaştırması

Temelde “display: none” da “visibility: hidden” da belli bir içeriği gizlemeye yarar ancak aralarında temel ve çok önemli bir fark vardır. Bir HTML elemanı “display: none” ile gizlendiğinde o elemanın web sayfasında kapladığı yer de silinerek sonraki elemanlar ona göre yerleştirilirken “visibility: hidden” kullanıldığında ise ilgili HTML elemanı gizlenmiş olmasına rağmen web sayfasında kapladığı yer halen ortadan kalkmaz ve boş bir şekilde durmaya devam eder.

 

Şekil 1: “display: none” ve “visibilty: hidden” Karşılaştırması

 

     Kaynaklar:

http://www.w3schools.com/cssref/pr_class_display.asp

http://www.w3schools.com/css/css_display_visibility.asp

 

Bir cevap yazın