Как сделать элемент невидимым css
Перейти к содержимому

Как сделать элемент невидимым css

  • автор:

CSS: Свойства display и visibility

CSS свойства display и visibility позволяют скрывать элементы (делать их невидимыми) и полностью убирать элементы из HTML разметки (в этом случае браузер игнорирует элемент, при построении разметки страницы).

Блочные и строчные элементы

Большинство элементов в CSS классифицируются как блочные ( block ) или строчные ( inline ), и это влияет на то, как эти элементы будут отображаться по умолчанию на веб-странице.

Важно знать к какому типу относится элемент, так как не все CSS свойства работают с обоими типами элементов. Некоторые CSS свойства работают только с блочными элементами, другие только со строчными.

CSS свойство display позволяет переопределить тип элемента, заданный по умолчанию. Что в свою очередь, позволят по необходимости изменять тип элемента со строчного на блочный или с блочного на строчный.

Строчные элементы

Элемент определённый как строчный, будет занимать только необходимое количество места на веб-странице (занимаемое место зависит от содержимого строчного элемента), кроме этого такие элементы:

  • игнорируют верхний и нижний внешний отступ, если он применен
  • игнорируют свойства height и width
  • могут быть выровнены с помощью свойства vertical-align

Строчный элемент можно сделать блочным если установить для свойства display значение block или если сделать элемент плавающим. Плавающие элементы автоматически становятся блочными, то есть появляется возможность регулировать размер элемента и задавать внешние отступы.

Блочные элементы

Блочные элементы всегда начинаются с новой строки и занимают всю доступную ширину, если ширина для элемента не была установлена. Кроме этого блочные элементы:

  • могут иметь внешние и внутренние отступы
  • растягиваются по высоте под свое содержимое
  • не выравниваются свойством vertical-align

Строчно-блочные элементы

Строчно-блочное отображение элемента задается значением inline-block . В основном это способ сделать элемент строчным, но сохранить его «блочные» возможности: изменение высоты и ширины элемента, регулирование размеров внешних и внутренних отступов.

Примечание: значение inline-block не поддерживается в IE7 и более ранних версиях.

Скрытие элементов

В CSS есть возможность временного или постоянного скрытия некоторых элементов веб-страницы. Стоит обратить внимание на то, что скрытые элементы не будут отображаться только на веб-странице, но их можно будет посмотреть в исходном коде HTML-документа. Для скрытия элементов используется или свойство display со значением none или свойство visibility со значением hidden :

  • display: none; — указание браузеру скрыть элемент, убрав его из общего потока элементов. В этом случае элемент, расположенный после скрытого элемента, будет смещаться вверх, занимая место скрытого элемента.
  • visibility: hidden; — указание браузеру скрыть элемент, зарезервировав под него место на веб-странице. В этом случае браузер только скрывает элемент, не удаляя его из общего потока, поэтому на месте скрытого элемента останется пустое пространство, совпадающее по размеру с размером скрытого элемента.
    Название документа h1.hidden < visibility: hidden; >h2.none 

Это видимый заголовок

Скрытый заголовок

Скрытый заголовок2

Элемент, который скрыт с помощью свойства visibility, все равно занимает пространство там, где он должен находиться в отличие от элемента скрытого с помощью свойства display, который убран из общего потока страницы.

Копирование материалов с данного сайта возможно только с разрешения администрации сайта
и при указании прямой активной ссылки на источник.
2011 – 2024 © puzzleweb.ru | razumnikum.ru

Как скрыть элемент в html

Каждый элемент веб-страницы обладает неким значением свойства display , назначаемым ему по умолчанию. Это может быть inline-block, block, table и так далее. Для того чтобы скрыть элемент с помощью свойства display, мы можем воспользоваться конструкцией display: none. Если элемент скрыт с помощью этой конструкции, то вместе с ним будут скрыты и все его потомки.

 Этот блок текста будет скрыт 
p  display: none; > 

10 способов спрятать элементы на CSS

Существует множество способов скрыть элементы на странице — и все они по-разному влияют на доступность, разметку, анимации, производительность и обработку событий.

Анимации

