1. Функція calc()
Функція calc() дозволяє виконувати арифметичні операції з різними одиницями виміру прямо в CSS. Браузер обчислює результат «на льоту».
/* Проблема: дві колонки + відступ = більше 100% */
.sidebar { width: 40%; }
.content {
width: calc(60% - 20px);
margin-left: 20px;
}Підтримувані операції: +, -, *, /. Можна змішувати одиниці: calc(100% - 20px), calc(50vh + 2rem).
box-sizing:
border-box. Надмірне використання calc() ускладнює читання коду.Чому box-sizing: border-box не вирішує проблему?
border-box враховує лише padding і border у ширині елемента. Зовнішній відступ margin не входить у розрахунок, тому 60% + margin-left: 20px все одно перевищить 100%.
2. Центрування абсолютного елемента
Класична задача: помістити елемент точно по центру батьківського блоку.
Спосіб 1: position + transform (універсальний)
.parent {
position: relative;
}
.child {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}Чому працює:
top: 50%; left: 50%— зміщує лівий верхній кут елемента до центру батькаtranslate(-50%, -50%)— зміщує елемент назад на половину своїх розмірів
translate() рахуються від розмірів самого елемента (а не батька). Тому центрування працює незалежно від розмірів елемента.Спосіб 2: Flexbox
.parent {
display: flex;
justify-content: center;
align-items: center;
}Різниця між підходами:
| Спосіб | Де задаються стилі | Коли використовувати |
|---|---|---|
| position + transform | На дочірньому елементі | Модальні вікна, поверхневі елементи |
| Flexbox | На батьківському елементі | Загальне центрування контенту |
Чому margin-left: -50px — поганий спосіб?
Жорстко прив’язує зміщення до конкретного розміру елемента. Якщо розмір зміниться — центрування зламається. transform: translate(-50%, -50%) працює з будь-якими розмірами.
3. transform — перетворення елементів
Властивість transform дозволяє застосовувати до елемента різні візуальні перетворення:
| Функція | Що робить |
|---|---|
translate(x, y) |
Зміщує елемент по осях X та Y |
rotate(deg) |
Обертає елемент |
scale(n) |
Збільшує/зменшує елемент |
skew(x, y) |
Нахиляє елемент (перетворює прямокутник на паралелограм) |
transform — перетворення (зміщення, обертання тощо). transition — анімований перехід між станами. Це різні властивості, які часто використовуються разом.4. Контентні та фонові зображення
| Тип | Технологія | Коли використовувати |
|---|---|---|
| Контентне | <img> |
Зображення, що змінюється від сторінки до сторінки: фото товару, аватар, обкладинка статті |
| Фонове | background-image |
Декоративне зображення, прив’язане до дизайну: фон шапки, абстрактна текстура |
<img>), навіть якщо візуально воно виглядає як фон (наприклад, обкладинка статті).5. object-fit і object-position
Властивості object-fit та object-position — це аналоги background-size та background-position, але для тегів <img> та <video>.
img {
width: 200px;
height: 200px;
object-fit: cover;
object-position: center center;
}| Значення | Поведінка |
|---|---|
cover |
Заповнює блок повністю, зайве обрізає. Пропорції зберігаються |
contain |
Вписує зображення повністю, з’являються «смуги». Пропорції зберігаються |
fill (за замовчуванням) |
Розтягує до заданих розмірів. Пропорції не зберігаються |
none |
Зображення зберігає свій реальний розмір |
object-position задає точку, відносно якої масштабується зображення: top center, bottom right тощо. За замовчуванням — center center.
6. Оптимізація завантаження зображень
Порівняння поведінки різних способів приховування для контентних та фонових зображень:
| Спосіб приховування | <img> |
background-image |
::before |
|---|---|---|---|
display: none |
Завантажується | Залежить від браузера | Не завантажується |
opacity: 0 |
Завантажується | Завантажується | Завантажується |
visibility: hidden |
Завантажується | Завантажується | Завантажується |
<img>. Для оптимізації потрібен інший підхід — lazy loading.7. Lazy loading — відкладене завантаження
Ідея: не завантажувати зображення, поки користувач не прокрутив до нього сторінку.
Підхід з data-атрибутами
<!-- Зображення не завантажиться — src порожній -->
<img src=""
data-src="photo.jpg"
alt="Опис"
class="lazy">Як працює:
- Атрибут
srcпорожній або містить зображення-заглушку низької якості - Реальна адреса зберігається в
data-src(data-атрибут не впливає на завантаження) - JavaScript відстежує прокрутку і, коли зображення потрапляє у видиму область, копіює
data-src→src - Тільки після цього браузер починає завантаження
Нативний lazy loading
<img src="photo.jpg"
loading="lazy"
alt="Опис">loading="lazy" підтримується всіма сучасними браузерами і не потребує JavaScript. Браузер сам відкладає завантаження зображень, що знаходяться поза видимою областю.8. Гумові зображення — max-width: 100%
Основна техніка для гумових контентних зображень:
img {
max-width: 100%;
height: auto;
}| Властивість | Поведінка |
|---|---|
width: 100% |
Зображення завжди розтягується на всю ширину батька (навіть якщо менше) |
max-width: 100% |
Зображення не перевищує ширину батька, але не збільшується понад свій реальний розмір |
max-width: 100% для зображення, а розміри контролюємо через батьківський блок. Це дає універсальний клас, який можна застосувати до будь-якої картинки.При width: 100% маленьке зображення розтягнеться і втратить якість. При max-width: воно збереже свій реальний розмір, якщо батько більший.
100%
9. background-size для фонових зображень
Властивість background-size керує розміром фонового зображення:
| Значення | Поведінка |
|---|---|
cover |
Заповнює весь блок, зайве обрізає |
contain |
Вписує повністю, з’являються смуги |
| Значення в px або % | Фіксований розмір (наприклад, 600px auto — ширина 600px, висота автоматична) |
100% |
Ширина = ширині блоку, висота автоматична |
У комбінації з background-position: center отримуємо зображення, що коректно масштабується при зміні розмірів блоку.
10. Підсумкова таблиця
| Тема | Ключове |
|---|---|
calc() |
Арифметика в CSS зі змішуванням одиниць; не зловживайте |
| Центрування absolute | top: 50%; left: 50%; transform: translate(-50%, -50%) — універсальний спосіб |
object-fit |
Аналог background-size для <img> та <video> |
| Контентне vs фонове | Якщо змінюється через адмінку → контентне (<img>) |
Гумове <img> |
max-width: 100%; height: auto; — стандартний підхід |
| Lazy loading | Нативний: loading="lazy"; з JS: data-src → src |
transform |
Зміщення, обертання, масштабування; translate(%) рахується від самого елемента |
