Visibility или Display в CSS

Допустим, у вас есть элемент, который вы хотите временно спрятать. Что делать: поменять значение свойства visibility на hidden или лучше назначить свойству display значение none. В чем заключается разница? Как оставшаяся часть страницы будет реагировать на элемент, который, то видно, то нет?

На первый взгляд может показаться, что CSS свойства visibility и display выполняют одну и ту же функцию, однако это не так. Их поверхностная схожесть зачастую сбивает с толку новичков в веб-разработке. Я полагаю, быстрый анализ основных значений этих двух свойств плюс демо- примеры, которые наглядно демонстрируют работу каждого свойства на практике, помогут избежать конфузов и путаницы.

Свойства visibility и display в действии

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

Как работает CSS свойство visibility

Со свойством видимость связаны 4 значения, мы уделим особое внимание тем двум, которые используют чаще всего - значениям видимый (visible) и спрятанный (hidden).

Имена свойств говорят сами за себя: видимые элементы можно увидеть, а спрятанные нет. Важно отметить, что спрятанные элементы продолжают занимать свое место¹.

Как работает CSS свойство display

Со свойством display связано довольно-таки порядочное количество значений, мы же опять сосредоточимся на наиболее распространенных. Больше всего нас интересуют значения block и none, плюс, мне бы хотелось вкратце отметить значение встроенный (inline).

На первый взгляд может показаться, что между display: none и visibility: hidden можно поставить знак равенства. Это не так. Главное отличие я указал выше¹.

Элементы, у которых есть свойство display со значениями block или inline, занимают определенное пространство. Разница заключается в том, что блочные элементы имеют разрывы строк вокруг себя, а элементы встроенные (inline) не имеют. Некоторые элементы по умолчанию являются блочными (div, p), а некоторые встроенными (a, span, img).

В каком случае следует использовать visibility, а в каком display?

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

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

visibility и display влияние на SEO

Часто используемая спамовая тактика – заполнить страницу ключевыми словами и сделать их невидимыми. При этом сделать это можно не использую описанные выше CSS свойства, а путем придания тексту цвета фона или же делая текст таким мелким, что он становится практически невидимым.

Поисковые системы «не одобряют» такие выкрутасы и поэтому некоторые разработчики с сомнением выбирают свойства visibility и display, чтобы спрятать элементы html.

Существует масса веских причин, по которым иногда необходимо спрятать некоторые элементы вашего дизайна, а иногда наоборот – показать, и поисковые системы понимают это. Если вы не пытаетесь обмануть каким-то образом поисковую систему, проблем с использованием свойств visibility и display для показа и прятанья элемента у вас возникнуть не должно.

Источник