Модуль 38

Сучасні можливості CSS (container queries, clamp)

Ось готовий урок, створений за твоїм майстер-промптом.

🎓 CS50-style: Сучасні суперсили CSS (Container Queries та Clamp)

Привіт, друзі! Ласкаво просимо. Я радий вас бачити.

Сьогодні ми не просто "вчимо нові властивості". Сьогодні ми змінюємо спосіб мислення про те, як будувати інтерфейси. Ми поговоримо про речі, які ще вчора здавалися магією, а сьогодні стають стандартом індустрії. Ми говоримо про Container Queries та функцію Clamp.

1. 🔥 Вступ: Чому старий підхід (Media Queries) більше не працює?

Уявіть собі ситуацію. Ви розробили чудову картку товару для інтернет-магазину: фото зліва, текст справа, кнопка "Купити" знизу. Вона ідеально виглядає на екрані ноутбука. Ви використовували Media Queries (@media), щоб на мобільному телефоні ця картка ставала вертикальною (фото зверху, текст знизу). Все чудово, правда?

Але ось приходить дизайнер і каже: "Слухай, ця картка така класна, давай поставимо її ще й у вузеньку бічну панель (sidebar) на десктопі"

І тут виникає проблема.

Ваш код каже: "Якщо екран широкий — роби картку широкою". Але бічна панель — вузька, хоча екран сам по собі — широкий!

Ваша картка "ламається", текст вилазить, все виглядає жахливо. Чому? Бо Media Queries дивляться на розмір всього екрану (viewport). Їм байдуже, де саме знаходиться ваш елемент.

Аналогія: Це як купувати диван. * Media Queries: Ви обираєте розмір дивана, вимірюючи площу всього будинку. * Container Queries: Ви обираєте розмір дивана, вимірюючи кімнату, в яку ви його поставите.

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

Так само і в CSS: компоненти мають адаптуватися до свого контейнера, а не до екрану користувача.

2. 🧠 Теоретична база: Як це працює "під капотом"

Давайте розберемо два інструменти, які роблять нашу верстку "розумною".

А. Container Queries (@container)

Це логіка: "Я буду виглядати так, як дозволяє мій батьківський елемент".

Щоб це запрацювало, потрібні два гравці: 1. Батько (Контейнер): Ви маєте явно сказати браузеру: "Слідкуй за розміром цього блоку". 2. Дитина (Компонент): Вона запитує: "Скільки місця у мене є?" і змінює стилі.

⚠️ Що треба запам'ятати залізно: Ви не можете використовувати @container на елементі, якщо у його батька не прописано container-type. Це як намагатися зателефонувати комусь, хто не має телефону.

Б. Функція clamp()

Це математична магія в один рядок. Раніше, щоб зробити шрифт, який плавно змінюється від 16px до 24px, ми писали купу коду або використовували складні формули.

clamp() працює за принципом Золотоволоски (або "ідеальної середини"). Синтаксис: clamp(МІНІМУМ, БАЖАНЕ, МАКСИМУМ)

  • MIN: "Не менше, ніж це".
  • VAL: "Спробуй бути ось таким (зазвичай це динамічне значення, наприклад, 5% ширини)".
  • MAX: "Але не більше, ніж це".

3. 🧪 Приклади: Від простого до магії

Приклад 1: clamp() — Гумовий шрифт

Уявіть заголовок. Ми хочемо, щоб на телефоні він був 1.5rem, на великому моніторі — 3rem, а між ними плавно ріс.

Як би ми це робили раніше? Писали б 3-4 медіа-запити. Як це робиться зараз:

h1 {
  font-size: clamp(1.5rem, 5vw, 3rem);
}

Що тут відбувається? 1. Поки 5vw (5% ширини екрану) менше за 1.5rem, шрифт буде 1.5rem. 2. Якщо 5vw більше за 3rem, шрифт зупиниться на 3rem. 3. Між цими межами він буде ідеально плавно змінюватися.

Спробуйте подумки змінити розмір вікна браузера. Шрифт поводиться як рідина в пляшці — заповнює об’єм, але не переливається.

Приклад 2: @container — Розумна картка

Давайте створимо ту саму картку, про яку говорили у вступі.

HTML:

