visibility: visible ( hidden ) | Как сделать HTML элемент невидимым | CSS

visibility: visible | hidden | collapse | inherit

visibleэлемент видимый
hiddenэлемент и его дочерние теги невидимы (полностью прозрачны) и недоступны (искл., потомки с visibility: visible;)
collapseесли применить tr или col таблицы, то она перестраивается по новому, если к остальным элементам, то работает также как hidden
inheritнаследует значение родителя

Чем отличаются visibility: hidden; от display: none; и opacity: 0;

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

ВНИМАНИЕ! Не все примеры работают в браузере Google Chrome. Мне было лень прописывать свойству animation префиксы -webkit-.

ДемонстрацияЗанимаемое пространствоВидимость потомковДоступностьПоддержка transition и animation
<div>div <b>вложенный</b></div><div></div>
div вложенный
div {visibility: hidden;} div b, div:hover {visibility: visible;}
+ + -+
div {animation: animaciya 8s infinite;} @keyframes animaciya { 80%, 100% {visibility: hidden;} }
div вложенный
div {opacity: 0;} div:hover {opacity: 1;}
+ - +
div {animation: animaciya 8s infinite;} @keyframes animaciya { 80%, 100% {opacity: 0;} }
div вложенный
div {transform: scale(0, 0);} div:hover {transform: none;}
+ - -
div {animation: animaciya 8s infinite;} @keyframes animaciya { 80%, 100% {transform: scale(0, 0);} }
div вложенный
div {height: 0;} div:hover {height: 3em;}
-+ + -+
div {animation: animaciya 8s infinite;} @keyframes animaciya { 80%, 100% {height: 0;} }
div вложенный
div { clip: rect(0, 0, 0, 0); position: absolute; } div:hover {clip: auto;}
- - -
div {animation: animaciya 8s infinite; position: absolute;} @keyframes animaciya { 0% {clip: rect(0, 100px, 3em, 0);} 80%, 100% {clip: rect(0, 0, 0, 0);} }
div вложенный
div {display: none;} div:hover {display: block;}
- - -
div {animation: animaciya 8s infinite;} @keyframes animaciya { 80%, 100% {display: none;} }

С opacity: 0; элемент полностью прозрачен. Дочерние теги, как и сам родитель, доступны, они, например, могут получать фокус.

С transform: scale(0, 0); элемент полностью сужен, а значит и недоступен. Он продолжает занимать то же пространство, что и при transform: scale(1, 1);.

С height: 0; коробка блока равна сумме margin + padding + border [см. боксовая модель HTML]. Если они не заданы, у блока останется его блочность, иначе говоря, строчные элементы, следующие после него, будут писаться с новой строки. Содержимое тега доступно, но, поскольку блок не имеет высоты, на него наезжают нижестоящие элементы (см. тут второй пример). Скрыть содержимое можно с помощью свойства overflow.

Свойство clip работает только в паре с position: absolute;. При clip: rect(0, 0, 0, 0); элемент обрезан со всех сторон и аналогичен display: none;.

При display: none; веб-страница формируется так, словно элемента вместе с его содержимым нет.

Из перечисленных transition и animation не работает с display, height: auto; и clip: auto;.

На CSS можно добиться поставленного результата несколькими способами. Так, например, отображения, аналогичного display: none;, коли добавить position: absolute; или position: fixed;.

навести
навести

<div class="kak-display">навести<div></div>навести</div>

Как сделать текст невидимым на HTML странице

И Google, и Яндекс наказывают за текст, который пользователи никогда не увидят. У них есть свои браузеры, а значит технология, которая позволяет выявить это. То есть нужно подумать каким образом и в каком случае скрытый текст будет виден посетителю веб-проекта, например, в результате нажатия на кнопку (см. как сделать такую кнопку) или в виде всплывающего сообщения.

Я так и не поняла приемлема ли ситуация, когда человек видит логотип, а поисковый робот надпись с названием сайта:

Следует учесть, что скрытый текст не всегда добавляется с целью обмана. Например, если на вашем сайте имеется контент, к которому сложно получить доступ поисковым системам (JavaScript, изображения, Flash-файлы и т. п.), вы можете добавить текстовое описание для этих элементов, чтобы сделать сайт более удобным для индексирования. [support.google.com]
В любом случае, нужно прописать изображению атрибут alt. По нему Google тоже передаёт анкорный вес.

Помимо способов, описанных выше, текст можно сделать прозрачным. Его можно выделить:

div будет прозрачным div
div b {color: blue;}
div будет прозрачным div
div b {color: blue;}

Или очень маленьким:

div невидимый текст div
div b {font-size: medium;}

visibility: collapse; для таблицы и нет. Есть ли разница?

visibility: collapse; для всех элементов, кроме тегов таблицы работает аналогично visibility: hidden;, что полезно для долгого transition. Этим способом был реализован этот вариант таб-вкладок.

исчезающий текст
<style>
#raz div {
  visibility: collapse;
  transition: 0s 999999s;
}
#raz input:nth-of-type(1):focus ~ div {
  visibility: visible;
  transition:  0s;
}
#raz input:nth-of-type(2):focus ~ div {
  visibility: hidden;
  transition:  0s;
}
</style>

<div id="raz"><input type="button" value="вкл"/><input type="button" value="выкл"/><div>исчезающий текст</div></div>

