Web sayfalarının geliştirilmesinde çalışırken, belirli bir alanın belirli alanlarını "gizlemek" zorunda olduğunuz zamanlar olabilir. Tabi ki, HTML işaretlemesinden gelen soruları (veya kalemleri) kaldırabilirsiniz, ancak ne olursa olsun kodda kalmasını istiyorsanız, ancak tarayıcı ekranında hangi sebepten olursa olsun görüntülememelisiniz (ve bunun nedenlerini inceleyeceğiz. bunu kısa bir süre içinde yapın). Bir öğeyi HTML’nizde tutmak, ancak görüntülenmek üzere gizlemek için CSS’ye yönlendirilirsiniz.
HTML'de bulunan bir öğeyi gizlemenin en yaygın iki yolu, "görüntü" veya "görünürlük" için CSS özelliklerini kullanmaktadır. İlk bakışta, bu iki özellik büyük ölçüde aynı şeyi yapıyor gibi görünebilir, ancak bunların her birinin bilmeniz gereken farklı farklılıkları vardır. Ekranlar arasındaki farklara bakalım: hiçbiri ve görünürlük: gizli.
görünürlük
Görünürlüğün CSS özelliğini / değer çiftini kullanarak: gizli bir öğeyi tarayıcıdan gizler. Ancak, bu gizli elemanın yerleşimde hala yer kaplıyor. Temelde öğeyi görünmez yaptığınız gibi, ama hala yerinde kalıyor ve tek başına bırakılmış olabileceği alanı kaplıyor.
Sayfanıza bir DIV yerleştirirseniz ve boyutlarını 100x100 piksele çıkarmak için CSS kullanırsanız, görünürlük: gizli özellik DIV'yi ekranda göstermez, ancak izleyen metin hala orada olduğu gibi davranır. 100x100 boşluk.
Dürüst olmak gerekirse, görünürlük özelliği çok sık kullandığımız bir şey değildir ve kesinlikle kendi başına değildir. Belirli bir öğe için istediğimiz düzeni elde etmek için konumlandırma gibi diğer CSS özelliklerini kullanıyorsak, bu öğeyi başlangıçta gizlemek için görünürlüğü kullanabiliriz. Bu, bu mülkün olası bir kullanımıdır, ancak yine de, herhangi bir frekansla döndüğümüz bir şey değildir.
Görüntüle
Normal belge akışında bir öğe bırakan görünürlük özelliğinden farklı olarak, görüntü: hiçbiri öğeyi tamamen belgeden kaldırır. HTML kodu hala kaynak kodda olsa bile, herhangi bir yer almaz. Bunun nedeni, aslında belge akışından kaldırılmasıdır. Tüm niyet ve amaçlar için, öğe gitti. Bu, niyetinizin ne olduğuna bağlı olarak iyi bir şey ya da kötü bir şey olabilir. Bu özelliği kötüye kullanırsanız sayfanıza da zarar verebilir!
Bir sayfayı test ederken sık sık "display: none" kullanırız. Sayfanın diğer alanlarını test edebilmemiz için bir süre "gitmemiz" gereken bir alana ihtiyacımız varsa, ekranı kullanabiliriz: bunun için yok. Bununla birlikte, hatırlanması gereken şey, öğenin, o sitenin gerçek lansmanından önce sayfaya geri döndürülmesidir. Bunun nedeni, bu yöntemde belge akışından kaldırılan bir öğenin, HTML işaretlemesinde kalmasına rağmen, arama motorları veya ekran okuyucuları tarafından görülmemesidir. Geçmişte, bu yöntem arama motoru sıralamalarını etkilemeye çalışmak için siyah şapka yöntemi olarak kullanıldı. Bu nedenle, görüntülenmeyen öğeler Google'ın bu yaklaşımın neden kullanıldığına bakması için kırmızı bir bayrak olabilir.
Görüntülemenin bir yolu vardır: hiçbiri yararlı olmak, ve canlı olarak kullandığımız yerde, üretim web siteleri, bir ekran boyutu için mevcut olan ancak başkaları için olmayan öğeler barındıran duyarlı bir site oluşturduğumuz zamandır. Ekranı kullanabilirsiniz: Bu öğeyi gizlemek için hiçbiri ve daha sonra medya sorguları ile tekrar açın. Bu, ekranın kabul edilebilir bir kullanımıdır: hiçbiri, çünkü haksız sebeplerden ötürü hiçbir şeyi saklamaya çalışmıyorsunuz, ancak bunu yapmak için meşru bir gereksiniminiz var.
Jennifer Krynin tarafından yazılmış orijinal makale. 3/3/17 tarihinde Jeremy Girard tarafından düzenlendi