Некоторые CSS-свойства принимают только два крайних значения — все или ничего. Элемент либо полностью видим, либо полностью невидим, а промежуточных значений не существует.

Другие свойства, например, прозрачность, могут принимать значения в определенном диапазоне. К таким свойствам можно применить CSS-анимации для плавного изменения.

Помните, что анимация может вызывать дезориентацию, мигрень, судороги или другой физический дискомфорт у некоторых людей. Поэтому всегда используйте медиа-запрос prefers-reduced-motion, для учета пользовательских предпочтений.

Доступность

Все описанные ниже приемы обеспечивают визуальное скрытие элемента на странице, но они не всегда прячут его от ассистивных технологий. Например, скринридеры продолжают читать текст, даже если вы уменьшите его размер до крошечного и сделаете цвет прозрачным.

Для изменения этого поведения могут потребоваться дополнительные CSS-свойства или ARIA-атрибуты, вроде aria-hidden=»true» .

Обработка событий

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

Производительность

После того как браузер загрузит и распарсит HTML DOM и CSSOM, страница рендерится (и перерендеривается) в три этапа:

  1. Layout: генерируется геометрия и позиция каждого элемента;
  2. Paint: отрисовываются пиксели каждого элемента;
  3. Composition: слои элементов располагаются в правильном порядке друг над другом.

Эффекты, которые вызывают только композиционные изменения, определенно предпочтительнее всех других, так как требуют меньше действий. В некоторых случаях браузер также может использовать аппаратное ускорение.

Способ #1. opacity и filter: opacity()

Свойства opacity: N и filter: opacity(N) могут принимать значения в диапазоне от 0 до 1 (или от 0% до 100%), где 0 — это полная прозрачность элемента, а 1 — полная непрозрачность.

Между этими двумя свойствами в современных браузерах практически нет разницы. filter позволяет использовать сразу несколько эффектов, например, прозрачность одновременно с размытием или контрастностью.

Свойство opacity можно анимировать — и это очень хороший подход с точки зрения производительности.

Помните, что элементы с opacity: 0 остаются на странице и на них могут срабатывать пользовательские события.

Метрика Влияние
Браузерная поддержка Хорошая. В IE свойство opacity поддерживает только значения в диапазоне от 0 до 1
Доступность скрытого элемента При значении 0 или 0% контент элемента недоступен
Вызывает изменение макета Нет
Перерендеринг Composition
Производительность Хорошая, может использоваться аппаратное ускорение
Покадровая анимация Возможна
Срабатывание событий на скрытом элементе Да

Способ #2. alpha-канал

Свойство opacity влияет на элемент целиком, но вы можете также изменять видимость отдельных свойств: цвета ( color ), фона ( background-color ) или рамки ( border-color ). Чтобы скрыть их, используйте цвет в формате rgba (или hsla) и установите значение альфа-канала равным нулю, например, rgba(0, 0, 0, 0) .

Каждое свойство можно анимировать отдельно для создания интересных эффектов.

Эту технику нельзя применить к фоновым изображения (кроме тех, которые созданы с помощью CSS-градиентов).

Способы управления альфа-каналом:

  • Ключевое слово transparent . Устанавливает полную прозрачность, не поддерживает промежуточные анимации.
  • rgba(r, g, b,a) : красный, зеленый, синий и альфа-канал.
  • hsla(h, s, l, a) : оттенок, насыщенность, светлота и альфа-канал.
  • HEX-формат: #RRGGBBAA или #RGBA
Метрика Влияние
Браузерная поддержка Хорошая. В IE поддерживается только ключевое слово transparent и rgba-формат.
Доступность скрытого элемента Контент остается доступным
Вызывает изменение макета Нет
Перерендеринг Painting
Производительность Хорошая, но медленнее, чем у opacity
Покадровая анимация Возможна
Срабатывание событий на скрытом элементе Да

Способ #3. transform

Свойство transform позволяет передвигать ( translate ), масштабировать ( scale ), вращать ( rotate ) или искажать ( skew ) элемент. Оно позволяет также его спрятать. Например, можно радикально уменьшить масштаб ( scale(0) ) или передвинуть блок за пределы вьюпорта ( translate(-999px, 0px) ).

