Display none ve visibility

display: none ile visibility: hidden farkını öğrenirsin.

display: none ile tam gizleme

display: none bildirimi bir ögeyi belgeden tamamen kaldırır. Öge ekranda görünmez, yer kaplamaz, sayfa düzeni onu yok sayar. Erişilebilirlik açısından ekran okuyucular da çoğu zaman bu ögeyi atlar.

Bu yüzden display: none geçici olarak gizlenen bölümler için kullanışlıdır. Örneğin bir açılır menü kapalıyken display: none alır; açıldığında display: block'a döner.

visibility: hidden ile yer tutan gizleme

visibility: hidden da ögeyi gizler ama farklı biçimde: öge görünmez olur ama belgedeki yerini korur. Çevresindeki ögeler onun varlığına göre dizilişlerini sürdürür; boşluk kalır.

Bu ayrım önemlidir: display: none yer kaplamazken, visibility: hidden boş bir kutu bırakır. Hangisini seçeceğin, gizlenen ögenin yerini tutmak isteyip istemediğine bağlıdır.

Hangisini ne zaman kullanmalısın?

Bir ögeyi gizleyip yerini boş bırakmak istiyorsan visibility: hidden kullan. Örneğin bir kartın bir yüzü geçici olarak kaybolacak ama çevresi kaymayacaksa bu uygundur.

Ama ögenin yer kaplamasını tamamen istemiyorsan display: none seç. Açılır menüler, sekmeler ve modal pencereler kapalıyken bu değeri alır; açıldıklarında eski değerine döner.

Uygulama Modal pencereyi gizle

Bir .modal sınıf seçicisi yaz ve display: none tanımla. Böylece modal pencere varsayılan olarak kapalı kalır, yer kaplamaz.

Örnek çözümü göster

/* modal pencereyi gizle */
.modal {
  display: none;
}

Kendini test et

display: none ne yapar?
```
.hidden {
  display: none;
}
```
- Ögeyi gizler ama yine de yer kaplar
- Ögeyi sayfanın sağına taşır
- Ögeyi belgeden kaldırır; yer kaplamaz
- Ögeyi saydam yapar
Cevabı göster

Ögeyi belgeden kaldırır; yer kaplamaz — Doğru. display: none ögeyi belgeden tamamen kaldırır; yer kaplamaz.

Ögeyi gizle, yerini koru

.ghost {
  ____;
}

Cevabı göster

.ghost {
  visibility: hidden;
}

Bildirimi etkisine eşle

display: none

Yer kaplamaz
visibility: hidden

Yerini korur
display: block

Yeni satırda başlar

Sıradaki ders: Position static ve relative

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler