Autoprefixer значительно облегчает жизнь разработчикам интерфейсов.
То, что я ненавидел делать, когда писал код CSS, это добавление префикса поставщиков CSS. Ребята, всем скучно писать одинаковые правила CSS для разных браузеров, верно?!
Итак, начнем с самого начала!
Почему именно префиксы поставщиков CSS
Префиксы поставщиков CSS позволяют создателям веб-браузеров добавлять поддержку новейших функций CSS для экспериментов или периодов тестирования.
Таким образом, они позволяют вам запускать все ваши правила CSS во всех браузерах.
Общие префиксы
Префиксы браузера CSS, которые вы можете использовать:
- -webkit- поддерживается OPERA, SAFARI, GOOGLE CHROME
- -moz- поддерживается FIREFOX
- -ms- поддерживается EDGE/INTERNET EXPLORER
Autoprefixer
Autoprefixer - это плагин PostCSS для анализа CSS и добавления префиксов поставщиков в правила CSS с использованием значений из Can I Use.
Он позволяет вам писать свои правила CSS без префиксов поставщиков, он заботится об этом, основываясь на текущей популярности браузера и поддержке свойств.
Если вы хотите посмотреть, как это работает, вы можете найти интерактивную демонстрацию здесь.
Почему вы должны использовать Autoprefixer?
Autoprefixer значительно облегчает жизнь веб-разработчикам, поскольку, как я сказал, им больше не нужно думать, какой префикс добавить для разных браузеров и проводить исследования, Autoprefixer позаботится об этом и, очевидно, сэкономит много времени.
Также Google рекомендует использовать его (читайте здесь), и он используется в таких компаниях, как Twitter и Alibaba.
Должен ли я еще что-то добавить к этому? Думаю, и так понятно.
Как использовать Autoprefixer?
Документация очень понятна (вы можете прочитать здесь), и вы можете использовать Autoprefixer по-разному и со многими инструментами сборки, такими как Gulp, Webpack, Grunt, Cli и другие.
Я покажу вам, как использовать его со скриптами Webpack, Gulp и npm.
Autoprefixer с Webpack
Внутри вашего webpack.config.js добавьте это:
module.exports = {
module: {
rules: [
{
test: /\.css$/,
use: ["style-loader", "css-loader", "postcss-loader"]
}
]
}
}
Если вы уже настроили свой webpack.config.js, просто добавьте объект в ваш массив rules.
Теперь вам нужно создать новый файл postcss.config.js
Внутри этого нового файла напишите:
module.exports = {
plugins: [
require('autoprefixer')
]
}
Готово! Теперь просто запустите процесс сборки, чтобы увидеть его.
Autoprefixer с Gulp
Сначала нужно установить пакеты
npm install autoprefixer gulp-postcss gulp-sourcemaps --save-dev
после того, как в вашем gulpfile.js требуются пакеты
const autoprefixer = require('autoprefixer'),
sourcemaps = require('gulp-sourcemaps'),
postcss = require('gulp-postcss');
а теперь давайте напишем ваш gulp
gulp.task('autoprefixer', () => {
return gulp.src('./src/*.css')
.pipe(sourcemaps.init())
.pipe(postcss([autoprefixer()]))
.pipe(sourcemaps.write('.'))
.pipe(gulp.dest('./dist'))
})
Готово! Теперь просто запустите процесс сборки, чтобы увидеть его.
Autoprefixer со скриптами npm
Сначала нужно установить пакеты
npm install postcss-cli autoprefixer --save-dev
Теперь внутри вашего package.json добавьте объект scripts, подобный этому
"scripts": {
"autoprefixer": "postcss src/assets/css/*.css --use autoprefixer -d build/"
}
и npm run autoprefixer для его запуска.
Как вы можете видеть, использование Autoprefixer очень просто, и вы можете использовать его в своем рабочем процессе разработки по своему усмотрению.
Больше не тратьте время на добавление префикса поставщиков CSS вручную, используйте Autoprefix любым удобным для вас способом.
Полезные ресурсы:
- Interactive demo https://autoprefixer.github.io/
- PostCSS https://postcss.org/
- Browserslist https://github.com/browserslist/browserslist
Источник - https://medium.com
Пишите в комментариях, что вы думаете о таком автоматическом добавлении префиксов поставщиков CSS.