Gizleme ve gösterme
display: none ile öğeleri duyarlı olarak gizlemeyi öğrenirsin.
display: none ile öğe gizleme
display: none bildirimi bir öğeyi sayfa düzeninden tamamen kaldırır. Yer kaplamaz, erişilebilirlik araçları tarafından görülmez, tıklanamaz. Bunu media query ile birleştirerek bazı öğeleri yalnızca dar ya da geniş ekranlarda gösterirsin.
Bu, duyarlı düzende en sık kullanılan gizleme yöntemidir. Mobilde gereksiz bir yan menüyü, masaüstünde ise yalnızca mobilde işe yarayan hamburger düğmeyi gizlemek için idealdir.
Dar ekranda gizleme
Dar ekranda bir öğeyi gizlemek istersen temel stillerde display: none yazıp, geniş ekranda @media (min-width: 768px) bloğunda display: block ile geri getirirsin. Bu, mobil öncelikli yaklaşımla uyumludur: mobilde az HTML görünür, masaüstünde ek öğeler açılır.
Örneğin bir magazin yan menüsü mobilde gizli kalır; masaüstünde açılır.
Mobilde göster, masaüstünde gizle
Tersi de yaygındır: hamburger menü düğmesi yalnızca dar ekranda görünmeli. Temel stillerde .menu-toggle { display: block; } yazıp @media (min-width: 768px) içinde display: none yaparsın.
Böylece düğme mobilde görünür, masaüstünde yer kaplamaz. Mobil öncelikli düzende ilk değer her zaman mobil görünümü yansıtır.
Uygulama Menü düğmesini yalnızca masaüstünde göster
Mobil öncelikli düzende .menu-toggle düğmesi mobilde gizli kalsın, 768 piksel ve üzerinde geri gelsin. Temel stillerde display: none, @media (min-width: 768px) bloğunda ise display: block yaz.
Örnek çözümü göster
.menu-toggle {
display: none;
}
@media (min-width: 768px) {
.menu-toggle {
display: block;
}
}Kendini test et
-
display: none ile visibility: hidden arasındaki fark nedir?
.a { display: none; } .b { visibility: hidden; }- İkisi de aynıdır
- visibility daha hızlıdır
- display yer kaplamaz, visibility yer kaplar
- display yalnızca yazdırırken çalışır
Cevabı göster
display yer kaplamaz, visibility yer kaplar — Doğru. display: none öğeyi düzenden kaldırır; visibility: hidden yeri korur ama öğeyi görünmez yapar.
-
Yan menüyü mobilde gizle
.sidebar { display: ____; } @media (min-width: 768px) { .sidebar { display: block; } }Cevabı göster
.sidebar { display: none; } @media (min-width: 768px) { .sidebar { display: block; } } -
Senaryoyu doğru bildirimle eşleştir
- Dar ekranda gizle
- display: none
- Geniş ekranda göster
- display: block
- Yalnızca yazdır
- @media print
- Yer kapla ama görünme
- visibility: hidden