visibility: collapse; для тегов tr, col, thead, tfoot, tbody перестраивает таблицу, при этом учитывая размеры удалённых элементов. Не поддерживается Гугл Хром. Для остальных могут быть проблемы, когда между ячейками одна и та же граница.



1_11_21_3
2_12_22_3
Длинная строка 3_1Длинная предлинная строка 3_23_3
4_14_24_3

<table class="demotable1">
<tr><td>1_1<td>1_2<td>1_3
<tr><td>2_1<td>2_2<td>2_3
<tr><td>Длинная строка 3_1<td>Длинная предлинная строка 3_2<td>3_3
<tr><td>4_1<td>4_2<td>4_3
</table>

Если объединить ячейки столбца и строки



1_11_21_31_4
2_12_22_4
3_13_4
4_14_4
5_15_25_35_4

<table class="demotable2">
<tr><td>1_1<td>1_2<td>1_3<td>1_4
<tr><td>2_1<td rowspan="3" colspan="2">2_2<td>2_4
<tr><td>3_1<td>3_4
<tr><td>4_1<td>4_4
<tr><td>5_1<td>5_2<td>5_3<td>5_4
</table>

Аналогично для col



1_11_21_3
2_1Высокая
превысокая
строка
2_2
2_3
3_13_23_3

<table class="demotable4">
<col>
<col>
<tr><td>1_1<td>1_2<td>1_3
<tr><td>2_1<td>Высокая<br>превысокая<br>строка<br>2_2<td>2_3
<tr><td>3_1<td>3_2<td>3_3
</table>
в f t
наверх ↑

16 комментариев:

Анонимный
Любопытная информация. Спасибо.
NMitra
Пожалуйста. Возможно я что-то упустила - это всё, что смогла вспомнить.
MagentaWAVE
NMitra, вы уж меня если что простите, но я понять не могу смысл использовать для простого сокрытия объектов такие свойства как transition, animation и opacity. Зачем тогда display и visibility? И зачем для visibility:hidden - применять position:absolute если есть display:none?
И еще одно, мне почему-то кажется что если нужно точно указать "детеныша" элемента то вместо "+" лучше ставить ">", т.е. не #element:hover + div , а #element:hover > div (Посмотрите примеры в Хроме(последний), у меня чего-то ничего не происходит с DIVом при нажатии на кнопочки)
Кстати, не кажется ли вам, что id лучше применять к единичным элементам на странице, а если однотипных элементов много, то лучше пользоваться class?
Заранее спасибо.
MagentaWAVE
Простите, каюсь, про то что ничего не происходит погорячился - все нормально. Еще раз простите :)
NMitra
Посмотрите меню http://shpargalkablog.ru/2012/06/vypadayushcheye-menyu-css.html (заключительный образец, где пункты выезжают). С display его не сделать. Грубо говоря, transition нужен для реализации эффектов, своего рода "украшательства".

Я навожу на элемент и у меня прячется div. Если поставить ">", то будет так: навожу на div и он прячется.

Однозначно, id на странице должен быть только один. В примерах я имела ввиду, что это один и тот же элемент.

Да мне и прощать нечего, это нормальные хорошие вопросы, кот орые могут возникнуть у каждого.
MagentaWAVE
Спасибо, за пояснения, но как и для чего используется transition я знаю, по-этому и интересовался сутью использования его для скрытия элемента.
"Я навожу на элемент и у меня прячется div. Если поставить ">", то будет так: навожу на div и он прячется." - это если div не есть дочерним элементом, ну а если у вас в конструкции не один div, а два или три? То скрыт будет только лишь один - последний (если "+") и классы не спасают... Для примера конечно пойдет, но в реале придется "городить"...

Менюнюшка у вас конечно знатная получилась, применение overflow интересное
NMitra
Приведите пример, покажу код. Например, tab-меню в данной статье - это только CSS.
MagentaWAVE
Это конечно крутое использование INPUTов :) но суть от этого не меняется речь о DIV ах в примере
Допустим нужно скрыть элемент с классом "on"
<b id="element">элемент</b><div>div</div><div class='on'>div</div><div>div</div><span>span</span>
как быть, исходя из вашего примера, я просто не пойму ни как.
NMitra
#element:hover ~ .on { display: none; }
MagentaWAVE
можно инфу на эти префиксы в CSS? А то что-то я это совсем из виду упустил :(
MagentaWAVE
В смысле ссылку на инфу :)
NMitra
Селекторы http://shpargalkablog.ru/2011/10/css-selectors.html
Там же и псевдоклассы http://shpargalkablog.ru/2012/02/psevdoklassy-css.html , особенно структурные.
MagentaWAVE
Спасибо огромное, ну вы и навояли, это уж совсем для "деток" :)
Но я собственно уже и сам надыбал
http://www.w3.org/TR/selectors/#selectors
Прсто как-то в этот момент не внедрялся, да и инпуты не люблю ибо, как по мне не для того они.
Но все равно спасибо.
NMitra
А я, наоборот, надо-не надо добавляю)))
Анонимный
Css - это не язык программирования, а каскадные таблицы стилей! Отсутствуют базовые элементы: массивы, циклы, переменные.
NMitra
Согласна с вами. В некоторых статьях есть эта оговорка (до определённого момента я искренне считала, что это язык программирования, потому что так было написано в Википедии. Сейчас исправили, но у меня даже где-то есть скриншот). Благодарю за замечание, исправила.