Навіщо потрібні префікси для деяких CSS-властивостей (-webkit-, -moz- тощо)?

Повне пояснення

Що це і навіщо Префікси – маркери, що вказують браузеру на експериментальну або власну реалізацію CSS‑властивості. Вони потрібні, коли новий синтаксис ще не прийнятий у W3C‑стандарті або реалізований лише в конкретному рушії.

Ключові принципи, терміни, інваріанти

• Vendor prefix – префікс виробника (‑webkit‑, ‑moz‑, ‑ms‑, ‑o‑).
• Feature detection – перевірка підтримки властивості через @supports або JavaScript.
• Graceful degradation – спочатку працює у старих браузерах, потім підвищується функціональність.
• Progressive enhancement – починаємо з базової підтримки, додаємо префікси для розширення.

Як це працює (життєвий цикл, алгоритм)

1. Браузер парсить CSS.
2. Якщо бачить префікс, застосовує відповідну реалізацію рушія.
3. Якщо властивість без префікса не підтримується, браузер ігнорує її.

Практика і реалізація

/* Flexbox з префіксами */
display: -webkit-box; /* Safari 6.1–7 */
display: -ms-flexbox; /* IE10 */
display: flex;        /* сучасні браузери */

/* Перевірка підтримки через @supports */
@supports (display: grid) {
  .grid { display: grid; }
}

Тестування

• Використовувати @supports у тестах, щоб перевірити, чи застосовується властивість.
• У Jest/Testing Library можна спостерігати за класами, що додаються через префікси.

Оптимізація продуктивності

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

Accessibility

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

Безпека та валідація

• Перевірка через @supports допомагає уникнути небажаних стилів, що можуть вплинути на UX.

Типові помилки й edge cases

• Забудьте видалити старі префікси після оновлення браузерів → збільшує розмір файлу.
• Використання лише префіксованих властивостей без базового синтаксису → не працюватиме у сучасних браузерах.

Cheatsheet + можливі follow‑up питання

• Список найпоширеніших префіксів: ‑webkit‑, ‑moz‑, ‑ms‑, ‑o‑.
• Питання: «Як визначити, що префікс потрібен для конкретної властивості?» – відповісти про @supports і документацію браузерів.