CSS-трансформации предлагают великолепную производительность с использованием аппаратного ускорения. Трансформируемый элемент перемещается на отдельный слой и может изменяться, не затрагивая другие слои. Пространство, занимаемое блоком до изменения, остается на странице, но полностью скрытый элемент уже недоступен для взаимодействия.

Метрика Влияние
Браузерная поддержка Хорошая
Доступность скрытого элемента Контент остается доступным
Вызывает изменение макета Нет, сохраняются оригинальные размеры блока
Перерендеринг Composition
Производительность Хорошая, может использоваться аппаратное ускорение
Покадровая анимация Возможна
Срабатывание событий на скрытом элементе Нет

Способ #4. clip-path

Свойство clip-path определяет область обрезки — часть блока, которая будет видима на странице. Если эта область занимает 0 пикселей, элемент будет скрыт: clip-path: circle(0) .

С помощью этого свойства можно создавать интереснейшие анимации, но поддерживается оно только в современных браузерах.

Метрика Влияние
Браузерная поддержка Только современные браузеры
Доступность скрытого элемента Контент остается доступным для некоторых приложений
Вызывает изменение макета Нет, сохраняются оригинальные размеры блока
Перерендеринг Paint
Производительность Допустимая
Покадровая анимация Возможна в современных браузерах
Срабатывание событий на скрытом элементе Нет

Способ #5. visibility

Свойство visibility принимает одно из двух значений: visible или hidden . Для ячеек таблицы доступно также значение collapse .

Пространство, занимаемое элементом, остается на странице (кроме collapse ).

Метрика Влияние
Браузерная поддержка Отличная
Доступность скрытого элемента Контент элемента недоступен
Вызывает изменение макета Нет (кроме collapse )
Перерендеринг Composition (кроме collapse )
Производительность Хорошая
Покадровая анимация Невозможна
Срабатывание событий на скрытом элементе Нет

Способ #6. display

display , вероятно, самое популярное свойство для скрытия элементов на странице. Значение none эффективно удаляет блок, как будто его никогда и не существовало в DOM.

Однако в большинстве случаев display: none — самый плохой способ спрятать что-то. Это свойство нельзя анимировать, и оно вызывает перерисовку страницы (layout), если только элемент не вырван из общего потока документа ( position: absolute ) или если не используется новое свойство contain.

Кроме того, свойство display может принимать множество значений ( block , inline , flex , grid , table , …). Если вы сбрасываете его до значения none , то вернуть затем правильное отображение может быть затруднительно (может помочь значение unset).

Метрика Влияние
Браузерная поддержка Отличная
Доступность скрытого элемента Контент элемента недоступен
Вызывает изменение макета Да
Перерендеринг Layout
Производительность Плохая
Покадровая анимация Невозможна
Срабатывание событий на скрытом элементе Нет

Способ #7. Атрибут hidden

HTML-атрибут hidden можно добавить к любому элементу:

  

К нему будут применены дефолтные стили браузера:

[hidden]

Эта техника имеет те же преимущества и недостатки, что и предыдущая, но она может быть удобна для использования в различных CMS, где нет возможности влиять на стиль контента (но можно редактировать HTML-код).

Способ #8. Абсолютное позиционирование

Свойство position позволяет переместить элемент из его исходной ( static ) позиции в общем потоке документа с помощью свойств top , bottom , left и right . Абсолютно спозиционированный элемент ( position: absolute ) можно вынести за пределы вьюпорта, например, установив ему свойство left: -999px (значение может быть другим).

Метрика Влияние
Браузерная поддержка Отличная, кроме position: sticky
Доступность скрытого элемента Контент элемента остается доступным
Вызывает изменение макета Да, при изменении позиционирования
Перерендеринг Зависит от ситуации
Производительность При правильном использовании неплохая
Покадровая анимация Возможна для свойств top , bottom , left и right
Срабатывание событий на скрытом элементе Да, но если элемент вынесен за пределы вьюпорта, взаимодействие с ним затруднительно

Способ #9. Перекрытие другим элементом

Элемент можно спрятать, разместив поверх него другой элемент, совпадающий по цвету с фоном страницы. В примере для перекрытия используется псевдоэлемент ::after , который размещается поверх второго блока:

