visibility
В visibility показывает собственность CSS или скрывает элемент без изменения макета документа. Свойство также может скрывать строки или столбцы в .
Try it
Чтобы скрыть элемент и удалить его из макета документа , установите для свойства display значение none вместо использования visibility .
Syntax
/ * Значения ключевых слов * / visibility: visible; visibility: hidden; visibility: collapse; / * Глобальные значения * / visibility: inherit; visibility: initial; visibility: revert; visibility: revert-layer; visibility: unset;
Свойство visibility указывается в качестве одного из значений ключевых слов, перечисленных ниже.
Values
Видима коробка с элементами.
Поле элемента невидимо (не нарисовано), но все равно влияет на макет как обычно. Потомки элемента будут видны, если для них visibility установлена на visible . Элемент не может получить фокус (например, при навигации по индексам вкладок ).
collapse ключевое слово имеет различные эффекты для различных элементов:
- Для строк , столбцов, групп столбцов и групп строк строки или столбцы скрыты, а занимаемое ими пространство удаляется (как если бы display : none них не был применен к столбцу / строке Таблица). Однако размер других строк и столбцов по-прежнему рассчитывается так, как если бы присутствовали ячейки в свернутых строках или столбцах. Это значение позволяет быстро удалить строку или столбец из таблицы без принудительного пересчета ширины и высоты для всей таблицы.
- Свернутые элементы flex и аннотации ruby скрываются,а место,которое они занимали бы,удаляется.
- Для других элементов collapse обрабатывается так же, как hidden .
Accessibility concerns
Использование hidden значения visibility для элемента приведет к его удалению из дерева доступности . Это приведет к тому, что элемент и все его дочерние элементы больше не будут объявляться технологией чтения с экрана.
Interpolation
При анимации значения видимости интерполируются между visible и not-visible . Поэтому одно из начальных или конечных значений должно быть visible , иначе интерполяция невозможна. Значение интерполируется как дискретный шаг, где значения временной функции от 0 до 1 сопоставляются с visible и другими значениями временной функции (которые возникают только в начале/конце перехода или в результате cubic-bezier() функции со значениями y за пределами [0, 1]) сопоставляются с более близкой конечной точкой.
Notes
- Поддержка visibility: collapse отсутствует или частично неверен в некоторых современных браузерах. Это может быть неправильно обработано как visibility: hidden на элементах, кроме строк и столбцов таблицы.
- visibility: collapse может изменить макет таблицы, если таблица содержит вложенные таблицы внутри свернутых ячеек, если только visibility: visible явно не указана для вложенных таблиц.
Formal definition
Как прятать
Зависит от того, что вы пытаетесь сделать. Есть и другие варианты как спрятать блок и даже специальный атрибут.
Если вам приходится что-то прятать, то лучше всего это вообще убрать: сайт легче, код чище… ошибок меньше! Но если вам нужно, чтобы оно там пряталось до поры, а потом кому-то пригодилось — это другое дело. Здесь важно не ошибиться с выбором способа.
Самый простой и популярный — display: none, он работает как топор: элемент как будто вырубают из HTML. Его не видно на странице и соседние блоки про него ничего не знают. Просто нет и всё. Его даже скринридеры игоририруют и не читают содержимое — будьте аккуратнее с этим.
Что интересно, несмотря на полное вырубание элемента, браузеры всё равно загружают картинку из img с display: none. Если же картинка указана фоном, то Chrome и Edge её тоже загружают, а Firefox и Safari — нет. Ну, разные у них взгляды на оптимизацию загрузки, что поделать.
Другой способ — visibility: hidden, он работает как кольцо всевластья: элемент вроде здесь и соседние блоки его чувствуют, но его не видно. И чем это отличается от opacity: 0? Opacity просто делает элемент прозрачным (или полупрозрачным), а visibility: hidden ещё не даёт с ним взаимодействовать: навести, кликнуть, сфокусировать.
/* Прячет */ .one-ring < visibility: hidden; >/* Не сработает */ .one-ring:hover
У visibility: hidden есть другая приятная особенность: свойство наследуется, а значит ребёнок невидимого родителя может сменить видимость на visible. Такой трюк не пройдёт ни с display: none, ни с opacity: 0. С ним удобно делать всплывающие меню и подказки.
Иногда нужно, чтобы элемент не мешал дизайну, но при этом не прятался от скринридеров, оставаясь частью содержимого. Ну не нарисовал дизайнер здесь заголовка, а по логике документа он здесь нужен. Вот бы нам что-то вроде display: hidden или visibility: none! Это я только что придумал, в природе их не существует.
Недавно в черновике CSS Display третьего уровня появилось свойство box-suppress со значениями show, discard и hide. Оно отвязывает видимость блока от display — ведь с обратной стороны от none есть не только block, но и inline, flex, grid. Значение discard привычно вырубает элемент, а hide делает то самое волшебное комбо. Читайте подробнее у Рейчел Эндрю.
К сожалению, до box-suppress нам ещё долго ждать. Его не только ещё нет в браузерах, но уже в том черновике — недавно его перенесли в следующий уровень, чтобы закончить текущий вовремя. Так что придётся делать магию самим — следите за руками.
Есть такой паттерн «visually hidden» или «визуально спрятанный», чтобы прятать элементы из дизайна, но оставлять доступным их содержимое. Про другие нюансы со скринридерами читайте у Тима Райта. Как это работает: вы делаете универсальный служебный класс и добавляете его к элементам, которые нужно доступно спрятать. Обычно его так и называют: visually-hidden, через дефис.
Важный за головок, которого нет
Если посмотреть что внутри, то это обычный position: absolute плюс clip, который обрезает элемент до нуля. То есть он не влияет на соседей и становится невидимым. Все остальные свойства добавляют универсальности и кроссбраузерности, чтобы класс можно было не глядя шлёпнуть на любой элемент. Подробнее читайте в справке к ally.js Родни Рейма.
А вы знали, что любому элементу можно добавить атрибут hidden и он пропадёт? Теперь знаете! В современных браузерах на этот атрибут повешен тот самый display: none, который вырубает элемент. Он бинарный как required или checked, так что его удобно выставлять через JavaScript. Только не забудьте добавить в стили [hidden] < display: none >для IE 10, Safari 5 и других старых браузеров.
Вырублен // JS div.hidden = true;Это почти всё, что вам нужно знать про прятки в CSS. Попробуйте эти способы, они все хороши в разных ситуациях. Главное, не рубите с плеча и думайте о доступном содержимом.