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