Эта техника требует большего количества кода, чем остальные. В некоторых случаях ее применение может быть невозможным (сложный или неизвестный фон).

Метрика Влияние
Браузерная поддержка Отличная
Доступность скрытого элемента Контент элемента остается доступным
Вызывает изменение макета Нет, если используется абсолютное позиционирование
Перерендеринг Paint
Производительность При правильном использовании неплохая
Покадровая анимация Возможна
Срабатывание событий на скрытом элементе Да, если для перекрытия используется псевдоэлемент или дочерний элемент блока

Способ #10. Уменьшение размеров

Элемент можно спрятать, уменьшив его размеры с помощью свойств width , height , padding , border-width и/или font-size . При необходимости также можно использовать свойство overflow: hidden , чтобы избежать переполнения уменьшенного элемента контентом.

Эта техника позволяет создавать интересные анимационные эффекты, но ее производительность существенно хуже, чем у свойства transform .

Метрика Влияние
Браузерная поддержка Отличная
Доступность скрытого элемента Контент элемента остается доступным
Вызывает изменение макета Да
Перерендеринг Layout
Производительность Плохая
Покадровая анимация Возможна
Срабатывание событий на скрытом элементе Нет

Выбор техники

Многие годы мы не раздумывая использовали display: none для скрытия элементов, однако у этого способа есть множество альтернатив — более гибких и производительных. Эта техника остается валидной, но в большинстве случаев лучше использовать другое решение. В первую очередь обратите особое внимание на максимально оптимизированные свойства opacity и transform .

Скрытие элементов средствами CSS

В CSS существует несколько способов скрыть элемент. При этом скрытие может быть как полным, так и чисто визуальным. Разберем по порядку каждый вариант.

Скрытие элемента с помощью opacity: 0

Если быть точным, свойство opacity не скрывает элемент, а лишь определяет его степень прозрачности. Значение 1 означает полную непрозрачность объекта, а значение 0 , соответственно, приводит к полной прозрачности, в результате чего элемент перестает быть виден для посетителя. Последняя часть предложения важна: элемент будет скрыт лишь визуально, но при этом он будет занимать свое место на странице, влиять на положение других элементов, и с ним можно будет взаимодействовать (к примеру, он станет непрозрачным при наведении мыши, если определить соответствующий стиль для состояния :hover ). Скрин-ридеры также будут видеть данный элемент.

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

Скрытие элемента с помощью visibility: hidden

В отличие от свойства прозрачности, свойство visibility специально предназначено для визуального скрытия элементов. Значение hidden скрывает элемент, а значение visible — показывает. Как и в случае с opacity , элемент продолжает занимать свое место на странице, однако взаимодействовать с элементом, скрытым с помощью visibility: hidden , нельзя. Скрин-ридеры не видят такой элемент.

Свойство visibility не реагирует на свойство transition , а это означает, что изменение значения с hidden на visible (либо наоборот) будет происходить мгновенно.

На практике для временного скрытия элементов часто используется два свойства сразу — visibility и opacity (в одном из практических уроков мы уже показывали этот прием). При этом убивается сразу несколько зайцев: с помощью visibility элемент скрывается как положено (в т. ч. от скрин-ридеров), а с помощью opacity обеспечивается плавное появление элемента в необходимый момент.

Скрытие элемента с помощью display: none

Свойство display со значением none стоит использовать в том случае, если вам нужно полностью скрыть элемент. Такой объект (и все его дочерние элементы) не только перестает быть виден посетителю и скрин-ридеру, но и не занимает места на странице и не влияет на расположение других элементов. Всё выглядит так, словно элемента и нет. Естественно, взаимодействовать с элементом, который скрыт данным образом, тоже невозможно.

Как и в случае со свойством visibility , свойство display не поддерживает плавные переходы transition .

Скрытие элемента с помощью position: absolute

Еще один способ скрыть элемент исключительно визуально — задать ему абсолютное позиционирование, выдернув из общего потока документа, и затем переместить далеко за пределы видимой области путем установки больших отрицательных значений для свойств top и left . Например:

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

Далее в учебнике: CSS Grid Layout — будущее уже здесь.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *