Главная » Языки программирования

visibility

Содержание
  1. visibility¶
  2. Демо¶
  3. Синтаксис¶
  4. Значения¶
  5. Примечание¶
  6. Спецификации¶
  7. Описание и примеры¶
  8. visibility
  9. Синтаксис
  10. Значения
  11. Объектная модель
  12. Браузеры
  13. visibility
  14. Синтаксис
  15. Значения
  16. Синтаксис
  17. Интерполяция
  18. Примеры
  19. Базовый пример
  20. HTML
  21. CSS
  22. Пример с таблицей
  23. HTML
  24. CSS
  25. Соображения доступности
  26. Примечания
  27. Спецификация
  28. Совместимость с браузерами
  29. Found a content problem with this page?
  30. visibility
  31. Пример
  32. Как пишется
  33. Подсказки
  34. На практике
  35. Дмитрий Семиградский советует
  36. Алёна Батицкая советует

visibility¶

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

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

Демо¶

Синтаксис¶

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

Значения¶

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

Примечание¶

  • Internet Explorer до версии 7.0 включительно не поддерживает значение collapse .
  • Браузер Safari до версии 4.0 не поддерживает значение collapse .
  • Opera до версии 9.5 воспринимает значение collapse как hidden для всех элементов.

Значение по-умолчанию: visible

Применяется ко всем элементам

Читайте также:  Бретт слаткин секреты python

Спецификации¶

Описание и примеры¶

 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28
 html> head> meta charset="utf-8" /> title>visibilitytitle> style> .button  background: #fc0; padding: 10px 20px; display: inline-block; > .descr  visibility: hidden; > .button:hover + .descr  visibility: visible; > style> head> body> div class="button">Кнопкаdiv> p class="descr"> Данная эксклюзия является подмножеством астрациональных супремативных монотенных федоний кадонарного экстрафазория. p> body> html>

Источник

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

Чтобы скрыть и удалить элемент из разметки, установите свойству display значение none , вместо использования visibility .

Синтаксис

/* Значения */ visibility: visible; visibility: hidden; visibility: collapse; /* Глобальные значения */ visibility: inherit; visibility: initial; visibility: unset;

Свойство visibility указывается в качестве одного из значений ниже.

Значения

Значение по умолчанию, элемент виден.

Элемент не виден (полностью прозрачный, ничего не отображается), но продолжает влиять на шаблон. Потомки элемента могут быть показаны с помощью свойства visibility:visible . Элемент не может получить focus (например, при навигации с помощью tabindex).

* Для строк, столбцов, групп столбцов и групп строк в таблице, которые должны быть удалены (как с помощью display : none применённого к столбцу/строке таблицы). Однако, размер других строк и столбцов должен продолжать вычисляться так, словно скрытые строки/столбцы присутствуют. Это создано для быстрого удаления строк/столбцов из таблицы без дополнительного вычисления ширины и высоты частей таблицы.

  • Для XUL элементов размер всегда равен 0, независимо от других стилей, влияющих на размер, хотя отступы продолжают учитываться.
  • Для других элементов collapse обрабатывается также, как hidden

Синтаксис

Интерполяция

Значения видимости изменяются между видим и не видим. Интерполяция будет, если одно из начальных или конечных значений будет видимо или нет. Если одно из значений visible , интерполируется как дискретный шаг, где значения временной функции от 0 до 1 для visible и другие значения временной функции (которые происходят только в начале/конце перехода, или как результат функции cubic-bezier() со значениями вне [0, 1]) ближе к конечной точке.

Примеры

Базовый пример

HTML

p class="visible">Первый параграф виден.p> p class="not-visible">Второй параграф не виден.p> p class="visible">Третий параграф также виден. Заметь, второй параграф занимает место.p>

CSS

.visible  visibility: visible; > .not-visible  visibility: hidden; >

Пример с таблицей

HTML

table> tr> td>1.1td> td class="collapse">1.2td> td>1.3td> tr> tr class="collapse"> td>2.1td> td>2.2td> td>2.3td> tr> tr> td>3.1td> td>3.2td> td>3.3td> tr> table>

CSS

.collapse  visibility: collapse; > table  border: 1px solid red; > td  border: 1px solid gray; >

Соображения доступности

Использование visibility со значением hidden на элементе удалит его из дерева доступности. Это приведёт к тому, что элемент и все его дочерние элементы больше не будут показаны в скринридерах.

Примечания

  • Поддержка visibility:collapse отсутствует или частично не работает в некоторых современных браузерах. Во многих случаях может не корректно работать visibility:hidden со столбцами и строками.
  • visibility:collapse может изменить шаблон таблицы, если таблица содержит вложенные таблицы, пока visibility:visible не указан явно для вложенной таблицы.

Спецификация

Specification Status Comment
CSS Flexible Box Layout Module
Определение ‘visibility’ в этой спецификации.		 Кандидат в рекомендации Определяет значение collapse применимым к flex элементам
CSS Box Model
Определение ‘visibility’ в этой спецификации.		 Кандидат в рекомендации Без изменений
CSS Transitions
Определение ‘visibility’ в этой спецификации.		 Рабочий черновик Определяет visibility как анимируемое.
CSS Level 2 (Revision 1)
Определение ‘visibility’ в этой спецификации.		 Рекомендация Изначальное определение
Начальное значение visible
Применяется к все элементы
Наследуется да
Обработка значения как указано
Animation type видимость

Совместимость с браузерами

BCD tables only load in the browser

Found a content problem with this page?

This page was last modified on 13 авг. 2022 г. by MDN contributors.

Your blueprint for a better internet.

Источник

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>

Источник

Оцените статью
© 2024 Программирование