Сокрытие элементов на CSS.
Существует множество способов скрыть элемент на странице, однако каждый из них имеет свои особенности. В этой статье мы рассмотрим свойства, с помощью которых можно это сделать, и их плюсы и минусы.
Display
Каждый элемент в html является прямоугольником. Сокрытие элемента с помощью свойства display означает, что этот прямоугольник не генерируется вообще.
Хотя элемент все еще находится в разметке, он не отображается на странице. Никакая часть коробочной модели - область контента, margin, padding, border не появляется на странице и не генерируется.
Любой контент в пределах элемента или его внутренние элементы функционально не существуют. Если это действенный элемент, к примеру, button или a, он не будет работать. Элемент и его контент также игнорируются устройствами чтения с экрана.
.foo {
display: none;
}
Visibility
При использовании этого свойства прямоугольник будет генерироваться, но не будет отображаться на странице. Поскольку блок генерируется, его блочная модель будет влиять на отображение других элементов на странице.
Несмотря на то, что блочная модель генерируется, использование свойства visibility, чтобы скрыть элемент, похоже на свойство display. Элемент не работает и не читается устройствами чтения с экрана.
.foo {
visibility: hidden;
}
Opacity
Свойство opacity касается только того, как элемент отображается на странице, а конкретнее - его прозрачности.
Когда прозрачность элемента установлена в минимальное значение, хотя он и становится невидимым на странице, его функциональность не отличается от элемента, имеющего какой-нибудь цвет фона. Элемент также занимает так много пространства, как ему нужно, читается устройствами чтения с экрана и является активным.
.foo {
opacity: 0;
}
Position
Данное свойство не предназначено конкретно для сокрытия элемента, но может быть для этого использовано. Элемент не будет отображен на странице и не будет влиять на макет, но сможет быть прочитан устройствами чтения с экрана и будет активным.
Существует два способа использования свойства position с другими свойствами, чтобы достичь этого.
Использование свойств left и top, чтобы выдвинуть элемент за пределы области видимости.
.foo {
position: absolute;
top: -9999px;
left: -9999px;
}
Или вы можете использовать свойство clip, чтобы уменьшить размер блока до незначительного, тем самым скрыв его.
.foo {
position: absolute;
clip: rect(1px 1px 1px 1px); /* синтаксис для IE6 и IE7 */
clip: rect(1px, 1px, 1px, 1px);
}
Результат использования первого или второго метода будет одинаковым.
Хотя эти решения являются немного "хаками", в настоящее время это лучшее, что можно сделать, чтобы скрыть элемент с области видимости, оставив при этом функционал.
Заключение
| display | visibility | opacity | position | |
|---|---|---|---|---|
| Генерируется ли блочная модель? | ✗ | ✓ | ✓ | ✓ |
| Влияет ли блок на макет? | ✗ | ✓ | ✓ | ✗ |
| Виден ли элемент? | ✗ | ✗ | ✗ | ✗ |
| Будет ли содержимое элемента прочитано устройствами чтения? | ✗ | ✗ | ✓ | ✓ |
| Является ли элемент активным? | ✗ | ✗ | ✓ | ✓ |
Источник: http://bitsofco.de/2015/hiding-elements-with-css/
-
Создано 08.09.2015 19:00:00
-
Михаил Русаков
Комментарии (1):
Интересно получается) Классно
Ответить
Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.