visibility
The visibility CSS property shows or hides an element without changing the layout of a document. The property can also hide rows or columns in a <table> .
Try it
To both hide an element and remove it from the document layout, set the display property to none instead of using visibility .
Syntax
The visibility property is specified as one of the keyword values listed below.
Values
The element box is visible.
The element box is invisible (not drawn), but still affects layout as normal. Descendants of the element will be visible if they have visibility set to visible . The element cannot receive focus (such as when navigating through tab indexes).
The collapse keyword has different effects for different elements:
- For <table> rows, columns, column groups, and row groups, the row(s) or column(s) are hidden and the space they would have occupied is removed (as if display : none were applied to the column/row of the table). However, the size of other rows and columns is still calculated as though the cells in the collapsed row(s) or column(s) are present. This value allows for the fast removal of a row or column from a table without forcing the recalculation of widths and heights for the entire table.
- Collapsed flex items and ruby annotations are hidden, and the space they would have occupied is removed.
- For other elements, collapse is treated the same as hidden .
Accessibility concerns
Using a visibility value of hidden on an element will remove it from the accessibility tree. This will cause the element and all its descendant elements to no longer be announced by screen reading technology.
Interpolation
When animated, visibility values are interpolated between visible and not-visible. One of the start or ending values must therefore be visible or no interpolation can happen. The value is interpolated as a discrete step, where values of the timing function between 0 and 1 map to visible and other values of the timing function (which occur only at the start/end of the transition or as a result of cubic-bezier() functions with y values outside of [0, 1]) map to the closer endpoint.
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 .
Как скрыть блок div средствами HTML, CSS, JS и Bootstrap
Сегодня я расскажу, как скрыть блок <div> средствами HTML , CSS, JS и Bootstrap. Посчитал я, что, возможно, эта статья будет вам очень полезная по причине того, что вы не один раз будете сталкиваться с вопросом, как скрыть блок на сайте.
На практике меня этот способ очень спасал, когда нужно было убрать какие-то элементы с сайта, которые не я делал. Да, можно поискать, в каких файлах этот блок есть и удалить вручную, но не всегда это эффективно, так как можно поломать весь php-цикл. Так вот, сегодня покажу как легко и быстро скрывать такие блоки.
Вот такой будет у нас стандартный код на HTML:
Результат будет вот таким:
Теперь скроем блок №1 – « Здравствуйте, это мой блок №1 ».
Как скрыть элемент блока на сайте – HTML5
HTML5 очень функционален и в нем есть много дополнительных тегов и атрибутов, которые упрощают жизнь создателям сайтов. Одним из таких атрибутов является « hidden ».
Атрибут « hidden » сделает блок <div> невидимым. Для этого достаточно прописать в строке №6 к блоку <div> атрибут « hidden »:
Результат будет вот таким:
Как видите, блок №1 спрятался и остался только блок №2 , так как я не прописал к нему тег <div> с атрибутом « hidden ».
Как скрыть элемент блока на сайте – CSS
В CSS есть несколько способов, чтобы скрыть элемент <div> на сайте, например, используя « display ».
Итак, создайте для блока <div> class, например, «blok1» :
Теперь в CSS пропишите вот такой стиль:
Блок с классом « blok1 » исчезнет:
Можно скрыть блок, используя прозрачность « opacity »:
Можно скрыть блок, используя «visibility» со значением «hidden» :
Как скрыть элемент блока на сайте – JavaScript
Вы наверное такого нигде не видели, может этого никто и не использует, но этот способ работает и очень таки не плохо. Вставить код JavaScript нужно в самом низу веб страницы, то есть после </html> :
blok1 – это класс <div>
Можно и вот таким способом:
Если прописать <div> не « class », а « id »:
Тогда код будет вот таким:
idblok1 — « ID » блока <div> :
Можно и вот таким способом:
Как скрыть элемент блока на сайте для мелких экранов – BootStrap3
Если вам нужно спрятать большую картинку или блок <div> на маленьких устройствах (расширение экрана ниже <768px ), то в BootStrap есть уже готовые стили:
Мобильные устройства (<768px) — .visible-xs, .hidden-xs
Планшеты (768px — 992px) — .visible-sm, .hidden-sm
Десктопы (992px — 1200px) — .visible-md, .hidden-md
Большие экраны (>1200px) — .visible-lg, .hidden-lg
Different ways to hide an HTML Element
There are different ways to hide an HTML element from the client, just hiding not removing.
We need to hide p.hide element, so the user can’t see it.
Display:
Display css property, display is the most important and most used css property to control HTML elements layout.
display:none; can be used to hide an HTML element from the view and it will appear as if it was not there on the page, means the HTML element will be hidden without blocking any space.
Example: Text 1 | Text 2 | Text 3
If we apply display:none; on Text 2, it will be: Text 1 | | Text 3
So to hide p.hide element using display property:
Visibility:
Visibility property is the CSS property to manage HTML visibility, unlike display which has different values to control the element layout, visibility is used jut for show and hide elements
visibility: hidden can be used to hide an element from the client, but it will keep the element space visible like this: Text 1 | | Text 3
When to use which? based on requirements and the case you have, you just need to test it on all browsers, and there will be an unrecognizable performance differences between different ways
Performance differences between visibility:hidden and display:none
Join the Stack Overflow Community Stack Overflow is a community of 7.1 million programmers, just like you, helping each…
Opacity:
Opacity property is controlling the transparency of the html element, so we can use it to make the element fully transparent and this will hide the element from the client view.
Just make sure to test it on all browsers because on older IE browsers it had some special ways to implement. (hope that no one still using old IE browsers, because the wont see many things any way 🙂 )
And the same as Visibility property, it will hide the element but will keep blocking its space, so the client will see an empty space instead of the element.
Background color and color
While it is rarely used, but we can change the background-color element css property and all child elements to be the same as the background color of the page or the same as container background.
Will need to change the text color as well to make sure that text is not visible as well.
And on some elements we may need to remove borders, that’s why this way is not common to use.
Font size:
We can hide text elements by setting font-size property to 0
Position:
Using the position property and top left we can make the control appear outside the client view.