От автора: мы не придаем большого значения скрытию HTML-элементов через CSS; мы делаем это инстинктивно, пока не узнаем об аспекте доступности и о принципиальном отличие различных методов.
Это отличие состоит в том, чтобы полностью скрыть элемент и его содержимое или скрыть элемент, но отобразить его содержимое для чтения с экрана. Мы знаем, что скрытие элемента CSS связано не только с визуальным аспектом, но и с доступностью. Мы можем создавать вещи, которые должны быть невидимы для глаз, но видимы для экранных дикторов.
Конечно, есть и другие области, где важны различия между методами скрытия, например, в случае анимации. Анимировать свойство display невозможно, поэтому мы должны использовать opacity, но при этом скрытый контент останется интерактивным — если у нас есть интерактивный элемент, мы можем взаимодействовать с ним или нет, поэтому нам нужно найти решение, которое обычно связано со свойством visibility.
Вот некоторые примеры из повседневной жизни front-end разработчика, и я думаю они будут интересны вам. Я вспоминаю, сколько раз я скрывал элементы только через CSS, и, будучи честными, я редко использую это сознательно. За годы работы я выработал для себя правила, в каких ситуациях какой метод использовать. Я уверен, что это касается каждого CSS-разработчика.
Как правило, существует три свойства, цель которых — каким-то образом — скрыть элемент: display, visibility и opacity. Вы можете скрыть элемент и по-другому, но для этого вам нужно больше одного свойства. Мы поговорим о других методах в последнем разделе! Давайте начнем исследование!
Скрытие элементов с помощью свойства 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 — как показано в следующем примере:
Если вы просмотрите код, то увидите, что .sh-effect-delta__overlay имеет нулевую прозрачность.
Скрытие элементов, но отображение их для экранных дикторов
Как я уже говорил, все становится интереснее, когда вы хотите что-то скрыть, но отобразить для экранных дикторов. Для доступности дизайна это более чем необходимо. Как вы теперь знаете, мы не можем сделать это с помощью предыдущих решений одной строкой кода — нам нужно другое решение, которое является хаком.
Скрытие элементов с помощью position
Скрыть элементы с использованием свойства position просто, мы устанавливаем высокое отрицательное значение для top и / или left. С помощью этого метода содержимое элемента по-прежнему доступно для экранного диктора, но оно «удаляется» из потока контента. Например, возьмем классический код .screen-reader-text:
.screen-reader-text { position:absolute; left:-10000px; top:auto; width:1px; height:1px; overflow:hidden;
}Обратите внимание: если вы используете этот метод, вы не должны позиционировать фокусируемый элемент, потому что браузер перейдет к нему.
Скрытие элементов с помощью clip-path
Используя clip-path, мы можем реализовать более современное решение. Мы можем установить ноль для этого свойства, чтобы скрыть элемент. Оно поддерживается во всех современных браузерах, кроме IE и Edge, но мы можем объявить резервные варианты.
.screen-reader-text { position: absolute; height: 1px; width: 1px; clip: rect(1px 1px 1px 1px); clip: rect(1px,1px,1px,1px); clip-path: polygon(0px 0px, 0px 0px, 0px 0px); -webkit-clip-path: polygon(0px 0px, 0px 0px, 0px 0px); overflow: hidden !important;
}Еще один метод: Скрытие с Max Height и Hidden Overflow
Скрытие с использованием свойства max-height является еще одним вариантом. Если вы хотите создать анимированное меню навигации с аккордеоном, вы можете использовать max-height: 0; и overflow: hidden;.
В CSS мы не можем анимировать элементы с использованием height — скажем от нуля до auto — но мы можем задать анимацию от max-height: 0; до max-height: 1000px;. В некоторых случаях это не является лучшим решением, потому что оно использует фиксированные значения.
Как видите, контент будет скрыт. Но для экранных дикторов этот контент будет отображаться.
Второе решение
Николас Хоффманн показал еще одно обходное решение, как вы можете сделать что-то невидимым для экранного диктора, но иметь возможность анимировать это. Просмотрите проект van11y, где вы найдете рабочие примеры.
Источник: https://pineco.de/
Редакция: Команда webformyself.