Налаштування 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 години. Це робота яка виконується один раз при ініціалізації проекту.