Как автоматически выдавать вендорные префиксы?

Автоматическое добавление вендорных префиксов

Вендорные префиксы (-webkit-, -moz-, -ms-, -o-) нужны для поддержки новых CSS свойств в старых браузерах. Ручное добавление скучно и ошибко-подвержено. Есть несколько способов автоматизировать это.

1. PostCSS + Autoprefixer (РЕКОМЕНДУЕМО)

Это самый популярный и правильный способ. PostCSS автоматически добавит нужные префиксы на основе вашего списка поддерживаемых браузеров.

Установка

npm install --save-dev postcss autoprefixer

Конфигурация (postcss.config.js)

module.exports = {
  plugins: [
    require('autoprefixer')
  ]
};

Пример работы

Исходный CSS:

.button {
  display: flex;
  user-select: none;
  backdrop-filter: blur(10px);
  transform: rotate(45deg);
}

После Autoprefixer:

.button {
  display: -webkit-flex;
  display: flex;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}

2. Browserlist (контролируем поддержку браузеров)

Autoprefixer использует Browserlist для определения, какие префиксы добавлять. Конфигурируется в package.json или .browserslistrc.

Вариант в package.json

{
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not dead"
  ]
}

Это значит: поддерживаем браузеры с более чем 1% рыночной доли, последние 2 версии, которые не мертвы.

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

npx browserslist

3. Tailwind CSS (встроенная поддержка)

Если вы используете Tailwind CSS, Autoprefixer уже включен по умолчанию:

module.exports = {
  content: ['./src/**/*.{js,jsx,ts,tsx}'],
  theme: {
    extend: {},
  },
  plugins: [],
}

Тогда все утилиты будут автоматически префиксированы:

<div className="flex user-select-none backdrop-blur-sm">
  {/* Все свойства получат нужные префиксы */}
</div>

4. SCSS (с компилятором)

Если используете SASS, Autoprefixer работает в pipeline:

npm install --save-dev sass postcss autoprefixer

Скрипт сборки в package.json

{
  "scripts": {
    "build:css": "sass src/styles.scss | postcss --use autoprefixer > dist/styles.css"
  }
}

Исходный SCSS

.container {
  display: grid;
  gap: 1rem;
  user-select: none;
}

Результат после сборки:

.container {
  display: grid;
  gap: 1rem;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

5. CSS-in-JS (styled-components, Emotion)

Международные CSS-in-JS библиотеки часто имеют встроенную поддержку префиксов.

styled-components

import styled from 'styled-components';

const Button = styled.button`
  display: flex;
  user-select: none;
  backdrop-filter: blur(10px);
`;

// Результат автоматически добавит префиксы

Emotion

import { css } from '@emotion/react';

const buttonStyles = css`
  display: flex;
  user-select: none;
  transition: all 0.3s ease;
`;

// Автоматически добавит префиксы

6. Next.js (встроенная поддержка)

В Next.js 13+ с PostCSS все работает из коробки.

/* globals.css */
.header {
  display: grid;
  user-select: none;
  backdrop-filter: blur(10px);
}

/* Автоматически добавятся префиксы */

Какие префиксы когда используются

/* WebKit браузеры (Chrome, Safari, Edge) */
-webkit-transform: rotate(45deg);
-webkit-filter: blur(5px);
-webkit-user-select: none;

/* Mozilla Firefox */
-moz-user-select: none;
-moz-appearance: none;

/* Microsoft Internet Explorer / Edge */
-ms-transform: rotate(45deg);
-ms-filter: blur(5px);

Реальный пример: адаптивный дизайн с префиксами

/* Исходный CSS (без префиксов) */
.box {
  background: linear-gradient(45deg, #ff0000, #0000ff);
  background-clip: text;
  color: transparent;
  transform: perspective(1000px) rotateY(45deg);
  user-select: none;
}

/* После Autoprefixer */
.box {
  background: linear-gradient(45deg, #ff0000, #0000ff);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  -webkit-transform: perspective(1000px) rotateY(45deg);
  transform: perspective(1000px) rotateY(45deg);
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

Совет: когда не нужны префиксы

Если вы поддерживаете только modern браузеры (Chrome, Firefox, Safari, Edge за последние версии), многие новые свойства уже не нужны:

{
  "browserslist": "last 2 versions"
}

Тогда стили остаются чистыми без лишних префиксов.

Итоги

• Autoprefixer - автоматическое добавление вендорных префиксов
• PostCSS - стандартный способ в modern frontend проектах
• Browserlist - контролирует, какие браузеры нужно поддерживать
• Tailwind, SCSS, Next.js - уже имеют встроенную поддержку
• CSS-in-JS - большинство библиотек автоматически добавляют префиксы
• Никогда не пишите префиксы вручную - это работа для автоматизации