Display None – це що таке? Властивості і використання

Властивість display: none і його застосування в CSS

На відміну від властивості visibility, яке залишає елемент в потоці, друга властивість CSS, що використовується для приховування елементів, дозволяє заховати блок так, ніби його й не було. Для div, display none працює таким чином, ніби повністю видаляє елемент з документа. Він не займає ніякого простору, хоча у вихідному коді HTML все одно залишається. Елемент не з’явиться на вашому сайті, і не буде жодних доказів його існування. При тому, що навколишні елементи будуть розглядати його як порожній простір і зміщуватися, в залежності від власних властивостей. Так відбувається тому, що він випадає з потоку. Це властивість може застосовуватися вдало чи не дуже, залежно від намірів верстальника. У будь-якому випадку зловживати ним не варто.

Використання властивості при верстці

Верстальники часто використовують властивість display: none при тестуванні сторінки. Зазвичай так відбувається у випадку, якщо якусь область необхідно заховати на якийсь час, щоб можна було протестувати інші області сторінки. В цьому випадку слід використовувати display: none. Важливо пам’ятати, що елемент повинен бути повернений назад на сторінку до фактичного запуску сайту. Справа в тому, що елемент, який видаляється з потоку за допомогою цього методу, стає невидимим для пошукових систем і програм читання з екрану, навіть якщо він продовжує залишатися в розмітці HTML.

Дивіться також:  Інтернет сленг: що значить LMFAO?

У минулому цей метод використовувався, щоб спробувати вплинути на рейтинги в пошукових системах. Але тепер елементи, які не відображаються, можуть бути помічені червоним прапором Google, щоб зрозуміти, чому використовується цей підхід. Один із способів, як з користю використовувати display: none — створення сайтів з адаптивним дизайном. При написанні коду для таких веб-сторінок часто необхідно створювати елементи, які доступні для відображення тільки в певному вирішенні, але приховані для інших варіантів. Ви можете використовувати display: none в CSS, щоб приховати цей елемент, і потім увімкніть його знову пізніше. Це прийнятне використання цієї властивості, тому що не можна запідозрити верстальника в спробі приховати що-небудь заради впливу на рейтинг в пошукових системах.