front-end
March 17, 2020

Вчимо CSS: в чому різниця між display: none та visibility: hidden?

17.03.20. Час прочитання - 3 хв.

Часом в розробці веб-сторінок потрібно «заховати» якийсь елемент. Звичайно, його можна просто видалити з HTML-розмітки. Але це не вихід з положення. Щоб зберегти елемент, але приховати його, є два способи - це властивості CSS «display» і «visibility». Вони схожі, але кожна з них має індивідуальні риси, про які слід знати.

Visibility

При використанні visibility: hidden елемент не відображається в браузері. Але прихований елемент все ще займає місце в дизайні сторінки. Це виглядає так, ніби Ви зробили елемент невидимим, але він все ще знаходиться на своєму місці та займає простір.

Якщо Ви розміщуєте на веб-сторінці тег DIV і використовуєте CSS, щоб надати йому розмір 100 на 100 пікселів, властивість visibility: hidden робить блок невидимим на екрані. Але текст, наступний за ним, буде розміщуватись таким чином, ніби цей блок все ще присутній на сторінці.

Можна використовувати hidden HTML input, щоб спочатку заховати цей елемент, а потім повертати його назад наведенням курсору. Це один із прикладів використання цієї властивості.


Display

На відміну від властивості visibility, при використанні якої елемент залишається в потоці документа, display: none повністю забирає елемент з документа. Він більше не займає місця навіть попри те, що все ще перебуває у вихідному коді. Елемент дійсно видаляється з потоку документа, але будьте з ним обережні, якщо Ви неправильно використаєте цю властивість, вона може повністю зруйнувати сторінку!

display: none часто використовують, коли тестують веб-сторінки. Наприклад, якщо потрібно ненадовго приховати будь-яку область сторінки, щоб протестувати іншу. Але необхідно пам'ятати, що прихований елемент потрібно повернути назад на веб-сторінку до того, як вона буде додана на сайт. Зробити це потрібно тому, що елемент, видалений з потоку документа даним методом непомітний пошуковикам. У минулому цей спосіб використовували хакери, щоб впливати на рейтинг в пошукових системах. Тому елементи hide HTML, які не відображаються, можуть сприйматися Google як негативний сигнал.

Властивість display: none корисна при створенні адаптивного сайту, в якому присутні елементи, доступні тільки для одного розміру екрану.

Також можна використовувати display: none, щоб приховати елемент, а потім повернути його назад за допомогою медіа-запитів. Це коректне використання властивості display: none, оскільки Ви не намагаєтесь приховати що-небудь з метою порушень.