Web sayfalarında bir öğeyi gizlemek bazen gerekli olabilir. Bazen de gizlemeyi anlık (veya geçici) bir düzeltme için kullanırız. Web sayfalarında en yaygın öğe gizleme usullerini inceleyelim.
İnceleyeceklerimizden ilk ikisi CSS özellikleri olacak: display: none ve visibility: hidden
Çoğumuz bunları zaten kullanıyor olsak da, açıklığa kavuşturmak için özetleyelim.
.gizle {display: none}
.gosterme {visibility: hidden}.gizle sınıfına (display:none) sahip her bir öğe gizlenecek ve hiç yer kaplamayacaktır.
.gosterme sınıfına (visibility: hidden) sahip olan öğeler ise sadece görüntüden gizlenecek ama içerikleri için yer kaplayacaktır. Mesela bir öğe (paragraf olsun), yüksekliği 2 satır yer kaplıyorsa, visibility: hidden uygulandığında yüksekliği 2 paragraf olan bir boşluk oluşacaktır.
HTML özniteliği kullanmaya ne dersiniz?
CSS gizleme dışında, eğer ki uygunsa, çok daha basit bir yöntem de kullanabiliriz: hidden
<p hidden>Bu paragraf HTML boolean (mantıksal) özelliği ile gizlidir ve yer kaplamaz. </p>Çok basit görünüyor değil mi? hidden mantıksal bir HTML özelliğidir. Eğer bu mevcutsa, bir öğenin henüz veya artık alakalı olmadığını belirtir ve tarayıcılar bu öğeyi görüntülemeyecektir. HTML ikizi diyebileceğimiz display: none ile aynı şekilde çalışır.