CSS Academy · Урок

Autoprefixer и cssnano

Автоматически добавляйте префиксы разработчиков с помощью Autoprefixer и уменьшайте объём вывода CSS с помощью cssnano.

«Autoprefixer и cssnano» — бесплатный урок CSS Academy на CoddyKit. Это урок 2 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения CSS Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс CSS Academy содержит 4 уроков всего.

Что такое Autoprefixer

Autoprefixer — это плагин PostCSS, который автоматически добавляет префиксы производителей (-webkit-, -moz-, -ms-) к свойствам CSS с учётом браузеров, поддержку которых необходимо обеспечить, используя данные Can I Use.

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

Вы пишете стандартный CSS без префиксов. Autoprefixer читает конфигурацию Browserslist и добавляет необходимые префиксы для целевых браузеров во время сборки.

<div class="flex">Flexbox row (display: flex — Autoprefixer would add -webkit-box/-ms-flexbox for older targets)</div>

Конфигурация Browserslist

Autoprefixer использует Browserslist для определения целевых браузеров. Задайте конфигурацию в .browserslistrc или package.json:

# .browserslistrc
> 1%
last 2 versions
not dead

Современному CSS требуется мало префиксов

По состоянию на 2024 год большинству современных возможностей CSS (Grid, Flexbox, пользовательским свойствам и преобразованиям) не нужны префиксы или требуется лишь небольшое их количество. Autoprefixer особенно полезен для передовых возможностей, таких как appearance, user-select и более новых API.

Добавление Autoprefixer в PostCSS

Подключите autoprefixer в конфигурации PostCSS:

// postcss.config.js
const autoprefixer = require('autoprefixer');

module.exports = {
  plugins: [autoprefixer]
};

Что такое cssnano

cssnano — это плагин PostCSS, который выполняет минификацию CSS: удаляет пробелы, комментарии и избыточные объявления, а также применяет безопасные оптимизации, создавая файл CSS минимально возможного размера.

Предустановки cssnano

cssnano предлагает предустановки оптимизации:

default: безопасная минификация (удаление пробелов, комментариев и дубликатов)
advanced: агрессивные оптимизации, которые могут изменить специфичность (используйте осторожно)

// postcss.config.js
const cssnano = require('cssnano');

module.exports = {
  plugins: [
    cssnano({ preset: 'default' })
  ]
};

Что делает cssnano

Оптимизации cssnano включают:

Удаление пробелов и комментариев
Преобразование цветов в кратчайшую форму (#ffffff → #fff)
Объединение одинаковых правил
Удаление избыточных свойств
Сокращение нулевых значений (0px → 0)

Объединение обоих плагинов в конфигурации

Конфигурация PostCSS для рабочей среды с обоими плагинами:

module.exports = {
  plugins: [
    require('autoprefixer'),
    process.env.NODE_ENV === 'production' && require('cssnano')({ preset: 'default' })
  ].filter(Boolean)
};

Карты исходного кода при минификации

Всегда создавайте карты исходного кода при использовании cssnano в сборках для разработки. Они связывают минифицированный результат с исходным CSS для отладки в DevTools.

Альтернативы cssnano

К другим минификаторам CSS относятся: clean-css, lightningcss (очень быстрый, написан на Rust) и встроенные минификаторы средств сборки, например внутренний минификатор CSS в Vite (который использует esbuild).

Быстрая проверка

Что определяет, какие префиксы производителей Autoprefixer добавляет в CSS?

Итоги

Autoprefixer автоматически добавляет префиксы производителей на основе целевых браузеров из Browserslist, избавляя от необходимости писать префиксы вручную. cssnano выполняет минификацию CSS, удаляя пробелы и комментарии и применяя безопасные оптимизации. Используйте оба плагина в конвейерах PostCSS для рабочей среды. Современному CSS требуется меньше префиксов, чем раньше, — проверяйте это для фактически поддерживаемых браузеров.

Часто задаваемые вопросы

Урок «Autoprefixer и cssnano» бесплатный?

Да — полный текст урока «Autoprefixer и cssnano» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс CSS Academy, подпишись на CoddyKit PRO. Курс CSS Academy содержит 4 уроков всего.

Чему я научусь в уроке «Autoprefixer и cssnano»?

Автоматически добавляйте префиксы разработчиков с помощью Autoprefixer и уменьшайте объём вывода CSS с помощью cssnano. Ты практикуешь CSS Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.

Нужен ли мне опыт, чтобы начать CSS Academy?

Предыдущий опыт не требуется. CSS Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 2 из 4.

Сколько времени занимает урок «Autoprefixer и cssnano»?

Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.

Можно ли писать и запускать код в этом уроке CSS Academy?

Да. Каждый урок CSS Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.

Все уроки этого курса

← Назад к CSS Academy