visibility: visible ( hidden ) | Как сделать HTML элемент невидимым | CSS
Чем отличаются visibility: hidden; от display: none; и opacity: 0;
Рассмотрим в чём различие нижеперечисленных свойств, какое из них лучше подходит для того, чтобы сделать невидимый блок.
Демонстрация
Занимаемое пространство
Видимость потомков
Доступность
Поддержка transition и animation
div @keyframes animaciya < 80%, 100% >
С opacity: 0; элемент полностью прозрачен. Дочерние теги, как и сам родитель, доступны, они, например, могут получать фокус.
При display: none; веб-страница формируется так, словно элемента вместе с его содержимым нет.
Как сделать текст невидимым на HTML странице
И Google, и Яндекс наказывают за текст, который пользователи никогда не увидят. У них есть свои браузеры, а значит технология, которая позволяет выявить это. То есть нужно подумать каким образом и в каком случае скрытый текст будет виден посетителю веб-проекта, например, в результате нажатия на кнопку (см. как сделать такую кнопку) или в виде всплывающего сообщения.
Я так и не поняла приемлема ли ситуация, когда человек видит логотип, а поисковый робот надпись с названием сайта:
Следует учесть, что скрытый текст не всегда добавляется с целью обмана. Например, если на вашем сайте имеется контент, к которому сложно получить доступ поисковым системам (JavaScript, изображения, Flash-файлы и т. п.), вы можете добавить текстовое описание для этих элементов, чтобы сделать сайт более удобным для индексирования. [support.google.com]
Помимо способов, описанных выше, текст можно сделать прозрачным. Его можно выделить:
Или очень маленьким:
visibility: collapse; для таблицы и нет. Есть ли разница?
От автора: мы не придаем большого значения скрытию HTML-элементов через CSS; мы делаем это инстинктивно, пока не узнаем об аспекте доступности и о принципиальном отличие различных методов.
Это отличие состоит в том, чтобы полностью скрыть элемент и его содержимое или скрыть элемент, но отобразить его содержимое для чтения с экрана. Мы знаем, что скрытие элемента CSS связано не только с визуальным аспектом, но и с доступностью. Мы можем создавать вещи, которые должны быть невидимы для глаз, но видимы для экранных дикторов.
Конечно, есть и другие области, где важны различия между методами скрытия, например, в случае анимации. Анимировать свойство display невозможно, поэтому мы должны использовать opacity, но при этом скрытый контент останется интерактивным — если у нас есть интерактивный элемент, мы можем взаимодействовать с ним или нет, поэтому нам нужно найти решение, которое обычно связано со свойством visibility.
Вот некоторые примеры из повседневной жизни front-end разработчика, и я думаю они будут интересны вам. Я вспоминаю, сколько раз я скрывал элементы только через CSS, и, будучи честными, я редко использую это сознательно. За годы работы я выработал для себя правила, в каких ситуациях какой метод использовать. Я уверен, что это касается каждого CSS-разработчика.
Как правило, существует три свойства, цель которых — каким-то образом — скрыть элемент: display, visibility и opacity. Вы можете скрыть элемент и по-другому, но для этого вам нужно больше одного свойства. Мы поговорим о других методах в последнем разделе! Давайте начнем исследование!
Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
Скрытие элементов с помощью свойства display
При установке для свойства display значения none мы получим действительно скрытое состояние. Ваш контент будет по-прежнему присутствовать в HTML-файле, но его блок не генерируется, для элементов не будет отведено место. Вы также не можете взаимодействовать с компонентами. Вы можете выбрать элемент через JavaScript, но не можете получить его ширину или высоту.
Если вы используете display: none; все дочерние элементы также будут невидимы, и вы не сможете их вернуть, объявив для них block — или любое другое «видимое» значение. Вы не можете анимировать эти части каким-либо образом (с помощью CSS). Содержимое будет невидимым для экранных дикторов.
Как вы видите в приведенной выше демо-версии, когда элемент скрыт, он исчезает из потока. При скрытии в адаптивном дизайне определенные вопросы иногда возникают в контрольных точках, и лучшим решением будет свойство display, потому что при этом блок элемента не генерируется.
Скрытие элементов с помощью visibility
Объявление visibility: hidden; — это что-то среднее между display и opacity. При использовании свойства visibility, элемент имеет блок, поэтому он занимает свое место в макете, но мы не можем взаимодействовать с компонентом. Элементы, скрытые с помощью этого свойства, будут невидимы для экранных дикторов, но могут быть анимированы.
Для меня этот метод полезен, когда я разрабатываю выпадающие меню. В случае выпадающего меню мы используем абсолютное позиционирование, поэтому блок не является проблемой, потому что мы изымаем элемент из потока документов. Объединив visibility с opacity, мы можем анимировать элемент, а также отключить взаимодействие, когда выпадающее окно невидимо.
Если вы переключаете видимость, вы можете отобразить раскрывающийся список, когда переходите указателем мыши к тому месту, где оно находится; это потому, что при использовании opacity элемент является интерактивным, но при установке visibility: hidden; он исчезает.
Скрытие элементов с помощью opacity
Используя свойство opacity, мы можем скрыть элементы только визуально; это означает, что у них есть свой блок и они остаются интерактивными. Для этого свойства можно задать значение от 0 до 1, определяя его, мы устанавливаем прозрачность элемента и его дочерних элементов.
Поскольку это просто визуальное скрытие, контент будет доступен для экранных дикторов, и мы также можем его анимировать.
Само по себе это может быть полезно, когда мы разрабатываем какую-либо карточку, где контент отображается при наведении — и это не проблема, потому что мы отображаем его при событии hover — как показано в следующем примере:
Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
Скрытие элементов, но отображение их для экранных дикторов
Как я уже говорил, все становится интереснее, когда вы хотите что-то скрыть, но отобразить для экранных дикторов. Для доступности дизайна это более чем необходимо. Как вы теперь знаете, мы не можем сделать это с помощью предыдущих решений одной строкой кода — нам нужно другое решение, которое является хаком.
От автора: в процессе веб-разработки нам нужно скрывать элементы по многим причинам. Например, кнопка, которая должна быть видна в мобильном представлении и скрыта в настольном. Или элемент навигации, который скрыт на мобильном устройстве и отображается на настольном.
При скрытии элемента существует три разных состояния:
Элемент полностью скрыт и удален из потока документа.
Элемент скрыт только визуально и по-прежнему доступен для вспомогательных технологий (АТ), таких как программы чтения с экрана.
Элемент видим, но скрыт только для программ чтения с экрана.
Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
В этой статье мы узнаем о скрытии элементов в HTML и CSS и рассмотрим аспекты доступности, анимацию и варианты использования для скрытия. Давайте начнем!
Атрибут HTML5 hidden
Это логический атрибут HTML, который скрывает прикрепленный к нему элемент. Когда браузер загружает веб-страницу, он не будет отображать элементы с атрибутом hidden, если это не было переопределено вручную из CSS. Это похоже на эффект применения к элементу display: none. Рассмотрим следующий пример.
У нас есть заголовок, рисунок и описание. Рисунок должен отображаться только в том случае, если ширина области просмотра больше, чем 400px. Я добавил к элементу img атрибут hidden. В CSS я использовал атрибут hidden, чтобы отобразить элемент только в желаемом размере области просмотра.
Ну, вы можете быть удивлены, почему бы не использовать display: none? Хороший вопрос. Когда селектор изображения вызывается через его атрибут hidden, мы можем быть уверены, что даже если CSS по какой-то причине не загрузится, элемент будет скрыт.
Влияние hidden на доступность
С точки зрения доступности hidden полностью скрывает элемент с веб-страницы, поэтому он не будет доступен для программ чтения с экрана. Не используйте его, чтобы скрыть элементы только визуально.
Свойство CSS Display
Каждый элемент имеет значение display по умолчанию, например, inline-block, block, table и т.д. Чтобы скрыть элемент со свойством display, мы должны использовать display: none. Когда элемент скрыт через display: none, все его потомки будут удалены вместе с ним.
Учтите, что у нас тот же пример, что и выше, и мы хотим скрыть изображение.
Это полностью скрывает изображение из потока документа и от программ чтения с экрана. Может быть, вам интересно, что такое поток документа? Смотрите рисунок ниже:
Обратите внимание, что когда синяя книга скрыта, она полностью удалена из стопки. Пространство, которое было отведено ей, ушло. Та же концепция применяется при скрытии элементов в HTML. Зарезервированное пространство для элемента исчезло, и это меняет поток документа или, в нашем примере, стопку книг.
Вот анимация, показывающая, что происходит при удалении книги:
Загружаются ли ресурсы, если они были скрыты через CSS?
Короткий ответ — да. Например, если img скрыт с помощью CSS, и мы отображаем его на определенной контрольной точке, он уже будет загружен. Изображение вызовет HTTP-запрос, даже если оно скрыто с помощью CSS.
В этой демонстрации я добавил только изображение и скрыл его с помощью CSS. Затем я открыл DevTools и проверил вкладку сети, где показано, что изображение загружено.
Мы вернемся к этому позже, чтобы объяснить, как уменьшить количество HTTP-запросов, когда они не нужны на определенной контрольной точке или размере области просмотра.
Элемент style
Стоит отметить, что существуют элементы с display: none по умолчанию. Элемент style может быть добавлен внутри HTML страницы, и мы можем изменить значение его свойства display на block, чтобы он был виден.
От автора: в CSS есть много различных способов сокрытия элементов. Можно установить opacity: 0, visibility: hidden, display: none или задать сверх большие значения при абсолютном позиционировании. Вы никогда не задумывались, зачем нужно столько много способов для одного и того же действия? Все методы почти не отличаются друг от друга, а существующие различия лишь указывают на то, какой из них и в каких обстоятельствах должен применяться. В этом уроке мы вам расскажем про мелкие отличия данных методов, на которые стоит обращать внимание.
Свойство opacity
С помощью свойства opacity задается прозрачность элемента. Данное свойство не изменяет границы элемента, т.е. если задать 0, то элемент будет скрыт только визуально. Элемент все так же будет занимать свое положение и пространство, влияя на расположение других элементов макета страницы. Кроме того, невидимый элемент будет отвечать на взаимодействие с ним.
Если вы хотите скрыть с помощью opacity элементы от скрин ридеров, то у вас это не получится. Элемент и весь его контент останутся видимыми для скрин ридеров, как и все остальные элементы на странице. То есть элемент ведет себя ровно так, как если бы он был видимым.
Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
Также стоит отметить, что свойство поддается анимации, и с его помощью можно создавать поразительные эффекты. Элемент со свойством opacity меньшим 1задает новый контекст стека.
При наведении курсора на скрытый второй блок элемент плавно меняет свое состояние с полной прозрачности до полной непрозрачности. Блоку также задано свойство cursor: pointer, показывающее, что с ним можно взаимодействовать.
Свойство visibility
Следующее в нашем списке свойство visibility. Если установить значение hidden, то элемент будет скрыт. Как в случае со свойством opacity, скрытый с помощью данного свойства элемент не виден, но не стерт из макета страницы. Отличие от первого свойства в том, что данное свойство запрещает взаимодействовать со скрытым элементом. Также элемент будет скрыт от скрин ридеров.
Данное свойство также поддается анимации, можно менять первоначальное и конечное значения. Т.е. можно плавно анимировать свойство при помощи transition.
В демо ниже показана разница между visibility и opacity:
Обратите внимание на то, что дочерние элементы тега со свойством visibility: hidden могут быть видны, если им задать свойство visibility: visible. Проведите курсором внутри блока, но не доходя до цифры. Как видите, курсор не меняет свое значение на pointer. Также если кликнуть в этой области, то ничего не произойдет.
Свойство display
Свойство display прячет элементы по-настоящему. Если установить элементу свойство display: none, то он не просто будет скрыт, не будет создана даже его блоковая модель. Данное свойство полностью скрывает элемент, будто его и не было. Также в таком случае с элементом нельзя никак взаимодействовать. Скрин ридерам будет не доступен контент скрытого элемента. Т.е. элемент как будто и не существовал.
Также будут скрыты все дочерние элементы. Свойство не поддается анимации, т.е. на него нельзя навесить плавные переходы.
Элемент остается доступным через DOM. Вы все так же можете манипулировать им, как и любым другим элементом.
Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
Откройте вкладку CSS в демо ниже:
В коде видно, что у второго блока есть параграф, которому задано свойство display: block, но он все равно остается невидимым. В этом и есть разница между visibility: hidden и display: none. В первом случае если дочерним элементам задать свойство visibility: visible, то они станут видимыми. Во втором случае такой подход не работает. Все дочерние элементы остаются скрытыми независимо от их собственных значений свойства display.
Наведите пару раз курсор на первый блок. Событие hover выполняется? Если кликнуть на него, второй блок станет видимым. Счетчик во втором блоке должен показывать цифру, отличную от нуля. Блок скрыт от пользователя, но все еще доступен для взаимодействия через JS.
Свойство position
Представьте, что вам нужно создать такой элемент, чтобы с ним можно было взаимодействовать, но в то же время чтобы он не влиял на макет страницы. Ни одно из рассмотренных до сих пор свойств полностью не справлялось с этой задачей. В таком случае можно выдвинуть элемент за пределы видимой области. Элемент не будет влиять на макет, но останется доступным для взаимодействия. CSS код:
Веб-разработчикам приходится скрывать элементы веб-страниц по самым разным причинам. Например, есть кнопка, которая должна быть видимой при просмотре сайта на мобильном устройстве, и скрытой — при использовании настольного браузера. Или, например, имеется некий навигационный элемент, который должен быть скрыт в мобильном браузере и отображён в настольном. Элементы, невидимые на странице, могут пребывать в различных состояниях:
HTML5-атрибут hidden
Рассмотрим следующий пример:
В CSS я воспользовался атрибутом hidden для вывода элемента только в том случае, если область просмотра страницы имеет необходимый размер.
Вот CSS-код, который здесь использован:
→ Вот пример этой страницы на CodePen
▍Атрибут hidden и доступность контента
Если рассмотреть атрибут hidden с точки зрения доступности контента, то окажется, что этот атрибут полностью скрывает элемент. В результате с этим элементом не смогут работать средства для чтения с экрана. Не используйте этот атрибут в тех случаях, когда некие элементы страниц нужно делать невидимыми для человека, но не для программ для чтения с экрана.
CSS-свойство display
Представим, что мы хотим скрыть изображение из предыдущего примера и решили воспользоваться следующим CSS-кодом:
При таком подходе изображение будет полностью исключено из документа (из так называемого document flow — «потока документа»), оно будет недоступно программам для чтения с экрана. Возможно, вы не очень хорошо представляете себе понятие «поток документа». Для того чтобы с этим понятием разобраться — взгляните на следующий рисунок.
Синюю книгу убрали из стопки
Вот анимированный вариант примера с книгами, показывающий то, что происходит в том случае, если одну из них убирают из стопки.
Если убрать книгу из стопки — положение других книг в ней изменится
▍Производится ли загрузка ресурсов, скрытых средствами CSS?
Если коротко ответить на этот вопрос — то да, загрузка таких ресурсов производится. Например, если элемент скрыт средствами CSS, и мы показываем этот элемент в некий момент работы со страницей, к этому моменту изображение уже будет загружено. Наличие на странице изображения, даже скрытого средствами CSS, приведёт к выполнению HTTP-запроса на его загрузку.
Исследование страницы, содержащей скрытое изображение
