Порой при разработке веб-страниц иногда требуется «спрятать» конкретные элементы. Вы, конечно, можете просто удалить эти элементы из HTML-разметки. Но это не выход из положения. Чтобы сохранить элемент, но скрыть его, необходимо использовать CSS или HTML hidden.
Два самых распространенных способа скрыть элемент — это свойства CSS «display» и «visibility». На первый взгляд, кажется, что оба свойства делают одно и то же. Но каждое из них имеет свои отличительные особенности, о которых следует знать.
При использовании visibility: hidden элемент не отображается в браузере. Но скрытый элемент все еще занимает место в дизайне страницы. Это выглядит так, будто вы сделали элемент невидимым, но он все еще остается на своем месте и занимает пространство.
Если вы размещаете на веб-странице тег DIV и используете CSS, чтобы придать ему размер 100 на 100 пикселей, свойство visibility: hidden делает блок невидимым на экране. Но текст, следующий за ним, будет размещаться таким образом, словно этот блок все еще присутствует на странице.
Я бы использовал hidden HTML input, чтобы сначала спрятать этот элемент, а затем вернуть его обратно при наведении курсора. Это один из примеров использования этого свойства.
Display
В отличие от свойства visibility, при использовании которого элемент остается в потоке документа, display: none полностью убирает элемент из документа. Он больше не занимает места даже несмотря на то, что он еще находится в исходном коде. Элемент действительно удаляется из потока документа. Но если вы неправильно используете это свойство, оно может полностью разрушить страницу!
Я часто использую display: none, когда тестирую веб-страницу. Когда мне нужно ненадолго скрыть какую-либо область страницы, чтобы я смог протестировать другую.
Но необходимо помнить, что скрытый элемент нужно вернуть обратно на веб-страницу до того, как она будет добавлена на сайт. Сделать это нужно потому, что элемент, удаленный из потока документа данным методом не виден поисковикам. В прошлом этот способ использовался хакерами, чтобы влиять на рейтинг в поисковых системах. Поэтому элементы hide HTML, которые не отображаются, могут восприниматься Google как негативный сигнал.
Свойство display:none полезно при создании адаптивного сайта, в котором присутствуют элементы, доступные только для одного размера экрана, но не для других.
Также можно использовать display: none, чтобы скрыть элемент, а затем вернуть его обратно при помощи медиа-запросов. Это корректное использование свойства display: none, поскольку вы не пытаетесь скрыть что-либо с целью совершения нарушений.
Дайте знать, что вы думаете по этой теме материала в комментариях. За комментарии, отклики, подписки, лайки, дизлайки огромное вам спасибо!
Сергей Бензенкоавтор-переводчик
visibility — CSS — Дока
- Кратко
- Пример
- Как пишется
- Подсказки
- На практике
- Дмитрий Семиградский советует
- Алёна Батицкая советует
Кратко
Скопировано
Свойство visibility прячет элемент от глаз пользователя.
Практически так же, как это делает opacity. И в том, и в другом случае элемент не виден, но механизм работы этих свойств разный.
Если при помощи opacity можно гибко изменять прозрачность элемента и делать его, например, видимым на 33%, то свойство visibility имеет только два состояния: видимый и невидимый.
Пример
Скопировано
<article> <p>Эрнесту Хемингуэю приписывают авторство...</p> <p>Многие писатели упражнялись в жанре сверхмалой прозы...</p> <p>В этом жанре можно написать и автобиографию...</p></article>
<article>
<p>Эрнесту Хемингуэю приписывают авторство...</p>
<p>Многие писатели упражнялись в жанре сверхмалой прозы...</p>
<p>В этом жанре можно написать и автобиографию...</p>
</article>
.visibility-hidden { visibility: hidden;}
.
visibility-hidden {
visibility: hidden;
}
Открыть демо в новой вкладке
visibility-hidden {
visibility: hidden;
}
Обратите внимание, что скрытый параграф всё равно влияет на поток документа и занимает отведённое ему место.
Как пишется
Скопировано
У свойства visibility всего два используемых значения:
visible— значение по умолчанию, элемент видим.hidden— элемент не виден на странице, но занимает отведённое ему место, влияет на поток документа.
Важный момент: при значении hidden элемент становится невидимым для программ чтения с экрана (скринридеров), а также на него нельзя будет попасть при навигации с помощью клавиатуры. Стоит помнить об этом при разработке, если вам важна доступность сайта.
Ещё есть устаревшее значение collapse, которое нужно только при работе с таблицами. Современными браузерами оно не поддерживается и обрабатывается как hidden.
Так же можно применять в качестве значения стандартные ключевые слова: inherit, initial и unset.
Подсказки
Скопировано
💡 Свойство нельзя анимировать при помощи transform 😒
💡 Спрятанный элемент скрывается из так называемого accessability tree — становится недоступен для скринридеров и не может получить фокус при перемещении с помощью клавиатуры.
На практике
Скопировано
Дмитрий Семиградский советует
Скопировано
🛠 Важная особенность свойства, что оно, в отличие от display или opacity, не просто прячет родителя, а наследуется на все дочерние элементы. Это значит, что это поведение можно переписать и вложенный элемент с visibility будет видно.
Это можно использовать для кастомизации разметки, сгенерированной сторонней библиотекой:
Алёна Батицкая советует
🛠 Обычно, когда я хочу точно-точно спрятать элемент, чтобы он не получал фокус ни при каких обстоятельствах и не был виден даже скринридерам, но при этом хочу плавно показать его по какому-то триггеру, то указываю одновременно несколько скрывающих свойств и использую трюк с transition:
.parent { padding: 15px; border: 1px solid currentColor;}.block { visibility: hidden; opacity: 0; transition: visibility 0s linear 300ms, opacity 300ms;}.parent:hover .block { visibility: visible; opacity: 1; transition: visibility 0s linear 0s, opacity 300ms;}
.parent {
padding: 15px;
border: 1px solid currentColor;
}
.block {
visibility: hidden;
opacity: 0;
transition: visibility 0s linear 300ms, opacity 300ms;
}
.parent:hover . block {
visibility: visible;
opacity: 1;
transition: visibility 0s linear 0s, opacity 300ms;
}
<div> <div>Я простой текст. Наводишь курсор и я показываюсь</div></div>
<div>
<div>Я простой текст. Наводишь курсор и я показываюсь</div>
</div>
Открыть демо в новой вкладкеЕсли вы нашли ошибку, отправьте нам пул-реквест!
Во время отправки формы что-то пошло не так. Попробуйте ещё раз?
←
opacity
ctrl + alt + ←
→
clip
ctrl + alt + →
Vuetify — платформа компонентов Vue
Вы сейчас просматриваете документацию для Vuetify 3
Перейти к Vuetify 2 Помощники по отображению позволяют управлять отображением содержимого. Это включает в себя условное отображение на основе текущего окна просмотра или фактического типа отображения элемента.
| Устройство | Код | Тип | Диапазон | ||
|---|---|---|---|---|---|
| Extra small | xs | Small to large phone | < 600px | ||
| Small | sm | Small to medium tablet | 600px > < 960px | ||
| Средний | md | Большой планшет-ноутбук | 960px > < 1280px | ||
| Большой | lg 9 00025 Laptop to desktop | 1280px > < 1920px | |||
| Extra large | xl | 1080p to 1440p desktop | 1920px > < 2560px | ||
| Extra extra large | xxl | 4K и сверхширокий | > 2560 пикселей | ||
| Спецификация | |||||
Эти классы можно применять ко всем контрольным точкам от 
Например, | Размер экрана | Класс | ||||
|---|---|---|---|---|---|
| Скрыт на всех | .d-нет | ||||
| Скрыт только на XS | .d-None .d-Sm-Flex | ||||
| Hidden только на SM | .D-SM-None .d-Md-Flex | ||||
| Hidden only on md | .d-md-none .d-lg-flex | ||||
| Hidden only on lg | . | ||||
| Hidden только на xl | .d-xl-none | ||||
| Видно на всех | .D-FLEX | ||||
| Видимо только на XS | .D-FLEX .D-SM-None | ||||
| Вид только на SM | |||||
| Отображается только на md | .d-none .d-md-flex .d-lg-none | ||||
| Отображается только на xl | .d-none .d-xl-flex |
d-lg-none .d-xl-flex Кроме того, вы также можете отобразить элемент на основе текущего окна просмотра , используя вспомогательные классы бокового отображения. Эти классы могут применяться в следующем формате: hidden-{точка останова}-{условие}
Условие применяет базовый класс на:
-
только— скрыть элемент только наxsпоxlточки останова -
и-вниз— скрыть элемент на указанной точке останова и внизSMпоLGТочки останова -
и UP— скрыть элемент на указанной точке перерыва и UPSMдоLGBreak -Points
3.
состояние. В настоящее время поддерживаются как только для скрытого экрана , так и только для скрытой печати .
#Предупреждения
Важно отметить, что использование любого из вышеперечисленных классов отображения приведет к тому, что любой ранее добавленный стиль отображения будет перезаписан. Это из-за классов, использующих !важно в стиле их отображения.
#Отображать при печати
Вы также можете изменить свойство отображения при печати.
-
.d-print-none -
.d-print-inline -
.d-print-inline-block -
.d-print-block -
.d-print -table -
.d-print-table-row -
.d-print-table-cell -
.d-print-flex -
.d-print-inline-flex
Классы утилит печати также можно комбинировать с утилитами отображения без печати.
#Accessibility
#Программы чтения с экрана
Используйте служебные классы d-sr для условного скрытия содержимого на всех устройствах, кроме программ чтения с экрана.
-
d-sr-onlyвизуально скрывает элементы, но по-прежнему будет объявлять программам чтения с экрана . -
d-sr-only-focusableвизуально скрывает элемент, пока он не будет сфокусирован. Это полезно при реализации пропуска ссылок.
Готовы узнать больше?
Продолжите свое обучение с соответствующим контентом, выбранным командой
, или перемещайтесь между страницами, используя навигационные ссылки ниже.
Текст и типография
Стили
RESIZE
Директивы
Дисплей и платформа
Особенности
Содержимое
ALETSTATION 9005.
:hidden и display:none в CSS? | Кевин Чисхолм
При видимости:скрытый элемент по-прежнему занимает место. С display:none он эффективно удаляется из DOM.
Скрытие элементов DOM с помощью CSS — распространенная задача. Некоторые задаются вопросом, должны ли они использовать visibility:hidden или display:none . Итак, давайте подумаем о скрытой видимости и отсутствии отображения. Прежде чем принять решение, задайте себе вопрос: «Хочу ли я, чтобы элемент по-прежнему физически воздействовал на DOM? или я хочу, чтобы элемент выглядел так, как будто он был удален со страницы?» . Это важный вопрос. Разница между visible:hidden и display:none в CSS заключается в том, как скрытый элемент влияет на DOM.
Когда visibility:hidden применяется к элементу HTML, он не отображается на странице, что имеет смысл. Но важно помнить, что этот элемент HTML по-прежнему влияет на модель DOM.
На самом деле HTML-элемент влияет на DOM так, как будто он все еще виден. Теперь это может показаться странной особенностью, т. е. если вы не хотите, чтобы что-то было видимым, то почему вы хотите, чтобы это все еще влияло на DOM? Что ж, я могу без колебаний заявить, что я действительно попадал в ситуации, в которых такое поведение было именно тем, что мне было нужно. Итак, просто помните, что, хотя это может показаться странным, visibility:hidden действительно предлагает особую ценность, когда вам это нужно.
С другой стороны, когда display:none применяется к элементу HTML, он не отображается на странице, и это тоже имеет смысл. Однако в этом случае элемент не оказывает никакого влияния на DOM, а что касается других элементов вокруг него, то он просто не существует. Это важная деталь, потому что с display:none вы эффективно удаляете элемент из DOM. Однако в то же время у вас есть полный доступ к этому элементу, и вы можете изменять его, стилизовать или даже изменять отображаемое значение, чтобы он снова отображался в DOM.
Наиболее распространенные значения свойства отображения CSS: « блок », «встроенный» и « встроенный блок ».
См. Pen CSS Visibility Hidden by Front End Video (@frontendvideo) на CodePen.
В примере №1 есть целая куча текста, а прямо посередине — изображение. Изображение имеет видимость : скрытую , установленную в его CSS. В итоге имеем пустую коробку. Это пустое поле представляет собой пространство, которое изображение занимает в DOM. Так что образ во многом еще существует.
Но с визуальной точки зрения он был скрыт от глаз. Так что с visibility:hidden , только имейте в виду: «он все еще там, но мы его не видим» .
И дело не только в том, что «он все еще там». это фактически влияет на DOM. Этот скрытый элемент буквально толкает другие элементы вверх и вниз, как если бы он был видимым. Так что, как вы понимаете, если вы не совсем понимаете, как работает visible:hidden, вы можете рвать на себе волосы, пытаясь понять, почему скрытый элемент все еще влияет на DOM. Просто имейте в виду: visibility:hidden не отменяет влияние этого элемента на другие элементы вокруг него.
Пример № 2 — display:none
См. «Видимость CSS пера, скрытая внешним видео» (@frontendvideo) на CodePen.
В Примере №2 все аналогично: есть целая куча текста, а прямо посередине — изображение.