К постам Опубликовано: 2016-09-03

Элемент скрытый, или понимание невидимости css

Есть несколько способов скрытия элемента в CSS. Вы можете скрыть его, установив opacity на 0,visibility на hidden, display: none или установив крайние значения для абсолютного позиционирования. Вы когда-нибудь задавались вопросом, почему у нас так много методов сокрытия элемента, когда все они, кажется, делают то же самое? Все эти методы на самом деле слегка отличаются друг от друга, и эта разница диктует, какой из них должен использоваться в конкретной ситуации. Будем охватывать незначительные различия, которые вы должны иметь в виду, когда скрывается элемент, используя любой из описанных выше способов.

Opacity Opacity свойство призвано установить прозрачность элемента. Он не был разработан, чтобы изменить ограничительную рамку элемента в любом случае. Это означает, что установка opacity до нуля только скрывает элемент визуально. Элемент по-прежнему занимает свою позицию и влияет на макет веб-страницы. Он также будет взаимодействовать с пользователем, а также.

[code].hide { opacity: 0; }[/code] Если вы собираетесь использовать свойство opacity, чтобы скрыть элемент от читалок экранов - к сожалению, это не представляется возможным. Элемент и все его содержание будет прочитан читалками, так же как и все остальные элементы на веб-странице. Другими словами, элемент ведет себя именно так, как было бы если бы он был непрозрачным. Я хотел бы также отметить, что свойство непрозрачности можно анимировать и использовать для создания несколько великолепных эффектов. Любой элемент с непрозрачностью менее 1 также создаст новый контекст стэка.

Visibility

Следующее свойство в нашем списке является visibility. Установка его в hidden будет скрывать наш элемент. Так же, как свойство opacity, скрытый элемент будет по-прежнему влиять на макет нашей веб-страницы. Единственное отличие состоит в том, что на этот раз он не будет фиксировать любое взаимодействие с пользователем, когда скрыты от пользователя. Кроме того, элемент также будет скрыт от чтения с экрана. Это свойство также может быть анимировано. Это гарантирует, что переход между состояниями видимости может быть гладкой, а не резкой. [code].hide { visibility: hidden; }[/code] Этот пример показывает, как видимость отличается от прозрачности: Обратите внимание на то, что потомки элемента с набором visibility: hidden; до сих пор могут быть видны, если их свойство visibility установлена явно visible.

Display

Свойство display скрывает элемент в истинном смысле этого слова. Настройка display к none не гарантирует, что блочная-модель не формируется вовсе. Используя это свойство, не существует пустого пространства позади, когда было скрыто элемент. Не только это, но любое прямое взаимодействие с пользователем не будет возможно до тех пор, пока display установлен на none. Кроме того, скрин ридеры не будут читать содержимое элемента. Это как если бы элемент не существовал. Все потомки нашего элемента будут скрыты, а также. Это свойство не может быть анимированным поэтому переход между различными состояниями всегда будет резким. Обратите внимание, что элемент по-прежнему доступны через DOM. Вы сможете работать с ним так же, как с любым другим элементом. [code].hide { display: none; }[/code]  

Position

Предположим, у вас есть элемент, с которым вы хотели бы взаимодействовать но вы не хотите, чтобы повлияло на макет вашей веб-страницы. Одна вещь, которую вы можете сделать в этой ситуации, это переместить элемент из окна просмотра. Таким образом, это не повлияет на макет и по-прежнему будет действовать. Вот CSS, чтобы сделать это: .[code] hide { position: absolute; top: -9999px; left: -9999px; }[/code] Вы должны избегать использования этого метода, чтобы скрыть какие-либо элементы, которые могут получить фокус, поскольку это приводит к неожиданным скачком, когда пользователь фокусируется на этом элементе. Этот метод часто используется для создания пользовательских переключателей или кнопок радио.

Clip-path

Еще один способ сокрытия элементов, прикрепить их. Раньше это можно было сделать с помощью свойства clip, но который был объявлен устаревшим в пользу лучшему свойству clip-path. Имейте в виду, что свойство clip-path, используемое ниже не полностью поддерживается в IE или Edge, пока нет. При использовании внешних SVG файлов для вашего clip-path, поддержка еще более ограничена (это не относится ниже). Свойство clip-path, когда используется, чтобы скрыть элемент выглядит так: [code].hide { clip-path: polygon(0px 0px,0px 0px,0px 0px,0px 0px); }[/code] Даже если наш элемент уже не видно, элементы вокруг него до сих пор ведут себя, как если бы они имели свои первоначальные прямоугольные размеры. Пользователи не смогут взаимодействовать со скрытым элементом непосредственно. Кроме того, это свойство может быть анимировано различными способами для создания новых эффектов.