Модуль 10

Display та visibility

Ось твій урок у стилі CS50. Приготуй каву, відкривай редактор коду — поїхали!

🎓 Урок: Display та Visibility. Мистецтво зникати та з’являтися

Привіт, друзі! Мене звати [Твоє Ім’я], і це — CS50... тобто, твій курс з веб-розробки!

Сьогодні ми поговоримо про магію. Ні, серйозно. У веб-розробці ми постійно щось ховаємо, показуємо або змінюємо форму об'єктів. Але чи замислювалися ви, що означає "сховати" елемент?

1. 🔥 Вступ: Проблема «Людини-невидимки»

Уявіть ситуацію. Ви розробляєте інтернет-магазин. У вас є кнопка «Купити». Коли товар закінчився, ви хочете, щоб цієї кнопки не було.

Але як саме її не має бути?

  1. Варіант А: Вона зникає, і сусідні елементи (наприклад, ціна або опис) зсуваються на її місце, заповнюючи порожнечу.
  2. Варіант Б: Вона стає прозорою. Кнопки не видно, але місце під неї залишається порожнім, і ніхто нікуди не зсувається.

Якби ви були архітектором будинку: * У першому випадку ви зносите стіну і розширюєте кімнату. * У другому — ви просто клеїте на стіну шпалери кольору "невидимки", але стіна все ще стоїть, і крізь неї не пройти.

Чому без цього ніяк? Тому що веб-сторінка — це не статична картинка. Це живий організм. Меню на мобільному має з'являтися, спливаючі вікна — виринати, а непотрібні елементи — зникати. Якщо ви не розумієте різницю між display та visibility, ваш дизайн буде «стрибати», або, що гірше, користувачі будуть клікати на невидимі кнопки.

2. 🧠 Теоретична база (Під капотом браузера)

Браузер малює сторінку за принципом «Коробкової моделі» (Box Model). Кожен елемент — це прямокутна коробка.

Властивість display відповідає на питання: «Як ця коробка поводиться в потоці з іншими коробками?»

Головні гравці display:

  1. block (Блоковий): Елемент-егоїст.
    • Займає всю доступну ширину (100%).
    • Завжди починається з нового рядка.
    • Приклади: <div>, <p>, <h1>, <footer>.
  2. inline (Рядковій): Елемент-компанійський.
    • Займає лише стільки місця, скільки в ньому контенту.
    • Сидить в одному рядку з іншими, як слова в реченні.
    • Важливо: Ігнорує ваші спроби задати йому width (ширину) чи height (висоту). Йому байдуже на розміри, він обтікає текст.
    • Приклади: <span>, <a>, <b>.
  3. inline-block (Гібрид): Найкраще з обох світів.
    • Сидить у рядку, як inline.
    • Але слухається розмірів (width, height), як block.
    • Ідеально для кнопок у ряд чи карток товарів.
  4. none (Відсутній):
    • Елемент видаляється з "дерева відображення". Його наче не існує. Місце звільняється.

А що таке visibility?

Властивість visibility відповідає на питання: «Чи бачимо ми цю коробку?»

  1. visible: Стандарт. Елемент видно.
  2. hidden: Елемент стає невидимим, АЛЕ він продовжує займати своє місце. Він як привид — його не видно, але якщо ви спробуєте пройти крізь нього, ви наштовхнетесь.

Запам’ятайте різницю: * display: none — видаляє з потоку (місце звільняється). Браузер перераховує геометрію сторінки (Reflow). * visibility: hidden — ховає візуально (місце заброньоване). Браузер просто не малює пікселі (Repaint).

3. 🧪 Приклади (Дивимось у код)

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

<div class="box red">1</div>
<div class="box green">2</div>
<div class="box blue">3</div>

<style>
  .box {
    width: 100px;
    height: 100px;
    display: inline-block; /* Щоб стояли в ряд */
  }
  .red { background: red; }
  .green { background: green; }
  .blue { background: blue; }
</style>

Ви бачите: 🟥 🟩 🟦

Сценарій 1: Магія зникнення (display: none)

Застосуємо до зеленого квадрата:

.green { display: none; }

Питання до вас: Що станеться з синім квадратом? (Пауза на подумати...)

Результат: 🟥🟦 Синій квадрат "стрибне" вліво і займе місце зеленого. Зеленого для браузера більше не існує.

Сценарій 2: Магія невидимки (visibility: hidden)

Повернемо все назад і застосуємо до зеленого:

.green { visibility: hidden; }

Питання: А тепер де буде синій?

