Як спростити написання кросбраузерних стилів?

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

Що це і навіщо Кросбраузерність гарантує, що веб‑сторінка виглядає однаково в Chrome, Firefox, Safari, Edge та інших. Це критично для користувачів і SEO.

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

• CSS‑reset / normalize – очищують/узгоджують базові стилі браузера.
• Autoprefixer – автоматично додає vendor‑prefixи для підтримки старих версій.
• CSS‑variables (custom properties) – дозволяють централізовано керувати кольорами, розмірами.
• @supports – умовне застосування стилів лише коли браузер підтримує потрібну властивість.

Як це працює

1. Reset/normalize встановлюють однорідний базовий стан.
2. Autoprefixer під час збірки (наприклад, через PostCSS) генерує коди з префіксами.
3. Variables використовуються у всіх селекторах, а fallback‑значення прописується після них.
4. @supports обгортає специфічні властивості, що не підтримуються.

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

:root {
  --primary-color: #3498db;
  --font-size-base: 1rem;
}

.button {
  background: var(--primary-color);
  font-size: var(--font-size-base, 16px); /* fallback */
}

@supports (display: grid) {
  .grid { display: grid; }
}

Тестування

• Використовувати BrowserStack або Sauce Labs для перевірки на реальних браузерах.
• Пишемо unit‑тести в Jest з jest-environment-jsdom для перевірки CSS‑префіксів.

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

• Мінімізувати кількість префіксів, залишаючи лише ті, що потрібні для цільових версій.
• Використовувати :root‑variables замість дублювання значень.

Accessibility

• Переконатися, що кольори мають достатній контраст.
• Використовувати @media (prefers-reduced-motion) для анімацій.

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

• Уникайте inline‑стилів, що можуть бути змінені через XSS.
• Перевіряйте значення CSS‑variables на валідність у @supports.

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

• Забудьте про !important – це порушує каскадність.
• Не всі браузери підтримують @supports (IE11), тому варто мати fallback‑стилі.

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

• Як працює autoprefixer?
• Які браузери ще потребують префіксів для Flexbox?
• Як забезпечити підтримку CSS‑variables у старих браузерах?