- 10 способов спрятать элементы на CSS
- Анимации
- Доступность
- Обработка событий
- Производительность
- Способ #1. opacity и filter: opacity()
- Способ #2. alpha-канал
- Способ #3. transform
- Способ #4. clip-path
- Способ #5. visibility
- Способ #6. display
- Способ #7. Атрибут hidden
- Способ #8. Абсолютное позиционирование
- Способ #9. Перекрытие другим элементом
- Способ #10. Уменьшение размеров
- Выбор техники
- Как сделать css-анимацию по скрытию элемента?
10 способов спрятать элементы на CSS
Существует множество способов скрыть элементы на странице — и все они по-разному влияют на доступность, разметку, анимации, производительность и обработку событий.
Анимации
Некоторые CSS-свойства принимают только два крайних значения — все или ничего. Элемент либо полностью видим, либо полностью невидим, а промежуточных значений не существует.
Другие свойства, например, прозрачность, могут принимать значения в определенном диапазоне. К таким свойствам можно применить CSS-анимации для плавного изменения.
Помните, что анимация может вызывать дезориентацию, мигрень, судороги или другой физический дискомфорт у некоторых людей. Поэтому всегда используйте медиа-запрос prefers-reduced-motion, для учета пользовательских предпочтений.
Доступность
Все описанные ниже приемы обеспечивают визуальное скрытие элемента на странице, но они не всегда прячут его от ассистивных технологий. Например, скринридеры продолжают читать текст, даже если вы уменьшите его размер до крошечного и сделаете цвет прозрачным.
Для изменения этого поведения могут потребоваться дополнительные CSS-свойства или ARIA-атрибуты, вроде aria-hidden=»true» .
Обработка событий
Сокрытие элемента не всегда означает, что он перестает быть интерактивным. Иногда на невидимые блоки можно кликнуть, а значит, будут срабатывать привязанные к ним обработчики событий.
Производительность
После того как браузер загрузит и распарсит HTML DOM и CSSOM, страница рендерится (и перерендеривается) в три этапа:
- Layout: генерируется геометрия и позиция каждого элемента;
- Paint: отрисовываются пиксели каждого элемента;
- 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
Способ #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 можно добавить к любому элементу:
К нему будут применены дефолтные стили браузера:
Эта техника имеет те же преимущества и недостатки, что и предыдущая, но она может быть удобна для использования в различных 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-анимацию по скрытию элемента?
Суть вот в чем, если задать элементу анимацию через keyframes, то она всегда будет исполняться когда элемент становиться видимым. Пример — jsfiddle.net/Zvyxd
Как-то можно добиться обратного эффекта когда элемент становиться display: none;?
Вы хотите сделать плавное появление и скрытие? Если да, то зачем keyframes? Можно же для элемента сделать доп.класс который отвечает за его скрытие или показ. И удалять его или добавлять.
jsfiddle.net/YxsTV
@BelkinVadim вы допускаете примерно такую же ошибку. Элемент прозрачный, но не скрытый — uimages.ru/img/6kmsacqcck.png Хотя по нему и не получается кликнуть и событие вряд ли сработает, сролл появляется и место он занимает. В общем единственным правильным решением это будет обработка событий по завершению анимации, как-то так — jsfiddle.net/Zvyxd/8
jsfiddle.net/Zvyxd/8 в этом примере скролл появляется при показе элемента. он будет появляться в любом случае если элемент у вас будет выходить за рамки размеров окна. Ну а вообще согласен с тем что лучше после завершения анимации элемент скрывать.
@BelkinVadim При показе это естественно, а вот в вашем примере он остается и после того как стал прозрачным, что как бы плохо. Только display: none; полностью скрывает отображение элемента на странице.
Я очень костыльно написал на скорую руку, но логику вы по идее должны понять, почему анимация будет работать.
@DeLaVega то что вы предлагаете не скрывает элемент, а делает его прозрачным. Он остается на своем месте, по нему можно будет кликать, будут срабатывать события и так далее. Все эти танцы с дополнительными классами я знаю, а так же можно ловить событие onAnimationEnd и в конечном счете скрывать его, но это решение не такое простое, как с показом элемента.
Дело в том, что у ксс анимаций нет колбэка. И раз вы всё равно используете js, то почему бы и анимацию целиком не написать? И да, я открывал в фоксе, у меня тоже изначально не было никакой анимации.
А то что я вам предлагаю то вместо хайд у вас будет нечто .animate()
@DeLaVega Дело в том, что у css анимации есть колбэк — www.sitepoint.com/css3-animation-javascript-event-. , но как-то не хочется. Суть вопроса в том, чтобы это было так же просто как и с показом. А в FireFox и правда не работает без префиксов -moz, я написал только для -webkit. И кстати нативная анимация на css на много быстрее и плавнее нежели js, просто не хочется вешать обработчики на события по анимации, но видимо придется. Кстати события есть как и для анимации (onAnimationEnd) так и для transition (onTransitionEnd).
@Piterski да, вы правы на счёт плавности и скорости, но всё зависит от того где применять. И как вы заметили, колбэк идёт всё равно на js, а не внутри ксс-а.