Результат: 🟥 ⬜️ 🟦 Між червоним і синім буде порожнє місце розміром 100x100px. Зелений там є, ви можете навіть клікнути на нього (якщо знатимете куди), він впливає на розкладку, але око його не бачить.

Сценарій 3: Типова помилка новачка (inline)

У вас є посилання, і ви хочете зробити його великою кнопкою 200px шириною.

<a href="#" class="btn">Натисни мене</a>

<style>
  .btn {
    background: yellow;
    width: 200px;      /* ❌ Не спрацює */
    height: 50px;      /* ❌ Не спрацює */
    padding: 10px;     /* Це спрацює, але може налізти на сусідів */
  }
</style>

Чому це не працює? Тому що <a> за замовчуванням — display: inline. Він ігнорує розміри. Рішення: Додайте display: inline-block або display: block.

4. 🛠 Практична частина

Час бруднити руки кодом! Відкрийте CodePen або VS Code.

Завдання 1: Світлофор Створіть три div (червоний, жовтий, зелений). Зробіть так, щоб вони стояли вертикально (один під одним). * Челлендж: Змініть одну властивість CSS так, щоб вони стали горизонтально в ряд.

Завдання 2: Привид Створіть текст: "Привіт, я [ваше ім'я], майбутній розробник". * Огорніть ваше ім'я в тег <span>. * Задайте span клас .ghost. * Використовуйте visibility: hidden для .ghost. Перевірте, чи текст "майбутній розробник" підсунувся до "Привіт, я", чи залишилась дірка?

Завдання 3: Меню навігації Створіть список <ul> з трьома пунктами <li>: "Головна", "Про нас", "Контакти". * За замовчуванням <li> — це block (вони стоять стовпчиком). * Зробіть їх inline-block, щоб вони стали меню в рядок.

Завдання 4: Міні-кейс "Секретний код" Є параграф тексту з "секретним кодом" всередині. <p>Пароль від Wi-Fi: <span class="secret">12345</span></p> * Зробіть так, щоб при наведенні мишки на параграф (p:hover .secret), секрет з'являвся, а до того його не було видно, але фраза не повинна смикатися (місце має бути зарезервоване). Яку властивість використаєте?

Завдання 5: А що, якщо... Що буде, якщо батьківському елементу задати visibility: hidden, а його дочірньому (дитині) — visibility: visible? Чи побачимо ми дитину? (Спробуйте! Це контрінтуїтивно).

5. 💡 Мислення як у розробника

Як досвідчений інженер дивиться на ці властивості?

  1. Продуктивність (Performance): Ми намагаємось уникати зайвих перерахунків макету (Reflow). Якщо ви робите анімацію, де щось часто з'являється/зникає, display: none — це "дорого" для процесора, бо браузер щоразу будує сторінку заново. visibility дешевше, а ще дешевше — opacity (прозорість).

  2. Доступність (Accessibility - a11y): Це критично важливо.

    • display: none: Скрінрідер (програма, що читає екран для незрячих) проігнорує цей елемент. Його немає.
    • visibility: hidden: Скрінрідер теж проігнорує його!
    • Як профі: Якщо ви хочете сховати елемент візуально, але залишити для скрінрідера (наприклад, заголовок "Навігація"), використовують спеціальний клас .visually-hidden (це комбінація властивостей clip, height: 1px тощо).

  3. Логіка інтерфейсу: Я завжди запитую себе: "Користувач має думати, що цього тут ніколи не було, чи що це зараз неактивно/сховано?". Від цього залежить вибір між none та hidden.

6. 🧩 Підсумок

Отже, що ми маємо у сухому залишку:

  • display визначає структуру. Це скелет. block — це цеглини, inline — це текст, none — це видалення зі всесвіту.
  • visibility визначає видимість. hidden — це плащ-невидимка Гаррі Поттера (тіло все ще там).

Тепер ви вмієте: ✅ Будувати прості сітки (горизонтальні та вертикальні). ✅ Ховати елементи двома різними способами, розуміючи наслідки. ✅ Уникати дурних помилок з розмірами рядкових елементів.

Що далі? Зараз ми розставляли блоки, як діти кубики — в рядок або стовпчик. Але сучасні сайти складніші. Як розмістити один блок зліва, інший справа, а третій по центру, та ще й щоб це адаптувалося під мобільний?

На наступному уроці ми відкриємо скриньку Пандори (в хорошому сенсі) — Flexbox. Це змінить ваше життя.

Це був CS50. Побачимось! 👋

← До списку уроків Наступний урок →