Как обеспечивается кросс-браузерная поддержка CSS?

Кросс-браузерная поддержка CSS обеспечивается несколькими способами:

• Использование вендорных префиксов для свойств, которые еще не стандартизированы или поддерживаются не всеми браузерами (например, -webkit-, -moz-, -ms-).
• Проверка поддержки свойств с помощью инструментов, например, Can I Use, чтобы понимать, какие свойства поддерживаются в целевых браузерах.
• Использование CSS-ресетов или нормалайзеров (normalize.css), чтобы устранить различия в стилях по умолчанию.
• Применение прогрессивного улучшения и graceful degradation — писать стили так, чтобы в старых браузерах сайт оставался функциональным, пусть и с упрощенным дизайном.
• Автоматизация с помощью препроцессоров и постпроцессоров (например, PostCSS с плагином autoprefixer), которые автоматически добавляют необходимые префиксы.

Пример использования autoprefixer в PostCSS:

/* Исходный CSS */
.example {
  display: flex;
}

После обработки autoprefixer добавит префиксы:

.example {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

Таким образом, достигается совместимость с разными браузерами без ручного добавления префиксов.