Оба свойства: display со значением none и visibility со значением hidden можно использовать для сокрытия блока или элемента от пользователей. Однако, при использовании этих свойств, следует учитывать их особенности. Разберемся, в чем же заключается разница между ними и определим, в каких случаях лучше использовать display, а в каких visibility.
Свойство display
Свойство display со значением none, примененное к элементу, удаляет его из DOM. В результате чего соседние элементы ведут себя так, словно этого элемента не существует вовсе и занимают место скрытого элемента. Таким образом, если раньше элемент занимал какое-то место на странице, то после применения display: none, на странице не остается ни элемента, ни места для него. Чаще всего display:none используется при создании адаптивной верстки. Для того, чтобы пользователь, открывший сайт на телефоне, вместо тяжелых блоков «для широких экранов» увидел их облегченные версии.
Свойство visibility
Немного иначе обстоит дело со свойством visibility и его значением hidden. Аналогично display, hidden скрывает элемент от посетителей, но не удаляет из DOM. Таким образом, соседние элементы остаются на прежних местах, оставляя пустой ту часть страницы, которую раньше занимал скрытый элемент. На практике visibility:hidden часто используется при создании визуальных эффектов, связанных с появлением всплывающих блоков при клике или наведении курсора мыши. Кстати, способ создания подсказок, описанный в статье «Всплывающие подсказки на CSS», опирается на использование свойства visibility.
Чем отличается visibility:hidden от opacity:0?
На первый взгляд может показаться, что visibility:hidden идентично opacity:0. Однако, стоит помнить, что несмотря на снижение непрозрачности до нуля при применении opacity:0, у элемента все еще сохраняется свойство активности . Поэтому, если пользователь случайно нажмет на активную прозрачную ссылку, он будет удивлен незапланированному переходу на новую страницу. Однако, если ссылка спрятана посредством visibility, неожиданных сюрпризов не возникнет.
display и visibility — разница на практике
Предлагаю проследить за изменениями на странице при скрытии изображений посредством display:none и visibility:hidden.
Так страница стала выглядеть после применения свойства display: none к элементу <img>, расположенному в левой части. Взгляните: текст, ранее окружавший изображение, сместился и теперь гордо глядит на нас с позиции скрытой картинки, словно её никогда и не было.
Теперь предлагаю взглянуть на изменения, произошедшие в результате применения visibility:hidden к изображению. Изображение пропало, оставив после себя пустое место. При этом остальные элементы остались на своих местах.
В итоге можно заключить, что принципиальная разница между display и hidden заключается в их влиянии на DOM и, соответственно, на структуру страницы. Если в ваши планы не входит изменение структуры страницы, используйте visibility. Это свойство отлично подходит для создания всплывающих подсказок, сообщений и прочих визуальных эффектов. Если же вы намеренно меняете структуру страницы, как происходит при создании адаптивного дизайна, реализовать задуманное вам поможет свойство display!