Как Autoprefixer понимает где нужно поставить префикс?

Autoprefixer понимает, где нужен префикс, на основе данных о поддержке браузеров (Can I Use) и списка целевых браузеров (browserslist) — для каждого CSS-свойства он знает, каким браузерам нужны префиксы.

Как работает

Autoprefixer использует базу данных Can I Use (через пакет caniuse-lite), где для каждого CSS-свойства указано, какие браузеры и версии требуют вендорные префиксы:

1. Читает твой CSS.
2. Для каждого свойства смотрит в Can I Use, каким браузерам нужен префикс.
3. Сверяет с целевыми браузерами (browserslist).
4. Добавляет только нужные префиксы.

browserslist — целевые браузеры

Список задаёт, какие браузеры поддерживать:

// package.json / .browserslistrc
"browserslist": ["> 1%", "last 2 versions", "not dead"]

Autoprefixer добавляет префиксы только для свойств, которые в этих браузерах их требуют.

Пример

/* Целевые браузеры включают старый Safari */
.box { user-select: none; }

/* Autoprefixer добавит -webkit-, т.к. Safari требует */
.box {
  -webkit-user-select: none;
  user-select: none;
}

Если целевые браузеры префикс не требуют — Autoprefixer его не добавит (и даже удалит устаревшие).

Актуальность

Данные обновляются с caniuse-lite, поэтому префиксы всегда актуальны — не добавляются устаревшие, не пропускаются нужные.

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

Autoprefixer определяет нужные префиксы по базе Can I Use (caniuse-lite, где указано, каким браузерам нужен префикс для каждого свойства) и списку browserslist (целевые браузеры). Для каждого свойства он сверяет требования с целевыми браузерами и добавляет только необходимые префиксы (устаревшие удаляет). Данные обновляются, поэтому префиксы актуальны.