<div class="post-wrapper"> <!-- Це буде контейнер -->
  <article class="card">
    <img src="cat.jpg" alt="Cat">
    <div class="content">
      <h2>Мій кіт</h2>
      <p>Він дуже любить спати.</p>
    </div>
  </article>
</div>

CSS:

Крок 1: Активуємо контейнер.

.post-wrapper {
  /* inline-size означає "слідкуй за шириною" */
  container-type: inline-size;
  container-name: post; /* Опціонально, даємо ім'я */
}

Крок 2: Вчимо картку адаптуватися.

.card {
  display: flex;
  flex-direction: column; /* За замовчуванням (вузько) - вертикально */
}

/* Магія тут 👇 */
@container post (min-width: 500px) {
  .card {
    flex-direction: row; /* Якщо контейнер ширший 500px - горизонтально */
    gap: 20px;
  }
}

Чому це круто? Ви можете вставити цей .post-wrapper у бічну колонку шириною 300px — картка буде вертикальною. Вставите в головну частину (800px) — вона сама перебудується в горизонтальну. Вам не треба змінювати CSS.

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

Час "забруднити руки" кодом. Відкрийте ваш редактор або CodePen.

Завдання 1: Розігрів clamp Створіть div із текстом. Задайте йому width: clamp(300px, 50%, 600px);. Питання: Що станеться, якщо екран буде шириною 1000px? А якщо 400px?

Завдання 2: Полагодити баг Студент написав такий код, але контейнерні запити не працюють. Чому?

.sidebar {
  width: 300px;
}
.widget {
  background: red;
}
@container (min-width: 200px) {
  .widget { background: blue; }
}

Підказка: Чогось не вистачає у батьківського елемента .sidebar.

Завдання 3: Реальний кейс "Картка профілю" Створіть картку профілю (аватар + ім'я + біо). * Умова: Якщо контейнер вузький (< 350px) — все по центру, одне під одним. * Умова: Якщо контейнер широкий (> 350px) — аватар зліва, текст справа. * Виклик: Розмістіть дві такі картки на сторінці: одну в вузькій колонці (width: 300px), іншу — на всю ширину. Переконайтеся, що вони виглядають по-різному без зміни класів.

Завдання 4: А що, якщо... (Unit cqi) У CSS з'явилися нові одиниці виміру: cqi (container query inline). 100cqi = 100% ширини контейнера. Спробуйте задати розмір шрифту в картці залежно від розміру контейнера: font-size: clamp(1rem, 5cqi, 2rem);. Як це змінює поведінку тексту?

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

Як відрізнити новачка від профі в цій темі?

Новачок думає: "Я зроблю так, щоб це гарно виглядало на моєму iPhone і моєму MacBook." Досвідчений розробник думає: "Я створю компонент, який буде виглядати гарно, куди б я його не вставив."

Типові помилки: 1. Забути container-type. Це найчастіша помилка. Без цього браузер не знає, що вимірювати, і ігнорує ваші @container. 2. Зловживання clamp. Не пхайте clamp усюди. Якщо вам просто потрібно width: 100%, не ускладнюйте. 3. Плутанина з vw vs cqi. * vw = відсоток від вікна браузера. * cqi = відсоток від контейнера. Для компонентів краще використовувати cqi.

Порада: Почніть думати про ваш сайт як про набір LEGO. Деталька LEGO не знає, яку вежу ви будуєте. Вона просто знає, як з'єднуватися з іншими. Ваші CSS-компоненти мають бути такими ж самодостатніми.

6. 🧩 Підсумок

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

  1. Media Queries — це минуле для верстки компонентів (але все ще ок для глобального лейауту сторінки).
  2. Container Queries дозволяють компонентам адаптуватися до свого оточення. Це робить код придатним для повторного використання (reusable).
  3. Clamp дозволяє забути про жорсткі брейкпоінти для шрифтів та розмірів, роблячи дизайн "текучим".

Тепер ви вмієте створювати інтерфейси, які не ламаються, коли їх переміщують. Ви володієте справжньою модульністю.

Що далі? Тепер, коли ми вміємо робити круті адаптивні блоки, на наступному уроці ми поговоримо про CSS Grid та Subgrid — як вибудовувати ці блоки в складні двовимірні сітки так, щоб це було зручно.

А поки що — практикуйтеся! Пам'ятайте: код сам себе не напише.

Успіхів!

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