Есть несколько способов скрыть элемент в CSS. Вы можете скрыть его, установив opacity на 0 , visibility на hidden , display на none или установив крайние значения для абсолютного позиционирования.
Задумывались ли вы, почему у нас так много способов скрыть элемент, когда кажется, что все они делают одно и то же? Все эти методы на самом деле немного отличаются друг от друга, и это различие диктует, какой из них следует использовать в конкретной ситуации. В этом руководстве будут рассмотрены незначительные различия, которые необходимо учитывать при сокрытии элемента любым из перечисленных выше способов.
помутнение
opacity свойства предназначена для установки прозрачности элемента. Он не был разработан, чтобы каким-либо образом изменить ограничивающую рамку элемента. Это означает, что установка непрозрачности на ноль только скрывает элемент визуально. Элемент по-прежнему занимает свою позицию и влияет на макет веб-страницы. Он также будет реагировать на взаимодействие с пользователем.
.hide { opacity: 0; }
Если вы намереваетесь использовать свойство opacity чтобы скрыть элемент от программ чтения с экрана — к сожалению, это невозможно. Элемент и весь его контент будут читаться программами чтения с экрана, как и все остальные элементы на веб-странице. Другими словами, элемент ведет себя так же, как если бы он был непрозрачным.
Следует также отметить, что свойство opacity можно анимировать и использовать для создания великолепных эффектов. Любой элемент с opacity меньше 1 также создаст новый контекст стека.
Взгляните на следующую демонстрацию:
Когда вы наводите курсор на скрытый второй блок, элемент плавно переходит из состояния полной прозрачности в состояние полностью непрозрачного. Блок также имеет cursor pointer чтобы показать, что с ним можно взаимодействовать.
видимость
Следующее свойство в нашем списке — visibility . Установка его hidden скрывает наш элемент. Как и свойство opacity , скрытый элемент будет по-прежнему влиять на макет нашей веб-страницы. Единственное отличие состоит в том, что на этот раз он не будет захватывать взаимодействие с пользователем, если он скрыт от пользователя. Кроме того, элемент также будет скрыт от программ чтения с экрана.
Это свойство также может анимироваться, если начальное и конечное состояния имеют разные значения. Это гарантирует, что переход между состояниями видимости может быть плавным, а не резким.
.hide { visibility: hidden; }
Эта демонстрация показывает, как visibility отличается от opacity :
Обратите внимание, что потомки элемента со hidden visibility все еще могут быть видимыми, если их свойство visibility явно установлено visible . Попробуйте навести курсор мыши только на скрытый элемент, а не на абзац внутри, вы увидите, что курсор не меняется на указатель. Более того, если вы попытаетесь нажать на элемент, ваши клики также не будут зарегистрированы.
Тег <p> внутри нашего <div> прежнему будет захватывать все события мыши. Как только вы наводите курсор на текст, сам <div> становится видимым и начинает регистрировать события.
дисплей
Свойство display скрывает элемент в истинном смысле слова. Если для параметра display значение none это гарантирует, что блочная модель не будет создана вообще. Используя это свойство, после скрытия элемента не остается пустого пространства. Не только это, но и любое прямое взаимодействие с пользователем будет невозможно, пока на display не установлено none . Более того, программы чтения с экрана также не будут читать содержимое элемента. Это как если бы элемент не существовал.
Все потомки нашего элемента тоже будут скрыты. Это свойство нельзя анимировать, поэтому переход между различными состояниями всегда будет резким.
Обратите внимание, что элемент по-прежнему доступен через DOM. Вы сможете манипулировать им, как и любым другим элементом.
.hide { display: none; }
Посмотрите на CSS этой демонстрации:
Вы увидите, что у второго блока есть абзац со свойством display установленным на block но этот абзац все еще невидим. Это еще одно различие между visibility: hidden и display: none . В первом случае любой потомок, который явно устанавливает visibility visible , станет видимым, но это не то, что происходит с display . Все потомки остаются скрытыми независимо от значения их собственного свойства отображения.
Теперь наведите несколько раз на первый блок в демоверсии. Готов завис? Нажмите на этот первый блок. Это должно сделать второй блок видимым. Число внутри теперь должно быть числом, отличным от нуля. Это связано с тем, что этот элемент, даже если он скрыт от пользователей, все же можно использовать с помощью JavaScript.
Позиция
Предположим, у вас есть элемент, с которым вы хотели бы взаимодействовать, но вы не хотите, чтобы он влиял на макет вашей веб-страницы. Никакое свойство до этого момента не может справиться с этой ситуацией должным образом. Единственное, что вы можете сделать в этой ситуации, это переместить элемент из области просмотра. Таким образом, это не повлияет на макет и все равно будет действовать. Вот CSS для этого:
.hide { position: absolute; top: -9999px; left: -9999px; }
Следующая демонстрация иллюстрирует, как абсолютное позиционирование скрывает элементы и работает так же, как и предыдущая демонстрация:
Основная идея здесь состоит в том, чтобы установить отрицательное верхнее и левое значения достаточно высоко, чтобы элемент больше не был виден на экране. Одно из преимуществ (или потенциального недостатка) этого метода заключается в том, что контент абсолютно позиционированного элемента может быть прочитан программами чтения с экрана. Это вполне понятно, потому что вы только переместили элемент из области просмотра, чтобы пользователи не могли его видеть.
Вы должны избегать использования этого метода, чтобы скрыть любые элементы, которые могут получить фокус, потому что это приводит к неожиданному переходу, когда пользователь фокусируется на этом элементе. Этот метод часто используется для создания пользовательских флажков или переключателей.
Clip-путь
Еще один способ скрыть элементы — это обрезать их. Раньше это можно было сделать с помощью свойства clip но оно устарело в пользу лучшего свойства, называемого clip-path . Нитиш Кумар недавно представил свойство clip-path здесь, в SitePoint, так что не стесняйтесь проверить его для более расширенного использования свойства!
Имейте в виду, что свойство clip-path используется ниже, еще не полностью поддерживается в IE или Edge . При использовании внешних файлов SVG для вашего clip-path , поддержка еще более ограничена (что не применимо ниже) . Свойство clip-path при использовании для скрытия элемента выглядит так:
.hide { clip-path: polygon(0px 0px,0px 0px,0px 0px,0px 0px); }
Вот демонстрация, чтобы показать это в действии:
Если вы наведите курсор мыши на первый элемент, он все равно сможет воздействовать на второй элемент, даже если он скрыт через clip-path . Если вы щелкнете по элементу, он удалит скрытый класс, чтобы показать наш элемент, который был там все время. Этот текст по-прежнему читается программами чтения с экрана и является решением, используемым (наряду с clip ) на многих сайтах WordPress для чтения с экрана.
Даже если наш элемент больше не виден, элементы вокруг него ведут себя так, как если бы он имел свои первоначальные прямоугольные размеры. Имейте в виду, что взаимодействие с пользователем, например при наведении или щелчке, также невозможно за пределами области обрезки. В нашем случае это означает, что пользователи не смогут напрямую взаимодействовать со скрытым элементом. Кроме того, это свойство может быть анимировано различными способами для создания новых эффектов.
Вывод
В этом уроке мы рассмотрели пять различных способов скрытия элементов с помощью CSS. Каждый из них так или иначе отличается друг от друга. Знание того, чего вы хотите достичь, может помочь вам решить, какое свойство использовать, и со временем станет второстепенным для веб-разработчиков. Если у вас есть какие-либо вопросы относительно методов скрытия элементов, сообщите нам об этом в комментариях.