autoprefixer là công cụ giúp tự động tạo ra các prefix tương thích trình duyệt trong CSS của bạn, được sử dụng trong Node và gulp flow.
autoprefixer là gì?
Hãy lật ngược vấn đề. Nếu không dùng autoprefixer , mỗi dòng code của bạn sẽ cần viết tay thêm (trừ trường hợp xài các IDE như phpStorm có sẵn phần tạo này) khá nhiều các dòng code với prefix như -webkit, -moz,… cho mỗi trình duyệt.
Với autoprefixer, cuộc đời bạn sẽ nở hoa. Bạn không cần nghĩ tới việc tạo ra các prefix để tránh bị bug trên các trình duyệt nữa. Mọi thứ sau khi được viết gọn gàng trong SASS/SCSS, LESS hoặc postCSS, sẽ được tự động thêm prefix trước khi output ra code CSS cuối cùng. Thật tuyệt phải không?
Hãy tưởng tượng, bạn chỉ cần gõ:
.box { display: flex; }
Và kết quả cuối cùng sau khi sử dụng autoprefixer sẽ cho bạn kết quả:
.box {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
}
Ngược lại, nếu có 1 prefix nào đó cũ và không cần trong code source của bạn vì các trình duyệt đều đã hỗ trợ, autoprefixer cũng sẽ gỡ bỏ nó.
Bạn có thể thử kiểm tra package này bằng cách nhập thử code CSS ở đây nữa nhé.
Package tuyệt vời này còn có sẵn trên codepen.io nữa nhé để khi bạn làm nháp (không cần localhost) thì vẫn hỗ trợ các trình duyệt.
Cài đặt autoprefixer
Làm việc với gulp: Trong project đã cài Node và npm install, bạn chạy dòng lệnh:
npm install --save-dev gulp-autoprefixer
Trong file gulpfile.js, bạn sẽ thiết lập như sau nhé:
var autoprefixer = require('gulp-autoprefixer');
gulp.task('style', function() {
.src('src/scss/main.scss')
.pipe(sass().on('error', sass.logError))
.pipe(autoprefixer({
browsers: [
'last 3 versions',
'iOS >= 8',
'Safari >= 8',
'ie 11',
]
}))
.pipe(gulp.dest('dist/css'))
})
Tuỳ chọn: Với option như ở trên, bạn sẽ thấy nó hỗ trợ IE11+, hệ điều hành iOS 8.4 trở lên. Để thiết lập các tuỳ chọn này, bạn cần đọc browserlist nhé.
Ngoài package dành cho gulp, nếu bạn muốn chạy với các thư viện khác thì có thể tham khảo trên Github.
Những mẹo hay sử dụng với autoprefixer
Tắt autoprefixer cho một số thành phần nhất định
Chẳng hạn, nếu bạn gặp 1 project mà có các thành phần sử dụng từ thư viện khác đã có sẵn autoprefixer và không muốn sử dụng ở các module có liên quan, ta sẽ làm như sau:
.hero {
transition: 1s; /* it will be prefixed by default */
}
.pricing-table {
/* autoprefixer: off */
transition: 1s; /* it will not be prefixed */
}
Hỗ trợ autoprefixer trên các trình duyệt
Nếu bạn không sử dụng gulp package cài đặt ở trên nhưng vẫn muốn tính năng auto prefix này xuất hiện trong trình sửa code, bạn có thể tham khảo các plugin hỗ trợ dưới đây:
Kết luận
Nếu bạn vẫn phải tìm cách để code CSS hoạt động trên các trình duyệt như Firefox hay Safari, đã tới lúc thay đổi! Hãy để autoprefixer giúp bạn tối ưu hoá và giảm thời gian code thừa, code lặp nhé!
Giám đốc tại Công ty CP CODE TỐT. Quản lý ngôn ngữ bản địa tiếng Việt tại WordPress. Là tác giả chính tại codetot.net, Khôi muốn ghi lại một sốvấn đề kỹ thuật trong quá trình phát triển các dự án website với khách hàng.
