Veb-səhifələrin inkişafı üçün işlədiyiniz kimi, bəzi səbəblərdən və ya digər səbəbdən maddələrin müəyyən sahələrini gizlətməyiniz üçün vaxtlar ola bilər. Əlbəttə ki, HTML- lərdən sorğularda maddələri silmək olar, amma nə olursa-olsun, kodda qalmasını istəyirsən, amma hər hansı səbəbdən brauzer ekranında görünməyəcəkdir (və biz səbəbləri nəzərdən keçirəcəyik). bunu qısa müddətdə). HTML-də bir element saxlamaq, ancaq ekran üçün gizlətmək üçün CSS-ə müraciət edərsiniz.
HTML-də olan bir elementi gizlətmək üçün ən geniş yayılmış iki yol "görünmə" və ya "görünürlük" üçün CSS xüsusiyyətlərini istifadə edir. Birinci baxışda bu iki xüsusiyyət eyni dərəcədə eyni şey kimi görünə bilər, ancaq hər birinin fərqində olduğunuz fərqlər var. Görünüş arasındakı fərqi nəzərdən keçirək: none və görünürlük: gizli.
Görünürlük
CSS xüsusiyyətini / dəyərini görünürlük istifadə edərək istifadə edin: Gizli bir elementi brauzerdən gizlədir. Ancaq gizli element hələ də məkanda yer tutur. Əsasən elementi görünməz hala gətirdi, amma hələ də yerində qalır və tək qaldıqları yerə qədər yer tutur.
Sayfanıza bir DIV yerleştirirseniz ve 100x100 piksel almaq üçün CSS'yi kullanacaksanız, görünürlük: Gizli özellik, DIV'nin ekranda gösterilmemesini sağlayacaktır, lakin aşağıdakı metnin, hala orada olduğu kimi davranması, 100x100 boşluq.
Dürüst, görünürlük mülkiyyəti çox tez-tez istifadə etdiyimiz bir şey deyil və əlbəttə ki, özü deyil. Biz də müəyyən bir element üçün istədiyimiz düzəlişə nail olmaq üçün yerləşdirmə kimi digər CSS xüsusiyyətlərindən istifadə edirsənsə, bu maddənin əvvəlcədən gizlədilməsi üçün görünürlüğünü istifadə edə bilərik, yalnız onu "hover" üzərinə geri çevirmək üçün istifadə edə bilərik. Bu, bu əmlakın mümkün bir istifadəsidir, amma yenə də hər hansı bir tezliyə dönməyimiz bir şey deyil.
Görünüş
Görünüş xüsusiyyətindən fərqli olaraq, elementi normal sənəd axını içərisində saxlayır, göstər: heç bir elementi sənəddən tamamilə götürmür. HTML üçün hələ də mənbə kodunda olsa da, heç bir yer tutmur. Çünki sənəd xaricindən çıxarılmış olmasıdır. Bütün niyyətlər və məqsədlər üçün maddə getdi. Niyyətlərinizdən asılı olaraq bu yaxşı bir şey və ya pis bir şey ola bilər. Bu əmlakı sui-istifadə etsəniz, səhifənizə də zərər verə bilər!
Bir səhifəni test edərkən tez-tez "display: none" istifadə edirik. Səhifənin digər sahələrini test edə bilməsi üçün bir az uzaqlaşmaq üçün bir sahəyə ehtiyacımız varsa, ekranı istifadə edə bilərik: bunun üçün heç biri yoxdur. Ancaq xatırlamaq lazımdır ki, elementin həmin saytın gerçək işə salınmasından əvvəl səhifəyə geri qaytarılması lazımdır. Bunun səbəbi, bu metoddan sənəd xaricindən çıxarılmış bir maddə, HTML formatında qalmasına baxmayaraq axtarış motorları və ya ekran oxucuları tərəfindən görünməməsi. Keçmişdə bu üsul axtarış motoru sıralamalarını təsir etməyə çalışmaq üçün qara rəngli bir üsul kimi istifadə edilmişdir, buna görə də göstərilməyən elementlər Google üçün bu yanaşmanın niyə istifadə olunduğunu araşdırmaq üçün qırmızı bayraq ola bilər.
Görünüşümüzün bir yolunu göstəririk: heç biri faydalı deyil və biz bunu canlı, istehsal veb saytlarında istifadə edərkən, bir ekran ölçüsü üçün istifadə edilə bilən elementləri olan, lakin başqalarına aid olmayan elementləri yarada bilən bir sayt qururuq. Ekranı istifadə edə bilərsiniz: heç bir elementi gizlətmək və daha sonra media sorguları ilə yenidən açın. Görünüşün məqbul istifadə olunmasıdır: heç biri, çünki bir şeyləri gizli səbəblərlə gizlətməyə çalışmırsınız, amma qanuni bir ehtiyacınız var.
Jennifer Krynin tərəfindən hazırlanan əsər. Jeremy Girard tərəfindən 3/3/17 tarixində redaktə edildi