visibility

visibility

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

Синтаксис

visibility: visible | hidden | collapse | inherit

Значения

visible Отображает элемент как видимый. hidden Элемент становится невидимым или правильней сказать, полностью прозрачным, поскольку он продолжает участвовать в форматировании страницы. collapse Если это значение применяется не к строкам или колонкам таблицы, то результат его использования будет таким же, как hidden . В случае использования collapse для содержимого ячеек таблиц, то они реагируют, словно к ним было добавлено display: none . Иными словами, заданные строки и колонки убираются, а таблица перестраивается по новой. Это значение не поддерживается браузером Internet Explorer. inherit Наследует значение родителя.

HTML5 CSS2.1 IE Cr Op Sa Fx

     .descr < visibility: hidden; >.b:hover + .descr    

Объектная модель

[window.]document.getElementById(» elementID «).style.visibility

Браузеры

Internet Explorer до версии 7.0 включительно не поддерживает значение inherit и collapse .

Браузер Safari до версии 4.0 не поддерживает значение collapse .

Opera до версии 9.5 воспринимает значение collapse как hidden для всех элементов.

Источник

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 .

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

/* Keyword values */ visibility: visible; visibility: hidden; visibility: collapse; /* Global values */ visibility: inherit; visibility: initial; visibility: revert; visibility: revert-layer; visibility: unset; 

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 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 easing function between 0 and 1 map to visible and other values of the easing 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.

Notes

• Support for visibility: collapse is missing or partially incorrect in some modern browsers. It may not be correctly treated like visibility: hidden on elements other than table rows and columns.
• visibility: collapse may change the layout of a table if the table has nested tables within the cells that are collapsed, unless visibility: visible is specified explicitly on nested tables.

Formal definition

Formal syntax

Источник

CSS visibility Property

The visibility property specifies whether or not an element is visible.

Tip: Hidden elements take up space on the page. Use the display property to both hide and remove an element from the document layout!

Default value:	visible
Inherited:	yes
Animatable:	yes. Read about animatable
Version:	CSS2
JavaScript syntax:	object.style.visibility=»hidden» Try it

Browser Support

The numbers in the table specify the first browser version that fully supports the property.

CSS Syntax

Property Values

), row groups (), columns (), column groups (). This value removes a row or column, but it does not affect the table layout. The space taken up by the row or column will be available for other content.

Value	Description	Demo
visible	Default value. The element is visible	Demo ❯
hidden	The element is hidden (but still takes up space)	Demo ❯
collapse	Only for table rows (

More Examples

Example

This example demonstrates how to make a table element collapse:

Related Pages

COLOR PICKER

Report Error

If you want to report an error, or if you want to make a suggestion, do not hesitate to send us an e-mail:

Thank You For Helping Us!

Your message has been sent to W3Schools.

Top Tutorials

Top References

Top Examples

Get Certified

W3Schools is optimized for learning and training. Examples might be simplified to improve reading and learning. Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content. While using W3Schools, you agree to have read and accepted our terms of use, cookie and privacy policy.

Источник

visibility

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

Если при помощи opacity можно гибко изменять прозрачность элемента и делать его, например, видимым на 33%, то свойство visibility имеет только два состояния: видимый и невидимый.

Пример

Скопировать ссылку «Пример» Скопировано

   
Эрнесту Хемингуэю приписывают авторство.
  
Многие писатели упражнялись в жанре сверхмалой прозы.
  
В этом жанре можно написать и автобиографию.
   article> p class="visibility-visible">Эрнесту Хемингуэю приписывают авторство. p> p class="visibility-hidden">Многие писатели упражнялись в жанре сверхмалой прозы. p> p class="visibility-visible">В этом жанре можно написать и автобиографию. p> article>    Скопировать Скопировано Не удалось скопировать   

 .visibility-hidden  visibility: hidden;> .visibility-hidden  visibility: hidden; >    Скопировать Скопировано Не удалось скопировать   

Обратите внимание, что скрытый параграф всё равно влияет на поток документа и занимает отведённое ему место.

Как пишется

Скопировать ссылку «Как пишется» Скопировано

У свойства visibility всего два используемых значения:

• visible — значение по умолчанию, элемент видим.
• hidden — элемент не виден на странице, но занимает отведённое ему место, влияет на поток документа.

Важный момент: при значении hidden элемент становится невидимым для программ чтения с экрана (скринридеров), а также на него нельзя будет попасть при навигации с помощью клавиатуры. Стоит помнить об этом при разработке, если вам важна доступность сайта.

Ещё есть устаревшее значение collapse , которое нужно только при работе с таблицами. Современными браузерами оно не поддерживается и обрабатывается как hidden .

Так же можно применять в качестве значения стандартные ключевые слова: inherit , initial и unset .

Подсказки

Скопировать ссылку «Подсказки» Скопировано

💡 Свойство нельзя анимировать при помощи transform 😒

💡 Спрятанный элемент скрывается из так называемого accessability tree — становится недоступен для скринридеров и не может получить фокус при перемещении с помощью клавиатуры.

На практике

Скопировать ссылку «На практике» Скопировано

Дмитрий Семиградский советует

Скопировать ссылку «Дмитрий Семиградский советует» Скопировано

🛠 Важная особенность свойства, что оно, в отличие от display : none или opacity : 0 , не просто прячет родителя, а наследуется на все дочерние элементы. Это значит, что это поведение можно переписать и вложенный элемент с visibility : visible будет видно. Это можно использовать для кастомизации разметки, сгенерированной сторонней библиотекой.

В примере ниже представьте, что блок в рамке сгенерирован сторонней библиотекой.

Нажмите на кнопку «Кастомизировать». Для блока будет указано visibility : hidden . Весь блок будет скрыт. Для элементов, которые хотим оставить видимыми, добавляем visibility : visible .

Алёна Батицкая советует

Скопировать ссылку «Алёна Батицкая советует» Скопировано

🛠 Обычно, когда я хочу точно-точно спрятать элемент, чтобы он не получал фокус ни при каких обстоятельствах и не был виден даже скринридерам, но при этом хочу плавно показать его по какому-то триггеру, то указываю одновременно несколько скрывающих свойств и использую трюк с transition :

 .parent  padding: 15px; border: 1px solid currentColor;> .block  visibility: hidden; opacity: 0; transition: visibility 0s linear 300ms, opacity 300ms;> .parent:hover .block  visibility: visible; opacity: 1; transition: visibility 0s linear 0s, opacity 300ms;> .parent  padding: 15px; border: 1px solid currentColor; > .block  visibility: hidden; opacity: 0; transition: visibility 0s linear 300ms, opacity 300ms; > .parent:hover .block  visibility: visible; opacity: 1; transition: visibility 0s linear 0s, opacity 300ms; >    Скопировать Скопировано Не удалось скопировать   

   
Я простой текст. Наводишь курсор и я показываюсь  div class="parent"> div class="block">Я простой текст. Наводишь курсор и я показываюсьdiv> div>    Скопировать Скопировано Не удалось скопировать   

Источник