Html visible: Hide or show HTML elements using visibility property in JavaScript

Leave a Comment / Html / By /

visibility | WebReference

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

Краткая информация

Значение по умолчаниюvisible
НаследуетсяДа
ПрименяетсяКо всем элементам
АнимируетсяДа

Синтаксис

visibility: visible | hidden | collapse
Синтаксис
ОписаниеПример
<тип>Указывает тип значения.<размер>
A && BЗначения должны выводиться в указанном порядке.<размер> && <цвет>
A | BУказывает, что надо выбрать только одно значение из предложенных (A или B).normal | small-caps
A || BКаждое значение может использоваться самостоятельно или совместно с другими в произвольном порядке.width || count
[ ]Группирует значения.[ crop || cross ]
*Повторять ноль или больше раз.[,<время>]*
+Повторять один или больше раз.<число>+
?Указанный тип, слово или группа не является обязательным.inset?
{A, B}Повторять не менее A, но не более B раз.<радиус>{1,4}
#Повторять один или больше раз через запятую.<время>#

Значения

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

Песочница

Винни-Пух был всегда не прочь немного подкрепиться, в особенности часов в одиннадцать утра, потому что в это время завтрак уже давно окончился, а обед ещё и не думал начинаться. И, конечно, он страшно обрадовался, увидев, что Кролик достаёт чашки и тарелки.

visiblehidden

div {
  visibility: {{ playgroundValue }};
}

Пример

