Giới thiệu về gem Autoprefixer trong Rails

Ruby on Rails

Thêm gem autoprefixer-rails vào file Gemfile:

gem "autoprefixer-rails"

Xóa cache:

rake tmp:clear

Viết CSS và Autoprefixer sẽ tự động áp dụng tiền tố cho bạn. Ví dụ với file app/assets/stylesheet/foobar.sass như sau:

:fullscreen a
  display: flex

Autoprefixer dùng dữ liệu của Can I Use với thống kê sự hỗ trợ của các trình duyệt để tự động thêm tiền tố sử dụng Asset Pipeline:

:-webkit-full-screen a {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex
}
:-moz-full-screen a {
    display: flex
}
:-ms-fullscreen a {
    display: -ms-flexbox;
    display: flex
}
:fullscreen a {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex
}

Nếu bạn cần ghi lại trình duyệt cho Rails project, bạn có thể lưu lại ở:

• browserslist và đặt ở app/assets/stylesheets/ hoặc bất kì thư mục cha nào.

> 1%
last 2 versions
IE > 8 # comment

• Hoặc bạn có thể lưu tại config/autoprefixer.yml

flexbox: no-2009
browsers:
  - "> 1%"
  - "last 2 versions"
  - "IE > 8"

Ghi chú: bạn cần dọn dẹp cache (rake tmp:clear) để những thiết lập của mình có hiệu lực.

Bạn có thể xem những thuộc tính bị thay đổi khi dùng Rake:

rake autoprefixer:info

Disable Autoprefixer:

AutoprefixerRails.uninstall(Rails.application.assets)

Sprockets

Nếu bạn sử dụng Sinatra hay các framework non-Rails khác với Sprockets, chỉ cần kết nối môi trường Sprockets của bạn với Autoprefixer và viết CSS bình thường:

assets = Sprockets::Environment.new do |env|
  # Your assets settings
end

require "autoprefixer-rails"
AutoprefixerRails.install(assets)

Ruby

Nếu cần gọi Autoprefixer từ một đoạn code Ruby thuần, mọi thứ rất đơn giản:

require "autoprefixer-rails"
prefixed = AutoprefixerRails.process(css, from: 'main.css').css

Bạn có thể ghi chú trình duyệt bằng lựa chọn browsers:

AutoprefixerRails.process(css, from: 'a.css', browsers: ['> 1%', 'ie 10']).css

Source map

Autoprefixer sẽ sinh ra source map nếu bạn thiết lập thuộc tính map là true trong method process. Bạn phải thiết lập file CSS input và output (bằng lựa chọn from và to) để sinh ra map đúng.

result = AutoprefixerRails.process(css,
    map:   true,
    from: 'main.css',
    to:   'main.out.css')

Autoprefixer cũng có thể chỉnh sửa source map cũ (ví dụ từ biên dịch của SASS. Bạn chỉ cần đặt nội dung của source map (dạng string) vào map.

result = AutoprefixerRails.process(css, {
    map:   File.read('main.sass.css.map'),
    from: 'main.sass.css',
    to:   'main.min.css')

result.map #=> Source map from main.sass to main.min.css

Tổng kết

Hy vọng qua bài viết này, mọi người có thể phần nào nắm được về gem autoprefixer-rails của Rails. Bài viết được dịch từ Autoprefixer Rails