0Pricing
CSS Academy · Урок

Видимость и display: none

Изучите, когда использовать visibility: hidden и display: none и как каждый вариант влияет на компоновку.

«Видимость и display: none» — бесплатный урок CSS Academy на CoddyKit. Это урок 2 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения CSS Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс CSS Academy содержит 4 уроков всего.

Три способа скрыть элементы

CSS предоставляет три распространённых способа скрыть элементы, каждый из которых по-разному влияет на раскладку, доступность и взаимодействие:

  1. display: none
  2. visibility: hidden
  3. opacity: 0

display: none

Элемент полностью исключается из раскладки. Он не занимает места, не является интерактивным и не читается программами чтения с экрана (в большинстве реализаций). При этом элемент всё ещё существует в DOM.

<p>Visible paragraph.</p>
<p class="hidden">You will never see this.</p>

visibility: hidden

Элемент невидим, но по-прежнему занимает место в раскладке. По нему нельзя щёлкнуть, и программы чтения с экрана его не читают. Это удобно, когда нужно скрыть что-либо без сдвига раскладки.

<p>Before</p>
<p class="invisible">Invisible but space reserved</p>
<p>After</p>

opacity: 0

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

<button class="transparent">Invisible but clickable</button>

Переопределение visibility: visible

Дочерний элемент может переопределить значение visibility: hidden родителя, задав visibility: visible. С display: none это невозможно: дочерние элементы безусловно наследуют это поведение.

<div class="parent">Hidden parent text <span class="child">but this child is visible</span></div>

Сравнительная таблица

Краткая памятка:

  • display: none: места нет, щелчки не обрабатываются, содержимое не читается
  • visibility: hidden: место сохраняется, щелчки не обрабатываются, содержимое не читается
  • opacity: 0: место сохраняется, элемент по-прежнему доступен для щелчков, содержимое может читаться

Плавное изменение visibility

Свойство display нельзя анимировать переходом. Чтобы плавно показывать и скрывать элементы, сочетайте visibility с opacity:

<div class="dropdown open">Dropdown menu content</div>

Доступное скрытие с помощью SR-only

Шаблон только для программ чтения с экрана визуально скрывает содержимое, сохраняя к нему доступ вспомогательных технологий:

<button>Save <span class="sr-only">your document now</span></button>

Атрибут hidden и CSS

Атрибут HTML hidden применяет display: none через таблицу стилей пользовательского агента браузера. Это доступный и семантичный подход, но его можно переопределить с помощью специфичности CSS.

<div hidden>Hidden via the HTML attribute</div>
<div class="css-hidden">Hidden via CSS display:none</div>
<p>Visible content</p>

content-visibility

content-visibility: hidden пропускает отрисовку находящихся за пределами экрана разделов, но сохраняет их в дереве доступности и раскладке. Это современный приём повышения производительности длинных страниц.

<div class="offscreen-section">Long offscreen section rendered lazily</div>

pointer-events: none

Чтобы элемент оставался видимым, но неинтерактивным, используйте pointer-events: none. Щелчки и наведение указателя проходят сквозь элемент к элементам под ним.

<div class="overlay">Clicks pass through this overlay</div>

Быстрая проверка

Какой способ скрывает элемент, сохраняя занимаемое им место в раскладке?

Итоги

display: none полностью удаляет элемент из раскладки. visibility: hidden скрывает его, сохраняя место. opacity: 0 скрывает элемент, но оставляет его интерактивным. Для доступного скрытия используйте шаблон .sr-only. Для плавных переходов сочетайте visibility и opacity.

Часто задаваемые вопросы

Урок «Видимость и display: none» бесплатный?

Да — полный текст урока «Видимость и display: none» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс CSS Academy, подпишись на CoddyKit PRO. Курс CSS Academy содержит 4 уроков всего.

Чему я научусь в уроке «Видимость и display: none»?

Изучите, когда использовать visibility: hidden и display: none и как каждый вариант влияет на компоновку. Ты практикуешь CSS Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.

Нужен ли мне опыт, чтобы начать CSS Academy?

Предыдущий опыт не требуется. CSS Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 2 из 4.

Сколько времени занимает урок «Видимость и display: none»?

Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.

Можно ли писать и запускать код в этом уроке CSS Academy?

Да. Каждый урок CSS Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.

Все уроки этого курса

  1. Блочные, строчные и строчно-блочные элементы
  2. Видимость и display: none
  3. Переполнение: прокрутка, обрезка и автоматический режим
  4. Сброс CSS и Normalize
← Назад к CSS Academy