Görünürlük
Görünürlük (Visibility) CSS’de bir öğenin sayfada görüntülenip görüntülenmeyeceğini kontrol eden temel bir özelliktir. Ancak diğer bazı CSS özelliklerinden farklı olarak, öğe görünmez hale getirilse bile, sayfadaki yerini korur; yani öğe ekrandan kaybolur fakat tasarım akışı bozulmaz. Bu, bir ev inşa ederken bazı odaların perdelerini çekmek gibi düşünülebilir: oda görünmez hale gelir ama hâlâ yapının parçasıdır ve yer kaplamaya devam eder.
Kişisel web sitelerinde, henüz tamamlanmamış projeleri veya geçici içerikleri gizlemek için kullanılabilir. Bloglarda eski yazılar veya yorumlar, görünmez yapılabilir ve sayfa düzeni bozulmaz. E-ticaret sitelerinde stokta olmayan ürünleri geçici olarak gizlemek, haber sitelerinde belirli banner veya uyarıları yalnızca belirli zamanlarda göstermek mümkündür. Bu eğitimde okuyucu, Görünürlük ile öğelerin sayfa üzerindeki davranışlarını yönetmeyi, display ve opacity farklarını anlamayı ve interaktif kullanıcı deneyimleri oluşturmayı öğrenecektir. Yazıyı düzenlerken veya mektup yazarken nasıl boş alan bırakılması gerektiğini bilmek gibi, Görünürlük de sayfa düzeni için kritik bir araçtır.
Temel Örnek
css/* Basic CSS visibility example */
.kutu-goster {
visibility: visible; /* Element is fully visible */
}
.kutu-gizle {
visibility: hidden; /* Element is hidden but space is preserved */
}Yukarıdaki örnekte iki temel sınıf bulunuyor: .kutu-goster ve .kutu-gizle. .kutu-goster visibility: visible değeriyle öğeyi tamamen görünür yapar. .kutu-gizle visibility: hidden ile öğeyi gizler fakat sayfa akışındaki yerini korur.
Visibility’nin temel değerleri şunlardır: visible (görünür), hidden (gizli), collapse (tablo satırları ve sütunları için) ve inherit (ebeveyn öğeden miras alır). Söz dizimi oldukça basittir; öğe seçilir ve uygun değer atanır.
Bu özellik, geçici olarak içerik gizlemek için idealdir: blog yorumları, e-ticaret ürünleri veya haber başlıkları. Yeni başlayanlar için yaygın bir yanılgı, öğenin tamamen ortadan kalktığını düşünmektir. Oysa öğe hâlâ yer kaplamaktadır, display: none’dan farkı buradadır.
Pratik Örnek
css/* Practical CSS visibility example */
/* E-ticaret: stokta olmayan ürünleri gizle */
.urun-tukendi {
visibility: hidden;
opacity: 0.5; /* Semi-transparent to indicate hidden state */
}
/* Haber sitesi: belirli banner’ı başlangıçta gizle */
.banner-onemli {
visibility: hidden;
background-color: #FFD700;
padding: 15px;
text-align: center;
}Pratik örnekte, visibility gerçek dünyadaki uygulamalara bağlanmıştır. .urun-tukendi sınıfı, stokta olmayan ürünleri gizler ve opacity: 0.5 ile kullanıcıya yarı şeffaf bir görsel sunar; bu, bir odanın ışığını kısma metaforuyla açıklanabilir.
Haber sitesindeki .banner-onemli öğesi ise sayfa yüklendiğinde görünmezdir ve JavaScript ile gerektiğinde görünür hale getirilebilir. Böylece kullanıcı deneyimi bozulmadan, interaktif ve kontrollü içerik gösterimi sağlanır. Visibility ve JS kombinasyonu, layout bozulmadan dinamik arayüzler yaratmak için idealdir.
En iyi uygulamalar ve yaygın hatalar:
En iyi uygulamalar:
- Mobile-first tasarım yaklaşımı ile tüm cihazlarda uyumlu görünürlük sağlamak.
- Geçici içerik gizlemek için display yerine visibility kullanmak.
- Anlamlı ve organize sınıf isimleri kullanmak, bakım kolaylığı sağlar.
-
Öğeleri görünür/gizli yaparken CSS geçişleri (transition) kullanarak görselliği artırmak.
Yaygın hatalar: -
Visibility yerine sürekli display kullanmak, layout karışıklığı yaratabilir.
- CSS spesifikasyon hataları, kuralların uygulanmamasına yol açabilir.
- Responsive tasarım göz ardı edilirse farklı ekranlarda sorun oluşabilir.
- Gereksiz override kullanımı, hata ayıklamayı zorlaştırır.
Hata ayıklama için DevTools kullanarak visibility, display ve opacity kombinasyonları incelenmelidir.
📊 Hızlı Referans
| Property/Method | Description | Example |
|---|---|---|
| visibility | Element visibility control without removing from layout | visibility: visible; |
| visibility | Hide element but preserve its space | visibility: hidden; |
| visibility | Collapse table rows or columns | visibility: collapse; |
| inherit | Inherit visibility from parent | visibility: inherit; |
| opacity | Control element transparency | opacity: 0.5; |
Bu eğitimde Görünürlük özelliğini detaylıca inceledik. Öğelerin sayfa üzerindeki davranışlarını yönetmeyi, gerçek dünyadaki uygulamalara bağlamayı ve interaktif kullanıcı deneyimleri oluşturmayı öğrendik.
Bir sonraki adımlar arasında display, opacity, transitions ve animations üzerinde çalışmak yer alabilir. HTML ve JavaScript ile entegrasyon sayesinde, görünürlüğü dinamik olarak kontrol etmek, sayfa tasarımını korumak ve kullanıcı deneyimini artırmak mümkün olacaktır. Düzenli pratik ve gerçek proje uygulamaları bilgiyi pekiştirir.
🧠 Bilginizi Test Edin
Bilginizi Test Edin
Bu konudaki anlayışınızı pratik sorularla test edin.
📝 Talimatlar
- Her soruyu dikkatle okuyun
- Her soru için en iyi cevabı seçin
- Quiz'i istediğiniz kadar tekrar alabilirsiniz
- İlerlemeniz üstte gösterilecek