Урок 74 із 104
71%
← Назад

Перевірка підтримки CSS-властивостей

Вчимося перевіряти підтримку CSS-властивостей різними браузерами за допомогою Can I Use та визначати, чи можна безпечно використовувати певну можливість у проєкті.

Підтримка CSS-властивостей

У CSS є властивості, які давно підтримуються практично всіма браузерами, а є нові можливості, підтримка яких може відрізнятися залежно від браузера та його версії.

Перед використанням нової CSS-властивості розробнику важливо перевірити, чи підтримують її браузери, якими користується цільова аудиторія сайту.

Чи існує правило 1%?

Іноді можна зустріти просте правило: якщо властивість не підтримується браузерами, якими користується менше одного відсотка користувачів, її можна використовувати. Але це не універсальне правило.

Наприклад, якщо властивість відповідає лише за декоративний ефект, її відсутність може бути майже непомітною. Але якщо властивість відповідає за основну структуру сторінки, її відсутність може суттєво вплинути на макет.

Критична та некритична підтримка

Критичність підтримки залежить від того, наскільки важливою є властивість для роботи сайту. Якщо без неї ламається основний макет або важлива функція, потрібно забезпечити підтримку цільових браузерів або передбачити запасний варіант.

  • Критична підтримка — властивість потрібна для основного макета або важливої функції.
  • Некритична підтримка — властивість відповідає переважно за декоративний або додатковий ефект.
  • Для некритичних можливостей іноді достатньо, щоб у непідтримуваному браузері користувач побачив спрощений варіант.

Приклади властивостей із критичною підтримкою

  • display: flex — часто використовується для побудови основного макета.
  • display: grid — використовується для створення складних сіток і макетів.
  • width та height — можуть впливати на розміри основних блоків.
  • position — може бути важливою для розташування елементів інтерфейсу.

Приклади властивостей із менш критичною підтримкою

  • hyphens — керує автоматичним переносом слів.
  • text-shadow — додає тінь до тексту.
  • box-shadow — додає тінь до елемента.
  • transition — відповідає за плавну зміну властивостей.

Can I Use

Для перевірки підтримки вебтехнологій зручно використовувати сервіс Can I Use. Він показує, які версії браузерів підтримують певну можливість, де підтримка часткова та де вона відсутня.

Під час перевірки потрібно звертати увагу не тільки на загальний відсоток підтримки, а й на конкретні браузери та версії, які важливі для вашого проєкту.

❗ Важливо:

Підтримка 97% не означає автоматично, що властивість можна використовувати в будь-якому проєкті. Завжди враховуйте цільові браузери, аудиторію та важливість конкретної функції.

box-sizing

Властивість box-sizing зі значенням border-box має дуже широку підтримку. За даними Can I Use, глобальна підтримка становить приблизно 97.27%, а сучасні версії основних браузерів її підтримують.

* {

box-sizing: border-box;
}

hyphens

Властивість hyphens відповідає за автоматичний перенос слів. Її підтримка сьогодні широка — близько 96.92% глобально, але деякі старі браузери та окремі режими мають обмеження.

p {

hyphens: auto;
}

animation

CSS-анімації мають широку підтримку в сучасних браузерах. Водночас для анімацій важливо перевіряти не лише саму властивість animation, а й конкретні можливості, які використовуються разом із нею.

.box {

animation: move 2s ease-in-out;
}

@keyframes move {
from {
transform: translateX(0);
}

to {
transform: translateX(100px);
}
}

Flexbox

Flexbox має дуже широку підтримку — приблизно 97.26% глобально. Сучасні версії Chrome, Edge, Firefox, Safari та Opera підтримують Flexbox.

.container {

display: flex;
justify-content: space-between;
align-items: center;
}

CSS Grid

CSS Grid також має широку підтримку — приблизно 96.89% глобально. Сучасні Chrome, Edge, Firefox, Safari та Opera підтримують CSS Grid.

.container {

display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}

Важливість конкретної версії можливості

Важливо перевіряти саме ту можливість, яку ви використовуєте. Наприклад, основний CSS Grid має широку підтримку, але окремі нові можливості Grid можуть підтримуватися гірше.

Тому недостатньо просто перевірити назву технології. Якщо ви використовуєте конкретне значення властивості або нову можливість CSS, перевіряйте саме її підтримку.

Практичне завдання

📌 Завдання:
  1. №1. Наведіть приклади CSS-властивостей, підтримка яких може бути критичною для макета.
  2. №2. Наведіть приклади CSS-властивостей, відсутність яких зазвичай не ламає основний макет.
  3. №3. Перевірте підтримку box-sizing. Чи можна використовувати його в сучасному проєкті?
  4. №4. Перевірте підтримку hyphens. Чи можна використовувати його, якщо автоматичні переноси не є критично важливими?
  5. №5. Перевірте підтримку animation. Чи можна використовувати CSS-анімації в сучасному проєкті?
  6. №6. Перевірте підтримку Flexbox. Чи можна використовувати його для сучасної верстки?
  7. №7. Перевірте підтримку CSS Grid. Чи можна використовувати його для сучасної верстки?
💡 Показати підказку

Використовуйте Can I Use та звертайте увагу не тільки на загальний відсоток підтримки, а й на конкретні браузери, версії та важливість властивості для вашого макета.

✅ Показати відповідь
№1. Приклади критично важливих можливостей: display: flex, display: grid, width, height, position — залежно від того, як вони використовуються в конкретному макеті.

№2. Приклади менш критичних можливостей: text-shadow, box-shadow, hyphens, transition. Відсутність таких ефектів зазвичай не позбавляє користувача основного контенту.

№3. box-sizing: border-box — можна використовувати. Підтримка дуже широка.

№4. hyphens — можна використовувати, якщо автоматичний перенос слів не є критично важливим. У непідтримуваному браузері текст залишиться доступним без цього ефекту.

№5. animation — можна використовувати в сучасних проєктах. Для важливого контенту не слід покладатися лише на анімацію.

№6. Flexbox — можна використовувати для сучасної верстки. Основні сучасні браузери його підтримують.

№7. CSS Grid — можна використовувати для сучасної верстки. Основні сучасні браузери його підтримують.