Показване Няма - какво е това? Свойства и употреба

Може да има случаи, когато работите по разработването на уеб страници, където трябва да скриете определени области или елементи по една или друга причина. Можете просто да изтриете тези елементи в HTML маркировката. Но има случаи, когато е необходимо те да останат в кода, но да не се показват в прозореца на браузъра по някаква причина. За да запазите елемента във вашия HTML, но в същото време да го направите невидим, трябва да се обърнете към средствата на CSS.

Как да скрием елементи с CSS

Има два общи начина да скриете елемент, който е в HTML кода. Един от тях е да се използват свойствата на дисплея или видимостта. На пръв поглед тези две свойства могат да изглеждат еднакви, но всеки от тях има свои характеристики, за които трябва да сте наясно. Нека разгледаме по-отблизо разликите между видимостта: скрита и дисплея: none.

Видимост собственост

Първата опция скрива елемента от браузъра, но тази скрита част от кода все още заема място на уеб страницата. С други думи, тя прави елемента невидим, но все още остава на място и заема пространството, което би заемало, ако е било видимо. Ако поставите div маркер на страница и използвате CSS, за да зададете неговия размер, видимостта: скрито свойство ще направи блока да не се показва в прозореца на браузъра, но текстът след него ще се държи така, сякаш блокът все още присъства.

Това е така, защото елементът остава в потока. Свойството за видимост се използва много рядко и обикновено заедно с всички други настройки. Ако използвате и други CSS конфигурации, като например позициониране, първо можете да го използвате, за да скриете елемента, но за да можете да го върнете на мястото, когато задържите курсора. Това е едно от възможните употреби на видимостта, но не е достъпно твърде често.

Дисплеят: none property и неговото използване в CSS

За разлика от свойството visibility, което оставя елемент в потока, второто свойство CSS, което се използва за скриване на елементи, ви позволява да скриете блок, както ако не е там. За div, дисплеят none работи, както ако напълно премахва този елемент от документа. Той не заема място, въпреки че все още остава в HTML кода. Елементът няма да се появи на сайта Ви и няма да има видими доказателства за съществуването му. Като се има предвид, че околните елементи ще се считат за празно пространство и се движат, в зависимост от техните собствени свойства. Това е така, защото изпада от потока. Това свойство може да се прилага успешно или не, в зависимост от намеренията на производителя. Във всеки случай те не трябва да бъдат злоупотребявани.

Използване на имота по време на оформлението

Дизайнерите на оформлението често използват дисплея: none property при тестване на страница. Това обикновено се случва, ако трябва да скриете област за известно време, така че да можете да тествате други области на страницата. В този случай използвайте дисплей: none. Важно е да запомните, че елементът трябва да бъде върнат на страницата, преди сайтът да се стартира. Въпросът е, че елемент, който се премахва от потока, използвайки този метод, става невидим за търсачките и екранните четци, дори ако той продължава да остава в HTML маркировката.

В миналото този метод беше използван, за да се опита да повлияе на класирането на търсачките. Но сега не показваните елементи могат да бъдат маркирани с червен флаг на Google, за да се разбере защо се използва този подход. Един от начините да използвате дисплея: никой с полза не създава уеб сайтове с отзивчив дизайн. Когато пишете код за такива уеб страници, често е необходимо да създавате елементи, които са налични за показване само в определена резолюция, но са скрити за други опции. Можете да използвате display: none в CSS, за да скриете този елемент и след това да го включите отново по-късно. Това е приемливо използване на този имот, защото е невъзможно да се подозира издател в опит да се скрие нещо заради влиянието върху търсачките.

Съпоставяне на свойствата на JavaScript

Свойството за показване е важно свойство на CSS, но също така често се използва в JavaScript за скриване и показване на елементи без изтриване и повторно създаване. За да превключите дисплея на елемента div, можете да използвате не само CSS, но и JavaScript. В този случай се използва следният код:

, Друга възможност е да използвате библиотеката jQuery. Подобно на CSS дисплея: none property за div, jQuery "hide () метода също скрива избраните елементи. Скритите части на кода няма да бъдат изведени изобщо.

Четец на екрани и видимост на елемент

Екранните четци, така наречените „читатели“, променят поведението си, когато открият в съдържанието елемент, който е скрит с дисплей: none. Скритото съдържание, като правило, не информира читателите за себе си, ако атрибутите на етикета не са регистрирани в него. Има ситуации, в които разработчиците може да искат да бъдат скрити визуално, но да се разкриват на потребителите на екранните четци. Например, дизайнът може да изисква двусмислени фрази, като „повече“, когато контекстът е визуално очевиден, но може да бъде загубен за потребителите на екранните четци. За да преодолее това, разработчикът може да направи следното: да напише CSS правило с блок за показване или без и да добави маркиране с описание на този елемент.

Проблеми с екранните четци

Проблемът е, че скриването на съдържание от дисплея: никой също не скрива съдържание от потребители, които четат от екрана. За да заобиколят това, разработчиците започнаха да позиционират съдържанието, използвайки няколко метода, например абсолютното позициониране с посочената ширина и височина на елемента и препълването: скрито свойство. Когато използвате маркиране с описание в този случай, контекстната информация не се показва на екрана, а се обявява на потребителите на екранния четец. Но ако проверявате сайтовете за достъпност, най-често има елементи, които са неправилно скрити с помощта на дисплея: none property. Най-често срещаните примери са връзките, предназначени да помагат на потребителите на клавиатурата и на екранния четец. Иронията е, че тези добри намерения изчезват и правят връзките безполезни поради използването на дисплей: няма.

Основни правила за решаване на проблеми с достъпността

Поради проблеми с търсачките и различни опции за възприемане на информация, трябва да внимавате, когато използвате дисплей: none. Това не означава, че изобщо не трябва да го използвате. Този имот има много качества, които го правят почти незаменим за някои операции.

Ето няколко правила, които трябва да помогнат да се определи кога и как да се скрият визуално елементите:

1. Ако трябва да скриете визуално съдържанието, но го оставите достъпно за читателски програми, не използвайте за показване на текст: none.
2. Ако съдържанието, което криете, може да бъде полезно само за потребители, които използват екранни четци, помислете дали искате да го скриете. Ако все още решите да го скриете, уверете се, че тя се вижда при фокусирането.
3. Ако искате да скриете нещо временно и да го покажете като резултат от взаимодействие с потребителя, покажете: никой не може да бъде точно това, от което имате нужда. Важен фактор в този случай е, че тъй като по-скоро ще използвате JavaScript, за да направите съдържанието видимо, като промените стойността на свойството за показване, трябва да имате предвид, че ще трябва да го скриете и за потребители, които нямат JS.

Когато работите с визуализацията на съдържанието, всичко се свежда до осъзнаването, че дисплеят: никой не скрива съдържание от всеки, който използва CSS за браузъра.