Когда display: none , а когда visibility: hidden ? — спрашивает нас RedFox. Зависит от того, что вы пытаетесь сделать. Есть и другие варианты как спрятать блок и даже специальный атрибут. Давайте разберёмся!
Если вам приходится что-то прятать, то лучше всего это вообще убрать: сайт легче, код чище. ошибок меньше! Но если вам нужно, чтобы оно там пряталось до поры, а потом кому-то пригодилось — это другое дело. Здесь важно не ошибиться с выбором способа.
display: none
Самый простой и популярный — display: none , он работает как топор: элемент как будто вырубают из HTML. Его не видно на странице и соседние блоки про него ничего не знают. Просто нет и всё. Его даже скринридеры игоририруют и не читают содержимое — будьте аккуратнее с этим.
Что интересно, несмотря на полное вырубание элемента, браузеры всё равно загружают картинку из img с display: none . Если же картинка указана фоном, то Chrome и Edge её тоже загружают, а Firefox и Safari — нет. Ну, разные у них взгляды на оптимизацию загрузки, что поделать.
Другой способ — visibility: hidden
Он работает, как Кольцо Всевластья: элемент вроде здесь и соседние блоки его чувствуют, но его не видно. И чем это отличается от opacity: 0 ? Opacity просто делает элемент прозрачным (или полупрозрачным), а visibility: hidden ещё не даёт с ним взаимодействовать: навести, кликнуть, сфокусировать.
У visibility: hidden есть другая приятная особенность: свойство наследуется, а значит ребёнок невидимого родителя может сменить видимость на visible . Такой трюк не пройдёт ни с display: none , ни с opacity: 0 . С ним удобно делать всплывающие меню и подказки.
Иногда нужно, чтобы элемент не мешал дизайну, но при этом не прятался от скринридеров, оставаясь частью содержимого. Ну не нарисовал дизайнер здесь заголовка, а по логике документа он здесь нужен. Вот бы нам что-то вроде display: hidden или visibility: none ! Это я только что придумал, в природе их не существует.
Недавно в черновике CSS Display третьего уровня появилось свойство box-suppress со значениями show , discard и hide . Оно отвязывает видимость блока от display — ведь с обратной стороны от none есть не только block , но и inline , flex , grid . Значение discard привычно вырубает элемент, а hide делает то самое волшебное комбо. Читайте подробнее у Рейчел Эндрю.
К сожалению, до box-suppress нам ещё долго ждать. Его не только ещё нет в браузерах, но уже в том черновике — недавно его перенесли в следующий уровень, чтобы закончить текущий вовремя. Так что придётся делать магию самим — следите за руками.
Есть такой паттерн «visually hidden» или «визуально спрятанный», чтобы прятать элементы из дизайна, но оставлять доступным их содержимое. Про другие нюансы со скринридерами читайте у Тима Райта. Как это работает: вы делаете универсальный служебный класс и добавляете его к элементам, которые нужно доступно спрятать. Обычно его так и называют: visually-hidden , через дефис.
Важный за головок, которого нет
Если посмотреть что внутри, то это обычный position: absolute плюс clip , который обрезает элемент до нуля. То есть он не влияет на соседей и становится невидимым. Все остальные свойства добавляют универсальности и кроссбраузерности, чтобы класс можно было не глядя шлёпнуть на любой элемент. Подробнее читайте в справке к ally. js Родни Рейма.
А вы знали, что любому элементу можно добавить атрибут hidden и он пропадёт?
Теперь знаете! В современных браузерах на этот атрибут повешен тот самый display: none , который вырубает элемент. Он бинарный как required или checked , так что его удобно выставлять через JavaScript. Только не забудьте добавить в стили [hidden] < display: none >для IE 10, Safari 5 и других старых браузеров.
Вырублен
// JS div.hidden = true;
Это почти всё, что вам нужно знать про прятки в CSS. Попробуйте эти способы, они все хороши в разных ситуациях. Главное, не рубите с плеча и думайте о доступном содержимом.
Благодаря нашей работе веб-разработчиков нам нужно скрывать элементы по многим причинам. Например, кнопка, которая должна быть видна в мобильном окне просмотра и скрыта в окне просмотра в декстопе. Или элемент навигации, который скрыт на мобильном устройстве и отображается в десктопе. При скрытии элемента существует три разных состояния:
Элемент полностью скрыт и удален из потока документа.
Элемент скрыт только визуально и по-прежнему доступен для вспомогательных технологий (АТ), таких как программы чтения с экрана.
Элемент видим, но скрыт только для программ чтения с экрана.
В этой статье мы узнаем о сокрытии элементов в HTML и CSS и рассмотрении аспектов доступности, анимации и вариантов использования для сокрытия.
HTML5 атрибут hidden
Это логический атрибут HTML, который скрывает прикрепленный к нему элемент. Когда браузер загружает веб-страницу, он не будет отображать элементы с атрибутом hidden , если они не были переопределены вручную из CSS. Это похоже на эффект от применения display: none .
Рассмотрим следующий пример.
У нас есть заголовок, рисунок и описание. Рисунок должен отображаться только в том случае, если ширина области просмотра больше, чем 400px . Я добавил атрибут hidden к элементу img .
В CSS я использовал атрибут hidden , чтобы показать элемент только в желаемом размере области просмотра.
И, вы можете быть удивлены, почему бы не использовать display: none ? Хороший вопрос. Когда селектор изображения вызывается через его атрибут hidden , мы можем быть уверены, что даже если CSS по какой-то причине не загрузится, элемент будет скрыт.
Значения доступности для hidden
С точки зрения доступности hidden полностью скрывает элемент от веб-страницы, поэтому он не будет доступен для программ чтения с экрана. Не используйте его, чтобы скрыть элементы только в презентационных целях.
CSS свойство display
Каждый элемент имеет значение дисплея по умолчанию, как inline-block , block , table и т.д. Чтобы скрыть элемент со свойством display, мы должны использовать display: none . Когда элемент скрыт display: none , все его потомки будут удалены вместе с ним.
Учтите, что у нас тот же пример, что и выше, и мы хотим скрыть изображение.
Это полностью скрывает изображение от потока документов и от программ чтения с экрана. Может быть, вам интересно, что такое документооборот? Смотрите рисунок ниже:
Обратите внимание, когда синяя книга скрыта, она полностью удалена из стопки. Пространство, которое было сохранено для этого, ушло. Та же концепция применяется при скрытии элементов в HTML. Зарезервированное пространство для элемента исчезло, и оно меняет поток документов или, в нашем примере, стек книг.
Вот анимация, показывающая, что происходит при удалении книги:
Загружаются ли ресурсы, если они были скрыты с помощью CSS?
Да, это короткий ответ. Например, если скрыть тег img с помощью CSS, и мы показываем его в определенной точке останова, он уже будет загружен. Изображение вызовет HTTP-запрос, даже если оно скрыто с помощью CSS.
В этой демонстрации я добавил только изображение и скрыл его с помощью CSS. Затем я открыл DevTools и проверил вкладку сети, которая показывает, что изображение загружено.
Мы вернемся к этому позже, чтобы объяснить, как уменьшить HTTP-запросы, когда они не нужны в определенной точке останова или размере области просмотра.
Элемент style
Стоит отметить, что существуют элементы со значением display: none по умолчанию. Элемент style может быть добавлен внутри HTML страницы, и мы можем изменить его свойство отображения блока, чтобы он мог быть виден.
Ещё четыре способа скрыть и показать элементы при помощи HTML и CSS
Приквел к этой статье – «Четыре способа заставить элементы исчезнуть (и появиться) при помощи CSS» – был сосредоточен на классических техниках для скрытия элементов на странице; на этот раз используются методы, которые работают в современных браузерах, с некоторыми ограничениями для IE. Используется разметка, которая похожа на разметку из предыдущего примера:
Nastya, photographed by Sean Archer
Located deep in Siberia, the village of Oymyakon holds the title of the coldest permanently inhabited place on Earth, tied with Verkhoyansk.
From December to February, the weather in the tiny village (population 500) plummets to -50°F (-45C), with a record low of -90°F (-68C) registered in 1933. At those temperatures, a naked human left outside would freeze to death in under a minute…
В этой статье я применяю разные техники для скрытия элемента : можно протестировать эти методы в интерактивном примере в начале оригинальной статьи или перейдя по этой ссылке на CodePen.
Масштабирование элемента в 0
Очевидно, если вы делаете что-то бесконечно маленьким, это «что-то» в итоге исчезнет. Стоит отменить, что изначальная область элемента сохранится, потому что действие трансформации по сути похоже на поведение элемента с position: relative ;
Возврат значения scale в значение 1 заставит элемент появиться снова; этот переход также может быть анимирован.
Минусы: Поддерживается во всех современных браузерах, но только начиная с IE9+. Нельзя применять к строчным элементам. Для старых версий браузеров требуются префиксы.
HTML5-атрибут hidden
Хотя визуально он действует так же, как display: none , этот элемент фиксирует состояние элемента
При установке элементу, hidden указывает, что элемент еще не имеет или уже не имеет непосредственного отношения к текущему состоянию страницы.
Атрибут hidden уже используется для таких HTML5-элементов, как details . В отличие от других описанных здесь методов, атрибут hidden скрывает элемент от любых способов представления, включая печать, мобильные и скринридеры. Поддерживается всеми современными браузерами, за исключениями одного.
Минусы: Всё ещё не поддерживается в IE, хотя это легко решается в CSS при помощи селектора по атрибуту:
Нулевой height и overflow:hidden
figure#oymyakon < height: 0; overflow: hidden; >
Традиционное решение. Фактически «схлопывает» элемент по вертикали и делает его невидимым; работает при условии, что у элемента нет видимой границы. Стоит отметить, что некоторое пространство на странице для скрытого элемента, вероятно, будет «забронировано»: несмотря на то, что у элемента нет высоты, у него всё ещё есть ширина и, возможно, поле, которые могут продолжать влиять на макет страницы.
Минусы: Не применяется к строчным элементам. Значение height не может быть анимировано, хотя max — height может.
Фильтр размытия
Новейший подход, который вообще не будет работать в IE (по крайней мере на данный момент). И всё же blur – интересный вариант, который стоит рассмотреть на будущее.. Достаточное размытие делает элемент полностью невидимым, а при уменьшении значения blur до 0 элемент снова оказывается «в фокусе»
Соображения:
размытие небольшого текста работает лучше чем изображения
Размытые изображения могут добавить оставшейся части страницы оттенок цвета, в зависимости от их относительного размера и значения blur .
Чем выше значение blur , тем больше требуется вычислительных циклов для его достижения; достаточно высокие значения могут существенно загрузить графический процессор, что делает эту технику нецелесообразной для мобильных устройств на данный момент.
Поддерживается только в последней версии Firefox (35 версия – прим. перев.) (хотя есть возможность использовать SVG в качестве запасного варианта)
Всё ещё требует браузерных префиксов для Chrome и Safari.
Как уже было указано, не будет работать ни в каких версиях IE.
С этими и другими методами, рассмотренными в прошлой статье, у вас есть полный набор инструментов для создания элементов, которые появляются и исчезают на странице. Важно понимать, что не существует единственной «правильной» или «лучшей» техники: бывает лишь наиболее подходящий инструмент для конкретной задачи. Это относится и к JavaScript, у которого есть собственные методы для добавления и удаления элементов в DOM.
