Може да има случаи, когато работите по разработването на уеб страници, където трябва да скриете определени отрасли или елементи по една или друга причина. Можете просто да изтриете тези елементи в HTML маркировката. Но има моменти, когато е необходимо те да останат в кода, но да не се показват в прозореца на браузъра по някаква причина. За да запазите елемент в HTML, но за да го направите невидим, трябва да разгледате CSS инструментите.
Как да скрием елементи, използвайки CSS
Има два най-често срещани начина за скриване на елемент, който е в HTML кода. Един от тях е да се използват свойствата на дисплея или видимостта. На пръв поглед тези две свойства могат да изглеждат еднакви, но всеки от тях има свои характеристики, които трябва да знаете. Нека разгледаме по-отблизо разликите между видимостта: скрита и дисплея: none.
Свойство за промяна на видимостта
Първата опция скрива елемент от браузъра, но тази скрита част от кода все още заема място на уеб страницата. С други думи, той прави един елемент невидим, но все още остава на място и заема мястото, което заема, ако е било видимо. Ако поставите div маркера на страницата и използвате CSS, за да зададете неговия размер, видимостта: скритото свойство ще направи блока да не се появи в прозореца на браузъра, а текстът след него ще се държи така, сякаш този блок все още присъства. Това е така, защото елементът остава в потока. Собствеността използва видимостта доста рядко иобикновено с други настройки. Ако приложите и други CSS конфигурации, като например позициониране, можете първо да го използвате, за да скриете елемент, но да можете да го завъртите обратно до позицията на курсора. Това е една от възможните употреби на видимостта, но не е адресирана към него твърде често.
Дисплей: няма свойство и използването му в CSS
За разлика от свойството за видимост, което оставя елемент в потока, второто свойство CSS, използвано за скриване на елементи, ви позволява да скриете блока, както ако не , За div, дисплеят none работи така, сякаш напълно премахва елемент от документа. Той не заема никакво пространство, въпреки че в изходния HTML код все още остава. Елементът няма да се появи на сайта Ви и няма да има доказателства за неговото съществуване. С това, че околните елементи ще го разглеждат като празно пространство и смяна, в зависимост от собствените си свойства. Това е така, защото изпада от потока. Това свойство може да се използва успешно или не, в зависимост от намеренията на плотер. Във всеки случай не бива да се злоупотребява.
Използване на свойствата на оформлението
Плотерите често използват дисплея: няма функция при тестване на страница. Това обикновено се случва, ако някой район трябва да бъде скрит за известно време, за да могат да бъдат тествани други области на страницата. В този случай използвайте дисплей: none. Важно е да запомните, че елементът трябва да бъде върнат на страницата преди товавсъщност стартирането на сайта. Факт е, че елемент, който се изтрива от потока чрез този метод, става невидим за търсачките и екранните четци, дори ако продължава да остава в HTML маркировката.
В миналото този метод се използва, за да се опита да повлияе на рейтингите в търсачките. Но сега не показваните елементи могат да бъдат маркирани с червен флаг на Google, за да се разбере защо се използва този подход. Един от начините за използване на дисплея: никой не е да се създават сайтове за адаптивен дизайн. Когато пишете код за такива уеб страници, често е необходимо да създавате елементи, които са видими само в конкретно решение, но са скрити за други опции. Можете да използвате display: none в CSS, за да скриете този елемент и след това да го активирате по-късно. Това е приемливо използване на този имот, защото не може да се подозира инсталатора в опит да скрие нещо, за да повлияе на класирането в търсачките.
Показване на свойствата на javascript
Display property е важно свойство на CSS, но обикновено използва javascript, за да скрива и показва елементи, без да ги изтрива и да ги създава отново. За да превключите дисплея на елемента div, можете да използвате не само CSS, но и javascript. В този случай се използва следният код :. Друга възможност е да използвате библиотеката jQuery. Подобно на свойствата на CSS дисплея: none за div, методът jQuery "hide () също скрива избраните елементи.части от кода няма да се показват изобщо.
Четене на екрана и видимост на елементи
Четец на екрани, така наречените "читатели", променят поведението си, когато открият в съдържанието елемент, скрит от дисплея: няма. Скритото съдържание по правило не се отчита на читателите, освен ако не съдържа атрибути на етикетите. Има ситуации, в които разработчиците може да искат да бъдат скрити визуално, но отворени за потребителите на екранния четец. Например, дизайнът може да изисква двуцифрени фрази като "повече", когато контекстът е визуално очевиден, но може да бъде загубен за потребителите на екранния четец. За да заобиколите това, разработчикът може да направи следното: напишете CSS c блок на дисплея или не и добавете маркировка с описание на този елемент.
Проблеми с екранни четци
Проблемът е, че скриването на съдържание от дисплея: никой също не скрива съдържанието от читателите от екрана. За да заобиколят това, разработчиците започнаха да позиционират съдържанието, използвайки няколко метода, например, абсолютното позициониране с посочената ширина и височина на елемента и препълването на собствеността: скрито. Когато се използва описателната маркировка в този случай, контекстната информация не се показва на екрана, а се обявява на потребителите на екранния четец. Но ако тествате сайта за наличност, най-често има елементи, които не са правилно скрити с помощта на дисплея: none property. Най-често срещаният пример са връзките, предназначени да помогнат на потребителите на клавиатурата ичетци на екрани. Иронията е, че тези добри намерения изчезват и правят връзките напразни поради използването на дисплей: няма.
Основни правила за решаване на въпроси, свързани с достъпността
Поради проблеми с търсачките и различни възприятия за информация, внимавайте, когато използвате дисплей: няма. Това не означава, че изобщо не трябва да го използвате. Този имот има много качества, които го правят практически необходим за някои операции.
Ето някои правила, които трябва да помогнат да се определи кога и как да се скрият визуално елементите:
Ако искате да скриете визуално съдържанието, но да го запазите за читателите, не го използвайте за показване на текст: няма.
Ако съдържанието, което криете, може да бъде полезно само за потребители, които използват екранни четци, помислете дали да не го скриете. Ако все още решите да го скриете, уверете се, че тя се вижда при фокусиране.
Ако искате да скриете нещо временно и да го покажете като резултат от взаимодействие с потребителя, покажете: никой не може да бъде точно това, от което имате нужда. Важен фактор в този случай е, че тъй като колкото по-бързо използвате javascript, за да направите съдържанието видимо, като промените стойността на свойството на дисплея, трябва да имате предвид, че ще е необходимо потребителите, които нямат JS да го скрият.
При визуализирането на визуализацията на съдържанието всичко става ясно, че дисплеят: никой не скрива съдържанието от всеки, който използва CSS за браузъра.
