В чем разница между видимостью: скрытой и отображаемой: нет?

Правила CSS visibility:hiddenи display:noneоба приводят к тому, что элемент не виден. Это синонимы?

display:noneозначает, что данный тег вообще не будет отображаться на странице (хотя вы все равно можете взаимодействовать с ним через dom). Там не будет места, выделенного для него между другими тегами.

visibility:hiddenозначает, что в отличие display:noneот тега не видно, но для него выделено место на странице. Тег отображается, его просто не видно на странице.

Например:

test | <span style="[style-tag-value]">Appropriate style in this tag</span> | test

Замена [style-tag-value]с display:noneрезультатами в:

test |   | test

Замена [style-tag-value]с visibility:hiddenрезультатами в:

test |                        | test

Они не синонимы.

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

visibility:hidden оставляет элемент в нормальном потоке страницы таким образом, что он все еще занимает место.

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

Сравните это с аналогичной ситуацией, но кто-то перед вами надевает плащ-невидимку. При просмотре строки будет выглядеть, как будто есть пустое пространство, но люди не могут заполнить это пустое пространство, потому что кто-то еще там. Это как visibility:hidden.

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

1st <a href="http://example.com" style="display: none;">unseen</a> link.<br />
2nd <a href="http://example.com" style="visibility: hidden;">unseen</a> link.<br />
3rd <a href="http://example.com" style="opacity: 0;">unseen</a> link.

(Не забудьте нажать кнопку «Выполнить фрагмент кода» выше, чтобы увидеть результат.)

Разница между 1 и 2 уже была указана (а именно, 2 все еще занимает место). Однако между 2 и 3 существует различие: в случае 3 мышь все равно переключится на руку при наведении курсора на ссылку, и пользователь все равно сможет щелкнуть ссылку, а события Javascript по-прежнему будут срабатывать по ссылке. Это обычно не то поведение, которое вы хотите (но, может быть, иногда это так).

Другое отличие заключается в том, что если вы выделите текст, а затем скопируете / вставите его как обычный текст, вы получите следующее:

1st link.
2nd  link.
3rd unseen link.

В случае 3 текст действительно копируется. Может быть, это будет полезно для некоторых типов водяных знаков, или если вы хотите скрыть уведомление об авторских правах, которое будет отображаться, если неосторожно пользователь скопирует / вставит ваш контент?

display:none удаляет элемент из потока макета.

visibility:hidden скрывает это, но оставляет пространство.

Существует большая разница, когда речь идет о дочерних узлах. Например: если у вас есть родительский div и вложенный дочерний div. Так что если вы напишите так:

<div id="parent" style="display:none;">
    <div id="child" style="display:block;"></div>
</div>

В этом случае ни один из div не будет виден. Но если вы напишите так:

<div id="parent" style="visibility:hidden;">
    <div id="child" style="visibility:visible;"></div>
</div>

Тогда дочерний div будет виден, тогда как родительский div не будет показан.

Они не синонимы - display: noneудаляют элемент из потока страницы, а остальная часть страницы течет так, как если бы его там не было.

visibility: hidden скрывает элемент от просмотра, но не от потока страницы, оставляя место для него на странице.

display: none удаляет элемент со страницы полностью, и страница создается так, как если бы элемент вообще отсутствовал.

Visibility: hidden оставляет место в потоке документов, даже если вы его больше не видите.

Это может иметь или не иметь большого значения в зависимости от того, что вы делаете.

При visibility:hiddenэтом объект по-прежнему занимает вертикальную высоту на странице. С display:noneнего полностью снято. Если у вас есть текст под изображением, и вы это сделаете display:none, этот текст сместится вверх, чтобы заполнить пространство, где было изображение. Если вы делаете видимость: скрытый текст останется в том же месте.

display:noneбудет скрывать элемент и разрушать занимаемое пространство, тогда как visibility:hiddenбудет скрывать элемент и сохранять пространство элементов. display: none также влияет на некоторые свойства, доступные в javascript в более старых версиях IE и Safari.

