Настройка Autoprefixer для кроссбраузерной совместимости сайта

Настройка Autoprefixer для кроссбраузерной совместимости сайта

Autoprefixer автоматически добавляет вендорные CSS-префиксы на основе данных из Can I Use. Разработчик пишет стандартный CSS — transform, flex, grid, appearance — Autoprefixer добавляет -webkit-, -moz-, -ms- там, где они нужны конкретным браузерам из списка поддержки. Главное: не добавлять префиксы вручную, это устаревший подход.

Как работает Autoprefixer

Autoprefixer — плагин PostCSS. Читает .browserslistrc или секцию browserslist в package.json, обращается к базе Can I Use, добавляет только нужные префиксы:

/* Вход (разработчик пишет) */
.element {
  display: flex;
  appearance: none;
  user-select: none;
  backdrop-filter: blur(8px);
}

/* Выход (Autoprefixer добавил) */
.element {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

Установка

npm install -D autoprefixer postcss

// postcss.config.js
module.exports = {
  plugins: [
    require('autoprefixer'),
    // Опции передаются напрямую в плагин или через browserslist
  ],
};

Browserslist — ключевая настройка

Autoprefixer применяет ровно столько префиксов, сколько нужно для указанных браузеров. Агрессивный список → больше префиксов → больше CSS. Современный список → меньше мусора:

// .browserslistrc в корне проекта

[production]
# Покрыть 95%+ пользователей
> 0.5%
last 2 major versions
Firefox ESR
not dead
not IE 11
not op_mini all

[development]
last 1 chrome version
last 1 firefox version
last 1 safari version

Проверить, какие браузеры покрывает список:

npx browserslist
npx browserslist "> 0.5%, last 2 versions, not dead"

# Проверить поддержку конкретного CSS-свойства
npx browserslist --config .browserslistrc "backdrop-filter"

Интеграция в сборщики

Vite

// vite.config.ts
import { defineConfig } from 'vite';
import autoprefixer from 'autoprefixer';

export default defineConfig({
  css: {
    postcss: {
      plugins: [
        autoprefixer({
          // Переопределить grid-поведение
          grid: 'autoplace', // или 'no-autoplace' для IE Grid
        }),
      ],
    },
  },
});

Webpack + postcss-loader

// webpack.config.js
{
  loader: 'postcss-loader',
  options: {
    postcssOptions: {
      plugins: [
        ['autoprefixer', {
          grid: false,
        }],
      ],
    },
  },
},

Gulp (legacy-проекты)

// gulpfile.js
const { src, dest, watch, series } = require('gulp');
const sass = require('gulp-sass')(require('sass'));
const postcss = require('gulp-postcss');
const autoprefixer = require('autoprefixer');
const cssnano = require('cssnano');

function css() {
  return src('src/styles/main.scss')
    .pipe(sass({ outputStyle: 'compressed' }).on('error', sass.logError))
    .pipe(postcss([
      autoprefixer(),
      ...(process.env.NODE_ENV === 'production' ? [cssnano()] : []),
    ]))
    .pipe(dest('dist/css'));
}

exports.css = css;
exports.watch = () => watch('src/styles/**/*.scss', css);

Конфигурация для специфических случаев

CSS Grid с IE 11

IE 11 поддерживает старую спецификацию Grid. Autoprefixer может транспилировать современный Grid в старый синтаксис с оговорками:

// postcss.config.js
module.exports = {
  plugins: [
    require('autoprefixer')({
      grid: 'autoplace', // Включить IE Grid трансформацию
    }),
  ],
};

/* Вход */
.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}

/* Выход с IE 11 поддержкой */
.grid {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 1fr 1rem 1fr 1rem 1fr;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}

Однако полная автоматическая конвертация сложных Grid-макетов не всегда работает корректно. Если проект требует IE 11, тестирование обязательно.

Safari и webkit-специфичные свойства

/* Autoprefixer добавит для старых Safari */
.modal {
  position: sticky;          /* → -webkit-sticky */
  overscroll-behavior: none; /* → -webkit-overflow-scrolling */
}

.text-gradient {
  background-clip: text;     /* → -webkit-background-clip */
  color: transparent;        /* → -webkit-text-fill-color */
}

input[type="search"] {
  appearance: none;          /* → -webkit-appearance */
}

Отладка: проверка результата

# Показать, какие префиксы будут добавлены
npx autoprefixer --info

# Или через PostCSS CLI
npx postcss src/styles/main.css --use autoprefixer -o /dev/null --verbose

postcss-preset-env как расширение

Autoprefixer покрывает только вендорные префиксы. postcss-preset-env идёт дальше — полифиллит новые CSS-функции:

// postcss.config.js — рекомендуемая комбинация
module.exports = {
  plugins: [
    require('postcss-preset-env')({
      stage: 2,
      // autoprefixer включён внутри preset-env по умолчанию
      autoprefixer: {
        grid: false,
      },
      features: {
        'nesting-rules': true,        // Нативный CSS нестинг
        'custom-media-queries': true,  // @custom-media
        'color-function': true,        // color() функция
        'oklch-function': true,        // oklch()
        'is-pseudo-class': true,       // :is()
        'has-pseudo-class': true,      // :has()
        'custom-properties': false,    // Оставить нативные --vars
      },
    }),
  ],
};

Стандартные проблемы и решения

Autoprefixer добавляет устаревшие префиксы -moz- везде: Обновить базу данных: npx browserslist@latest --update-db

Конфликт между несколькими postcss.config.js в монорепо: Использовать postcss.config.cjs с явным env параметром в каждом пакете.

Safari 15 не поддерживает backdrop-filter без префикса: Добавить Safari >= 14 в .browserslistrc — Autoprefixer добавит -webkit-backdrop-filter.

appearance: none не работает на iOS: Autoprefixer добавляет -webkit-appearance: none — убедиться, что Browserslist включает последние 2 версии iOS Safari.

Сроки

Установка и настройка Autoprefixer с Browserslist: 30–60 минут. Проверка результата и fine-tuning списка браузеров: 1–2 часа. Это работа которая выполняется один раз при инициализации проекта.