Одна з найпоширеніших задач в розробці інтерфейсів — тимчасово приховати той чи інший елемент. І рішення, здавалось би, очевидне — зробити
display: none, та й по всьому.Ну, в більшості випадків може й так, але чи універсальне це рішення? Давайте спробуємо розібратися.
Приховати елемент можна у кілька способів, і вже згаданий
display: none впевнено утримує першість. Коли ми застосовуємо цю властивість до елементу, він "зникає" з потоку документа, припиняючи брати участь в побудові рендер-дерева і, відповідно, візуального макету сторінки, так званого layout. При цьому з DOM він нікуди не зникає. Якщо коротко, то display: none прибирає усі видимі сліди присутности елемента.А є
visibility: hidden. І тут постає питання — а в чому ж різниця? А різниця в тому, що ця властивість прибирає лише відображення елемента, але його місце в render tree та layout зберігається. На сторінці при цьому утворюється "дірка" на місці цього елемента.display: none нагадує магічний трюк зі зникненням, але з кінострічки "Престиж": елемент дійсно зникає, не припиняючи свого існування. Чи?.. Але це вже інше питання. А от visibility: hidden це як той же трюк, але в актовій залі вашої школи: елемент від вас просто затуляють білим простирадлом, усі знають, що він там, а крайні ряди навіть можуть трошки його побачити.Чи згадати тоді про атрибут
hidden? Хіба побіжно. Бо це просто ще один спосіб приховати за допомогою <div hidden> чи el.hidden = true. Але тільки у тому випадку, якщо ви не перевизначили стилі для селектора [hidden], який браузери за замовчуванням стилізують як display: none. А ви можете, я знаю.А ви як, користуєтесь цими можливостями, чи не задумуючись, просто викидаєте елемент з DOM?
@babichdev
***
Приєднуйтесь до збору на РЕБ та вигравайте чудові подарунки від мене та моїх друзів!