В дополнение ко всем остальным ответам, для IE8 есть важное отличие: если вы используете display:noneи пытаетесь получить ширину или высоту элемента, IE8 возвращает 0 (в то время как другие браузеры возвращают фактические размеры). IE8 возвращает правильную ширину или высоту только для visibility:hidden.

visibility:hiddenсохраняет пространство; display:noneне делает.

display: none; 

Он не будет доступен на странице и не занимает места.

visibility: hidden; 

он скрывает элемент, но все равно будет занимать то же пространство, что и раньше. Элемент будет скрыт, но все же повлияет на макет.

visibility: hiddenсохранить пространство, в то время display: noneкак не сохранить пространство.

Пример отображения: https://www.w3schools.com/css/tryit.asp?filename=trycss_display_none

Пример скрытого видимости: https://www.w3schools.com/cssref/tryit.asp?filename=trycss_visibility

Если для свойства видимости установлено значение "hidden", браузер по-прежнему будет занимать место на странице для содержимого, даже если оно невидимо.
Но когда мы устанавливаем объект в "display:none", браузер не выделяет место на странице для его содержимого.

Пример:

<div style="display:none">
Content not display on screen and even space not taken.
</div>

<div style="visibility:hidden">
Content not display on screen but it will take space on screen.
</div>

Посмотреть детали

visibility:hidden сохранит элемент на странице и займет это место, но не покажет пользователю.

display:none не будут доступны на странице и не занимают места.

Еще одно отличие заключается в том, что он visibility:hiddenработает в действительно старых браузерах и display:noneне работает:

https://www.w3schools.com/cssref/pr_class_visibility.asp

https://www.w3schools.com/cssref/pr_class_display.asp

Разница выходит за рамки стиля и отражается в том, как элементы ведут себя при работе с JavaScript.

Эффекты и побочные эффекты display: none:

• целевой элемент извлекается из потока документов (не влияет на расположение других элементов);
• затрагиваются все потомки (тоже не отображаются и не могут «убрать» это наследство);
• измерения не могут быть сделаны для целевого элемента , ни для своих потомков - они не отображаются вообще, таким образом , их clientWidth, clientHeight, offsetWidth, offsetHeight, scrollWidth, scrollHeight, getBoundingClientRect(), getComputedStyle(), все возвращаются 0с.

Эффекты и побочные эффекты visibility: hidden:

• целевой элемент скрыт от просмотра, но не выводится из потока и влияет на макет, занимая его обычное пространство;
• innerText(но не innerHTML) целевого элемента и потомков возвращает пустую строку.

display:none;не будет отображать элемент и не будет выделять пространство для элемента на странице, тогда как visibility:hidden;не будет отображать элемент на странице, но будет выделять пространство на странице. Мы можем получить доступ к элементу в DOM в обоих случаях. Чтобы понять это лучше, посмотрите на следующий код: display: none vs visibility: hidden

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

display: none;и visibility: hidden;не может быть прочитано всеми программами чтения с экрана. Имейте в виду, что пользователи с нарушениями зрения будут испытывать.

Вопрос также касается синонимов. text-indent: -9999px;это еще один, который примерно эквивалентен. Важным отличием text-indentявляется то, что он часто будет читаться программами чтения с экрана. Это может быть немного плохим опытом, поскольку пользователи все еще могут переходить по ссылке.

Что касается доступности, то, что я вижу сегодня, это комбинация стилей, чтобы скрыть элемент, будучи видимым для программ чтения с экрана.

{
  clip: rect(1px, 1px, 1px, 1px);
  clip-path: inset(50%);
  height: 1px;
  width: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
}

Хорошей практикой является создание ссылки «Skip to content» на якорь основной части контента. Слабовидящие пользователи, вероятно, не хотят слушать ваше полное дерево навигации на каждой странице. Сделайте ссылку визуально скрытой. Пользователи могут просто нажать вкладку, чтобы получить доступ к ссылке.

Для получения дополнительной информации о доступности и скрытом контенте см .:

• https://webaim.org/techniques/css/invisiblecontent/
• https://webaim.org/techniques/skipnav/