CSS VİSİBİLİTY NEDİR?

Visibility özelliği, iki farklı işleve sahiptir. Bir tablonun satırları ve sütunları gizler ve aynı zamanda diğer HTML elemanların görünür olup olmadığını belirler. Bu görünmezliği, elementin kendisini görünmez yaparken, websayfa üzerinde kapladığı alanı boş alan olarak göstererek gerçekleştirir.

Visibility: Aşağıda belirtilmiş dört değeri alır.

• visible : Nesne normal olarak gösterilir.
• hidden : Nesne görünmez olur. Fakat döküman üzerinde kapladığı alanda değişlik olmaz. Kapladığı alan boş olarak gösterilir.
• collapse :Tablonun tüm satır veya sütunu ekrandan kaldırılmasına neden olur. Bu değer satır, satır grubu, sütun ve sütun grubu elemanları için kullanılır.
• inherit :Görünürlük ( visibility ) öznitelik değeri ana öğeden miras alır.

Üç adet kutumuz olsun aşağıdaki gibi; İkinci kutuyu visibility ve display özelliği ile görünmez yapalım ne gibi sonuçlar üretecek.

Şimdi ikinci kutuyu visibility:hidden özelliği ile görünmez yapalım.

kutu2{visibility:hidden}
  

CSS Display ve Visibility Farkı Nedir ?

display: none Bir elemanı gizler ve sayfada yer teşkil etmez diğer elemanlar gizlenen eleman yokmuş gibi sayfada yer teşkil eder.

Şimdi ikinci kutuyu display:none özelliği ile görünmez yapalım.

CSS VİSİBİLİTY VE DİSPLAY ÖZELLİKLERİN SEO'YA ETKİSİ (GİZLİ METİN)

Css visibility ve display özelliğini JavaScript yardımıyla Animasyon yapma, Animasyonlu menü ve Tab menüler yapma şeklinde kullanabilirsiniz.

Gizli metin ve bağlantılar : Arama motorlarına sunduğunuz bilgiler kullanıcılara sunduğunuz bilgilerden farklı olduğundan, içeriğinizde metin veya bağlantı gizlemeniz sitenizin güvenilir olmadığının düşünülmesine neden olabilir. Bu sizin sitenizin Google dizininden çıkarılmasına yol açabilir ve arama sonuçlarında websiteniz görünmez. Metin (örnek: aşırı anahtar kelimeler) gizlemek için kullanılabilecek çeşitli yöntemlerden bazıları şunlardır:

• Beyaz zemin üzerinde beyaz metin kullanma
• Metni bir resmin arkasına koyma
• Metni ekranın dışına yerleştirmek için CSS kullanma
• Yazı tipi boyutunu 0’a ayarlama
• Yalnızca küçük bir karakter ekleyerek bir bağlantıyı gizleme; örneğin, bir paragrafın ortasına tire işareti ekleme

Sitenizi gizli metin veya bağlantı içerip içermediğini tespit etmek için incelerken sitenize gelen ziyaretçilerin kolayca göremeyeceği öğeleri arayın. Ziyaretçiler yerine yalnızca arama motorları için hazırlanmış metin veya bağlantılar var mı?

Arama motorlarının erişemeyeceği bir öğeyi ( Javascript, resim veya Flash dosyaları gibi ) açıklamak için metin kullanıyorsanız ekran okuyucu, mobil tarayıcı veya eklenti içermeyen tarayıcı kullanan ya da bağlantı hızı düşük olan ziyaretçilerin de bu içeriği göremeyeceğini unutmayın. Bu öğeler için açıklayıcı metin kullanmanız, sitenizin daha erişilebilir olmasını sağlayacaktır. Sitenizi erişilebilir hale getirmek için yararlanabileceğiniz ipuçlarından bazıları şunlardır:

Resimler : Açıklayıcı metin sağlamak için alt özelliğini kullanın. Ayrıca, resmin çevresinde ziyaretçilerin okuyabileceği bir başlık ve açıklayıcı metin kullanmanızı öneririz. Javascript : Javascript içeriğinin aynısını bir noscript etiketine yerleştirin. Bu yöntemi kullanırsanız, içeriğin, Javascript’tekinin aynısı olduğundan ve tarayıcılarında Javascript etkin olmayan ziyaretçilere de bu içeriğin gösterildiğinden emin olmalısınız. Videolar : Video hakkında HTML biçimindeki açıklayıcı metni ekleyin. Videonun yazıya dönüştürülmüş kopyasını da ekleyebilirsiniz. Google Gizli metin ve bağlantı kalite yönergeleri için TIKLAYINIZ.

p{display:none}
p:hover{display:block}