Как в CSS настроить стили для разных браузеров?

Разные браузеры поддерживают разные возможности, поэтому CSS пишут так, чтобы сайт работал везде, а новые функции включались там, где они есть.

Основные приёмы

• `@supports` — проверка поддержки свойства:

.grid { display: flex; flex-wrap: wrap; }
@supports (display: grid) {
  .grid { display: grid; grid-template-columns: repeat(3, 1fr); }
}

• Запасные значения — браузер пропускает непонятное ему свойство:

.box { background: #333; background: color-mix(in srgb, #333 80%, white); }

• Autoprefixer — добавляет вендорные префиксы (-webkit-) по списку поддерживаемых браузеров из browserslist.
• Нормализация — reset или normalize.css выравнивают стандартные стили.
• Проверка поддержки — Can I Use, Baseline на MDN.

Чего избегать

CSS-хаки под конкретные браузеры и определение браузера по User-Agent — их сложно поддерживать.

Коротко для собеседования

Используют @supports и запасные значения для прогрессивного улучшения, Autoprefixer для префиксов и browserslist для списка поддерживаемых браузеров.

Подробнее: MDN — @supports