<!DOCTYPE html> <html> <head> <meta charset=»utf-8″> <title>visibility</title> <style> .button { background: #fc0; padding: 10px 20px; display: inline-block; } .descr { visibility: hidden; } .button:hover + .descr { visibility: visible; } </style> </head> <body> <div>Кнопка</div> <p> Данная эксклюзия является подмножеством астрациональных супремативных монотенных федоний кадонарного экстрафазория.
</p> </body> </html>

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

Объект.style.visibility

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

СпецификацияСтатус
CSS Basic Box ModelРабочий проект
CSS TransitionsРабочий проект
CSS Level 2 (Revision 1)Рекомендация
Спецификация

Каждая спецификация проходит несколько стадий одобрения.

  • Recommendation (Рекомендация) — спецификация одобрена W3C и рекомендована как стандарт.
  • Candidate Recommendation (Возможная рекомендация) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
  • Proposed Recommendation (Предлагаемая рекомендация) — на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
  • Working Draft (Рабочий проект) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
  • Editor’s draft (Редакторский черновик) — черновая версия стандарта после внесения правок редакторами проекта.
  • Draft (Черновик спецификации) — первая черновая версия стандарта.

Браузеры

visible, hidden4
12		1411
collapse81219.541
visible, hidden1161
collapse1104
Браузеры

В таблице браузеров применяются следующие обозначения.

  • — элемент полностью поддерживается браузером;
  • — элемент браузером не воспринимается и игнорируется;
  • — при работе возможно появление различных ошибок, либо элемент поддерживается с оговорками.

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

Форматирование

Понимание критерия успеха 2.4.7: Фокус виден | ВАИ

Критерий успеха (SC)

Любой пользовательский интерфейс, управляемый с клавиатуры, имеет режим работы, в котором фокус клавиатуры индикатор виден.

Намерение

Цель этого критерия успеха — помочь человеку узнать, какой элемент имеет фокус клавиатуры.

«Режим работы» учетных записей для пользовательских агентов, которые не всегда могут отображать индикатор фокуса, или отображать индикатор фокусировки только при использовании клавиатуры. Пользовательские агенты могут оптимизировать когда отображается индикатор фокусировки, например, он отображается только при использовании клавиатуры. Авторы несут ответственность за предоставление хотя бы одного режима работы, в котором основное внимание видно.

В большинстве случаев существует только один режим работы, поэтому этот критерий успеха применяется. Индикатор фокуса не должен быть ограничен по времени, когда фокус клавиатуры показано, что он должен оставаться.

Обратите внимание, что индикатор фокуса клавиатуры может принимать различные формы. Новое в WCAG 22: этот критерий не определяет форму, но внешний вид фокуса (минимум) определяет, насколько видимым должен быть индикатор. Прохождение Focus Appearance (минимум) соответствует этому критерию успеха.

Преимущества

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

Примеры

  • Когда текстовые поля получают фокус, в поле отображается вертикальная черта, указывающая что пользователь может вставить текст, ИЛИ весь текст выделен, указывая, что пользователь может печатать поверх текста.
  • Когда элемент управления пользовательского интерфейса получает фокус, вокруг него отображается видимая рамка. Это.

Связанные ресурсы

Ресурсы предназначены только для информационных целей, одобрение не подразумевается.

  • Стилизация элементов управления формы с помощью CSS, новый взгляд

Техника

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

Достаточные методы

  1. G149: использование компонентов пользовательского интерфейса, которые выделяются пользовательским агентом при получении фокус
  2. C15: Использование CSS для изменения представления компонента пользовательского интерфейса, когда он получает фокус
  3. G165: использование индикатора фокусировки по умолчанию для платформы, чтобы индикаторы фокусировки будут перенесены
  4. G195: Использование предоставленного автором видимого индикатора фокусировки
  5. C40: Создание двухцветного индикатора фокусировки для обеспечения достаточного контраста со всеми компонентами
  6. SCR31: Использование скрипта для изменения цвета фона или границы элемента с фокусом

Отказы

Ниже приведены распространенные ошибки, которые считаются несоответствующими этому критерию успеха. рабочей группой WCAG.

  • F55: Невыполнение критериев успеха 2.1.1, 2.4.7 и 3.2.1 из-за использования сценария для удаления фокус при получении фокуса
  • F78: Невыполнение критерия успеха 2.4.7 из-за контуров и границ элементов стиля в способ, который удаляет или делает невидимым индикатор визуального фокуса
Вернуться к началу

Обеспечивает логическую и видимую индикацию фокусировки

Интерактивные элементы в большинстве случаев должны быть доступны для фокуса в том порядке, в котором они появляются в исходном коде. Это помогает людям, использующим клавиатуру или другие устройства ввода, следить за фокусировкой в ​​логическом порядке.

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

Примеры

✗ Плохой пример

Атрибут tabindex может настроить естественный порядок фокуса интерактивных элементов, таких как кнопки и поля ввода формы. Например, tabindex="1" позволяет сделать элемент первым на странице, на который можно сфокусироваться, независимо от того, где он появляется в источнике. Однако это нарушает интуитивно понятный порядок фокуса страницы. В следующем примере третья кнопка получит фокус первой, затем — поскольку для первой и второй кнопок не установлено положительное значение tabindex — первая кнопка будет следующей:

Единственный способ гарантировать, что интерактивный элемент получит фокус после элемента «третья кнопка», — это присвоить ему tabindex="2", , а затем присвоить следующему элементу tabindex="3", и т. д., увеличивая значение tabindex для каждого последующего элемента. Это может очень быстро стать непригодным для сопровождения, особенно если со временем страница может накапливать новые активные элементы.

✓ Хороший пример

Для кнопок, ссылок и других интерактивных элементов, которые изначально фокусируемый , лучшая стратегия — вообще избегать использования атрибута tabindex . В следующем примере сначала фокусируется первая кнопка, а затем — третья кнопка. Причина, по которой вторая кнопка не находится в порядке фокуса, заключается в том, что она отключена (с помощью атрибута disabled).

✓ Пример пользовательской кнопки

Однако в некоторых случаях атрибут tabindex полезен для управления фокусом.

При создании пользовательских интерактивных элементов (как при создании веб-компонента) они не всегда автоматически имеют встроенные черты, такие как фокусируемость. Вы должны предоставить их вручную. Чтобы сделать пользовательский элемент фокусируемым, как

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *