Autoprefixer

Вендорные префиксы — приставки вроде -webkit- и -moz- перед именем свойства. Через них браузеры когда-то включали новые возможности до стандартизации, и некоторым браузерам они нужны до сих пор. Autoprefixer — плагин, который сам добавляет нужные префиксы по данным Can I Use и вашему списку Browserslist.

Подключение

Если вы прошли урок о файле настроек, Autoprefixer уже установлен и подключён:

// postcss.config.js
import autoprefixer from 'autoprefixer';
 
export default {
  plugins: [autoprefixer()],
};

В package.json задан список "browserslist": ["defaults"].

Пример

В блоге анонс поста плавно растворяется внизу, а метки постов нельзя выделить мышью. Пишите стандартные свойства без префиксов:

/* styles/main.css */
.post-excerpt {
  max-height: 120px;
  overflow: hidden;
  mask-image: linear-gradient(black 60%, transparent);
}
 
.post-tag {
  user-select: none;
}

После npx postcss styles/main.css -o css/main.css:

.post-excerpt {
  max-height: 120px;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(black 60%, transparent);
          mask-image: linear-gradient(black 60%, transparent);
}
 
.post-tag {
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}

Autoprefixer добавил ровно те префиксы, которые нужны браузерам из списка defaults, и поставил их перед стандартным свойством. Так браузер, знающий стандарт, применит последнее объявление.

<style>
  .post-excerpt {
    max-height: 120px;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(black 60%, transparent);
            mask-image: linear-gradient(black 60%, transparent);
  }
 
  .post-tag {
    -webkit-user-select: none;
       -moz-user-select: none;
            user-select: none;
    padding: 2px 8px;
    background: #e0e7ff;
    border-radius: 4px;
  }
</style>
 
<span class="post-tag">CSS</span>
<p class="post-excerpt">
  PostCSS читает CSS, передаёт его цепочке плагинов и записывает результат.
  Каждый плагин решает одну задачу: добавляет префиксы, сжимает код или
  переводит новые возможности CSS для старых браузеров. Сам PostCSS ничего
  не меняет, поэтому набор возможностей зависит только от подключённых
  плагинов. Этот абзац плавно исчезает внизу благодаря свойству mask-image.
</p>

Текст анонса гаснет к нижнему краю, а метку «CSS» не получится выделить.

Префиксы зависят от списка

Если префикс нужен только старым браузерам, Autoprefixer его не добавит. Свойство backdrop-filter при списке defaults остаётся как есть:

.site-header {
  position: sticky;
  top: 0;
  backdrop-filter: blur(8px);
}

Добавьте в список Safari 15 — "browserslist": ["defaults", "safari >= 15"] — и запустите сборку снова:

.site-header {
  position: sticky;
  top: 0;
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
}

Появился -webkit-backdrop-filter: Safari 15 понимает свойство только с префиксом.

Устаревшие префиксы удаляются

Autoprefixer убирает и лишнее. Из старого кода

.post-card {
  -webkit-border-radius: 8px;
  border-radius: 8px;
}

получится просто border-radius: 8px; — ни одному браузеру из списка префикс уже не нужен.

Частая ошибка

Писать префиксы вручную «на всякий случай» или копировать их из старых статей. Такой код длиннее, а набор префиксов быстро устаревает. Пишите только стандартные свойства и доверьте префиксы Autoprefixer. И не подключайте его вместе с postcss-preset-env: тот уже содержит Autoprefixer внутри, и одна и та же работа будет выполняться дважды.