Браузерные префиксы нужны в первую очередь для кроссбраузерности верстки. Они помогают понять браузерам новые свойства CSS3. И конечно же применяются они не ко всем свойствам, а только к некоторым. Чтобы не запоминать эти свойства, для которых нужны автопрефиксы, а также не писать лишние строки, нужно воспользоваться специальными плагинами. В данной статье мы будем рассматривать плагин gulp-autoprefixer, то есть плагин для task runner - GULP. Но также этот плагин доступен в webpack, например.
Сначала его нужно установить, и делается это очень просто, конечно же с npm(Node package manager- для этого у вас должна быть установлена Node.js). Всего в одну строчку в терминале, неважно встроен этот терминал в сам редактор или же это cmd на windows:
npm install --save-dev gulp-autoprefixer
Но если вы в cmd на windows, то нужно сначала прописать путь до директории, в которой этот плагин необходим.
Затем получить доступ до него и использовать:
В данном случае у плагина присутствуют опции: browsers и cascade.
cascade - это выравнивание вендорных префиксов, он нам не особо важен.
А browsers - список браузеров и их версии, для каких именно применять автопрефиксы. Конечно лучше выписывать это отдельно, в файле package.json в ключе browserlist или в специальном файле в корне проекта .browserslistrc, для того чтобы и другие плагины могли обращаться к желаемому списку браузеров, например, пакет @babel/preset-env.
Полную настройку под браузеры вы найдете здесь, в разделе полный список(full list).
Полный список параметров для autoprefixer вы найдете здесь, в разделе параметры(options).
Подписывайтесь на канал, чтобы не пропустить следующие статьи, а также предлагайте свои темы на выбор в группе ВКонтакте в описании канала.
