visibility: visible

В чём отличие visibility: hidden; от display: none; и opacity: 0;

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

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

Какова занимаемая площадь?

При visibility: hidden;, transform: scale(0, 0); и opacity: 0; ширина и высота элемента та же и оказывает влияние на другие HTML-теги.

При height: 0; коробка блока равна сумме margin + padding + border [см. боксовая модель HTML]. В примере ниже они не заданы. Бирюзовый div теряет свою высоту, но не блочность, из-за чего надпись со значением находится под кнопками, а не рядом с ними.

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

visibility: visible;

transform: scale(1, 1);

opacity: 1;

height: 3em;

display: block;

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

visibility: visible;

transform: scale(1, 1);

opacity: 1;

height: 3em;

clip: auto;

Доступен ли элемент?

При visibility: hidden;, transform: scale(0, 0);, display: none; и clip: rect(0, 0, 0, 0); элемент недоступен как при pointer-events: none;. Ничего не происходит, если навести на занимаемое пространство.

При opacity: 0; элемент доступен.

При height: 0; блок тоже доступен, если есть за что зацепиться (margin, padding, border). В данном случае за синий border.

div {visibility: hidden;}
div:hover {visibility: visible;}

div {transform: scale(0, 0);}
div:hover {transform: scale(1, 1);}

div {opacity: 0;}
div:hover {opacity: 1;}

div {height: 0;}
div:hover {height: 3em;}

div {display: none;}
div:hover {display: block;}

div {clip: rect(0, 0, 0, 0); position: absolute;}
div:hover {clip: auto; position: absolute;}

Дочерние элементы могут быть видимыми?

При transform: scale(0, 0);, opacity: 0;, display: none; и clip: rect(0, 0, 0, 0); предок и потомок невидимы.

При visibility: hidden; родитель скрыт, а дочерний элемент видим, если ему присвоить visibility: visible;.

При height: 0; всё содержимое (и предок, и потомок) доступно, но, поскольку блок не имеет высоты, на него наезжают нижестоящие элементы (см. тут второй пример). Скрыть содержимое (и предка, и потомка) можно с помощью свойства overflow.

div вложенный

div {visibility: visible;}
div b {visibility: visible;}

div вложенный

div {transform: scale(1, 1);}
div b {transform: scale(1, 1);}

div вложенный

div {opacity: 1;}
div b {opacity: 1;}

div вложенный

div {height: 3em;}
div b {height: 3em;}

div вложенный

div {display: block;}
div b {display: inline;}

div вложенный

---

div {position: absolute; clip: auto;}
div b {position: absolute; clip: auto;}

Поддерживается ли transition и animation?

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

div {animation: animaciya 8s infinite;}
@keyframes animaciya {
0% {visibility: visible;}
80%, 100% {visibility: hidden;}
}

div {animation: animaciya 8s infinite;}
@keyframes animaciya {
0% {transform: scale(1, 1);}
80%, 100% {transform: scale(0, 0);}
}

div {animation: animaciya 8s infinite;}
@keyframes animaciya {
0% {opacity: 1;}
80%, 100% {opacity: 0;}
}

div {animation: animaciya 8s infinite;}
@keyframes animaciya {
0% {height: 3em;}
80%, 100% {height: 0em;}
}

div {animation: animaciya 8s infinite;}
@keyframes animaciya {
0% {display: block;}
80%, 100% {display: none;}
}

---

div {position: absolute; animation: animaciya 8s infinite;}
@keyframes animaciya {
0% {clip: rect(0, 100px, 3em, 0);}
80%, 100% {clip: rect(0, 0, 0, 0);}
}

Как сделать текст невидимым на 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;}