Существует несколько способов скрыть элемент в CSS, но они различаются тем, как они влияют на доступность, макет, анимацию, производительность и обработку событий.
Анимация
Некоторые параметры скрытия CSS — это все или ничего. Элемент либо полностью виден, либо полностью невидим, промежуточного состояния нет. Другие, такие как прозрачность, могут иметь диапазон значений, поэтому становится возможной интерполированная анимация CSS.
Доступность
Каждый метод, описанный ниже, визуально скрывает элемент, но он может скрывать или не скрывать содержимое от вспомогательных технологий. Например, программа чтения с экрана все еще может объявлять крошечный прозрачный текст. Дополнительные свойства CSS или атрибуты ARIA, которые
Имейте в виду, что анимация также может вызвать у некоторых людей дезориентацию, мигрень, судороги или другой физический дискомфорт. Рассмотрите возможность использования
Обработка событий
Скрытие либо остановит запуск событий для этого элемента, либо не будет иметь никакого эффекта — то есть элемент не виден, но
Спектакль
После того, как браузер загрузит и проанализирует объектную модель HTML DOM и CSS, страница визуализируется в три этапа:
Макет: сгенерируйте геометрию и положение каждого элемента
Paint: рисовать пиксели для каждого элемента
Композиция: расположение слоев элементов в соответствующем порядке.
Эффект, который вызывает только изменения композиции, заметно более плавный, чем эффект, влияющий на макет. В некоторых случаях браузер также может использовать аппаратное ускорение.
1. opacityиfilter: opacity ()
Свойствам opacity: Nи filter: opacity (N) можно передать число от 0 до 1 или процентное значение от 0% до 100%, обозначающее полностью прозрачный и полностью непрозрачный соответственно.
В современных браузерах между ними мало практической разницы, хотя filterих следует использовать, если одновременно применяются несколько эффектов (размытие, контраст, оттенки серого и т. д.).
Непрозрачность можно анимировать, и она обеспечивает высокую производительность, но следует помнить, что полностью прозрачный элемент остается на странице и может вызывать события.
метрика эффект
поддержка браузера хорошо, но IE поддерживает только opacityот 0 до 1
доступность содержимое не читается, если установлено 0 или 0%
макет повлиял? нет
требуется рендеринг сочинение
спектакль лучше всего, можно использовать аппаратное ускорение
кадры анимации возможны? да
события срабатывают при скрытии? да
2.
opacityвлияет на весь элемент, но также можно установить свойства color,
Каждое свойство можно анимировать отдельно для создания интересных эффектов. Обратите внимание, что прозрачность не может быть применена к элементам с фоновым изображением, если только они не созданы с использованием
transparent: полностью прозрачный (промежуточная анимация невозможна)
rgba (r, g, b, a): красный, зеленый, синий и альфа
hsla (h, s, l, a): оттенок, насыщенность, яркость и альфа
#RRGGBBAAи#RGBA
метрика эффект
поддержка браузера хорошо, но IE поддерживает только transparentиrgba
доступность контент все еще читается
макет повлиял? нет
требуется рендеринг рисование
спектакль хорошо, но не так быстро, какopacity
кадры анимации возможны? да
события срабатывают при скрытии? да
3.transform
Свойство transformможно использовать для перевода (перемещения), масштабирования, поворота или наклона элемента. A scale (0) или translate (-999px, 0px) вне экрана скроет элемент:
transformпредлагает отличную производительность и аппаратное ускорение, поскольку элемент эффективно перемещается в отдельный слой и может быть анимирован в 2D или 3D. Исходное пространство макета остается как есть, но полностью скрытый элемент не вызывает никаких событий.
метрика эффект
поддержка браузера хорошо
доступность контент все еще читается
макет повлиял? нет — исходные размеры остаются
требуется рендеринг сочинение
спектакль лучше всего, можно использовать аппаратное ускорение
кадры анимации возможны? да
события срабатывают при скрытии? нет
4.
Свойство
метрика эффект
поддержка браузера только современные браузеры
доступность контент все еще читается некоторыми приложениями
макет повлиял? нет — исходные размеры остаются
требуется рендеринг покрасить
спектакль разумный
кадры анимации возможны? да, в современных браузерах
события срабатывают при скрытии? нет
5.visibility
Свойство visibilityможет быть установлено на visibleили hiddenдля отображения и скрытия элемента:
Пространство, используемое элементом, остается на месте, если не используется collapseзначение.
метрика эффект
поддержка браузера превосходно
доступность контент не прочитан
макет повлиял? нет, если collapseне используется
требуется рендеринг состав, если collapseне используется
спектакль хорошо
кадры анимации возможны? нет
события срабатывают при скрытии? нет
6.display
displayвероятно, наиболее часто используемый метод сокрытия элементов. Значение noneэффективно удаляет элемент, как если бы он никогда не существовал в DOM.
Тем не менее, это, возможно, худшее свойство CSS для использования в большинстве случаев. Его нельзя анимировать, и он вызовет макет страницы, если только элемент не будет перемещен из потока документа с помощью или не будет принято position: absoluteновое свойство.contain
displayтакже перегружен такими параметрами, как block, inline, table, flexboxи gridдругими. Возврат к правильному значению после display: none; может быть проблематичным (хотя unsetможет помочь).
метрика эффект
поддержка браузера превосходно
доступность контент не прочитан
макет повлиял? да
требуется рендеринг макет
спектакль бедных
кадры анимации возможны? нет
события срабатывают при скрытии? нет
7. HTML- hiddenатрибут
hiddenАтрибут HTML можно добавить к любому элементу:
Hidden content
чтобы применить стиль браузера по умолчанию:
[hidden] {
display: none;
}
Это имеет те же преимущества и недостатки, что и display: none, хотя может быть полезно при использовании системы управления контентом, которая не допускает изменения стиля.
8. Абсолютposition
Свойство positionпозволяет перемещать элемент из его staticположения по умолчанию в макете страницы с помощью top, bottom, leftи right. Таким absoluteобразом, -positioned элемент может быть перемещен за пределы экрана с помощью left: -999pxили аналогичной команды:
метрика эффект
поддержка браузера отлично, если не использоватьposition: sticky
доступность контент все еще читается
макет повлиял? да, если позиционирование изменилось
требуется рендеринг смотря как
спектакль разумно, если осторожно
кадры анимации возможны? да, на top, bottom, left, иright
события срабатывают при скрытии? да, но может быть невозможно взаимодействовать с элементом за пределами экрана
9. Наложение другого элемента
Элемент можно визуально скрыть, поместив сверху другой элемент того же цвета, что и фон. В этом примере: afterпсевдоэлемент перекрывается, хотя можно использовать любой дочерний элемент:
Хотя технически это возможно, для этого варианта требуется больше кода, чем для других вариантов.
метрика эффект
поддержка браузера превосходно
доступность контент все еще читается
макет повлиял? нет, если абсолютно позиционировано
требуется рендеринг покрасить
спектакль разумно, если осторожно
кадры анимации возможны? да
события срабатывают при скрытии? да, когда псевдо- или дочерний элемент перекрывается
10. Уменьшите размеры
Элемент можно скрыть, уменьшив его размеры с помощью width, height, paddingи
Возможны интересные анимационные эффекты, но производительность заметно лучше с transform.
метрика эффект
поддержка браузера превосходно
доступность контент все еще читается
макет повлиял? да
требуется рендеринг макет
спектакль бедных
кадры анимации возможны? да
события срабатывают при скрытии? нет
Скрытый выбор
display: noneбыл любимым решением для скрытия элементов в течение многих лет, но его заменили более гибкие, анимационные варианты. Это все еще действует, но, возможно, только тогда, когда вы хотите навсегда скрыть контент от всех пользователей. transformили opacityявляются лучшим выбором при рассмотрении производительности.
Поднимите свои навыки работы с CSS на новый уровень с помощью CSS Master. Изучите архитектуру CSS, отладку, пользовательские свойства, расширенные методы компоновки и анимации, как использовать CSS с SVG и многое другое.