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

Sıradaki ders: Yazdırma stilleri

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler