Autoprefixer là gì
1. Mở đầuNếu công việc của bạn liên quan tới front end, thì hẳn bạn đã dùng hoặc chí ít cũng nghe nói tới các CSS preprocesor như Sass hay Less. Thế nhưng số người biết đến và sử dụng post-processing tool như PostCSS lại còn rất hạn chế. Show Trong bài viết này, mình sẽ giới thiệu PostCSS là gì, và lợi ích khi sử dụng nó. 2. Giới thiệu chungPostCSS là một công cụ dùng JavaScript để xử lý CSS. Thực tế, PostCSS chỉ là một số các API phục vụ cho hằng hà sa số các plugin cho nó. Có thể liên tưởng tới JavScript ecosystem như thế này: Sass hay Less giống như một ngôn ngữ mới, compile ra CSS tương tự như CoffeeScript hay TypeScript vậy; còn PostCSS cùng các plugin của mình giống Babel, nó chỉ "biến đổi" CSS, và cùng với một vài plugin của bên dưới ta có thể sử dụng các cú pháp CSS của tương lai giống như ES6 và Babel hiện nay vậy. 3. Cài đặtBởi PostCSS là một công cụ viết bằng JavaScript nên ta sẽ sử dụng nó cùng với task runner như Gulp hay Grunt. 3.1 Cài đặt với gulpTrước hết, ta cần cài PostCSS module vào trong project, sử dụng npm: npm i gulp-postcss -DVà ở trong Gulpfile.js, ta sẽ định nghĩa một task để chạy module này: Sau đó, ta có thể chạy task với gulp styles 3.2 Cài đặt với gruntĐể cài đặt PostCSS module, ta dùng câu lệnh: npm i grunt-postcss -DSau khi package đã được cài đặt xong, ta có thể sử dụng nó trong Gruntfile như sau: Tương tự như với grunt, ta chạy task bằng grunt styles 4. Một số plugin4.1 Cách cài đặt pluginTrước hết cần cài plugin bằng npm, ví dụ với autoprefixer: npm i autoprefixer -DSau đó ở trong Gruntfile hay Gulpfile, ta sẽ require plugin và truyền nó vào postcss như một mảng. Grunt: Và với Gulp: var processorArray = [ require('postcss-plugin')() ]; gulp.task('styles', function () { gulp.src('path/to/dev/style.css') .pipe(postcss(processorArray)) .pipe(gulp.dest('path/to/prod')) });4.2 AutoprefixerPlugin này tự động thêm vendor prefix cho chúng ta khi cần thiết. Như ở phần trên, để cài plugin ta chạy câu lệnh: npm i autoprefixer -DTa có thể cấu hình loại browser nào ta cần support. Danh sách các option có thể xem tại https://github.com/ai/browserslist Giờ thêm Autoprefixer vào mảng các processor nhé: var processorsArray = [ require('autoprefixer')({ browsers: ['last 2 versions', 'ie 6-8', 'Firefox > 20'] }) ];Với cấu hình này, khi ta sử dụng flexbox: .item { display: flex; flex-flow: row wrap; }thì css đầu ra sẽ được tự thêm prefix tương ứng: 4.3 CssNextCSSNext cho phép chúng ta dùng các feature của CSS4 ngay bây giờ. Module này sẽ biến đổi các chức năng của CSS4 này thành CSS3 được hỗ trợ bởi các browser hiện nay. Đề cài CSSNext ta chạy: npm i cssnext -DVà thêm vào danh sách processor: var processorsArray = [ require('cssnext')() ];Khi browser đã hỗ trợ CSS4, ta chỉ việc bỏ plugin này thôi. Ví dụ CSS đầu vào: Và kết quả đầu ra: a { color: purple; } @media (min-awidth:500px) and (max-awidth:1200px){ body{ background:#00f; } } a:focus,a:hover{ background:#00f; } .input, .inputField, input{ background:red; }5. |