Яка різниця між видимістю: прихованою та дисплеєм: немає?

Правила 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 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як елемент приховає і збереже простір елементів. дисплей: жоден також не впливає на деякі властивості, доступні в 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 vidibility: 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;
}

Відмінна практика - створити посилання "Пропустити до вмісту" до якоря основного змісту. Користувачі з вадами зору, ймовірно, не хочуть слухати ваше повне дерево навігації на кожній сторінці. Зробіть посилання візуально прихованою. Користувачі можуть просто натиснути вкладку, щоб отримати доступ до посилання.

Докладніше про доступність та прихований вміст див.

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