Вендорні префікси в CSS

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

Що таке вендорні префікси

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

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

Приклад із box-sizing

Наприклад, стандартний запис властивості box-sizing виглядає так:

p {

box-sizing: border-box;
}

У старих версіях браузерів ця властивість могла бути доступна тільки з вендорним префіксом. Наприклад, Firefox використовував префікс -moz:

p {

-moz-box-sizing: border-box;
}

Основні вендорні префікси

-webkit- — використовувався браузерами на основі WebKit, а також браузерами на основі Blink.
-moz- — використовувався Mozilla Firefox.
-o- — використовувався старими версіями Opera на рушії Presto.
-ms- — використовувався Internet Explorer та деякими версіями старого Microsoft Edge.

Кросбраузерний запис із префіксами

У минулому розробники могли записувати властивість кілька разів із різними префіксами, а в кінці додавати стандартний варіант.

p {

-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
-o-box-sizing: border-box;
box-sizing: border-box;
}

Чому вендорні префікси стали використовувати рідше

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

З розвитком вебстандартів та сучасних браузерів необхідність у ручному додаванні великої кількості префіксів значно зменшилася.

Що використовують сьогодні

Сьогодні перед використанням CSS-властивості зазвичай перевіряють її підтримку потрібними браузерами. Для автоматичного додавання необхідних префіксів у проєктах можуть використовуватися інструменти на кшталт Autoprefixer.

❗ Важливо:

Не потрібно автоматично додавати всі старі вендорні префікси до кожної CSS-властивості. Спочатку перевірте актуальну підтримку властивості цільовими браузерами.

Експериментальні можливості та прапорці

Окрім вендорних префіксів, браузери можуть мати експериментальні можливості, які ще не ввімкнені за замовчуванням. Такі функції можна було або можна тестувати через спеціальні налаштування чи прапорці браузера.

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

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

📌 Завдання:

№1. Що таке вендорний префікс у CSS?
№2. Який префікс використовував Mozilla Firefox?
№3. Який префікс використовували браузери на основі WebKit?
№4. Для чого в минулому записували одну CSS-властивість із кількома різними префіксами?
№5. Чому сьогодні вендорні префікси використовують значно рідше?

💡 Показати підказку

Згадайте, що вендорні префікси використовувалися для експериментальних або ще не стандартизованих можливостей. Основні префікси: -moz-, -webkit-, -o- та -ms-.

✅ Показати відповідь

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

2. Firefox — -moz-.

WebKit — -webkit-.
Щоб одна властивість могла працювати в різних старих браузерах, які використовували власні експериментальні реалізації.
Сучасні браузери краще підтримують вебстандарти, тому потреба в ручному додаванні префіксів значно зменшилася. Для автоматичного додавання необхідних префіксів можуть використовуватися сучасні інструменти збірки.