Introduction.

Sometimes you have to add a vendor prefix like -webkit-hogehoge if you want to use something new like CSS3 animations, right?

Vendor prefixes mean that I have to write the same kind of thing over and over again for each browser.

  animation: spin 1s infinite linear;
  -webkit-animation: spin 1s infinite linear;

infinite linear; -webkit-animation: spin 1s infinite linear; -webkit-animation: spin 1s infinite linear; -webkit-animation: spin 1s infinite linear; -webkit-animation: spin 1s infinite linear; -webkit-animation: spin 1s infinite linear; -webkit-animation: spin 1s infinite linear; -webkit-animation: spin 1s infinite linear; -webkit-animation

It's not very productive to be aware of this vendor prefix and think that this CSS prefix is necessary for this CSS for the browsers supported by this project, is it?

And it's not going to be simple code.

So I'm using Autoprefixer, which automatically gives me a vendor prefix, but basically I use it by embedding it in front-end tools like Gulp and Webpack.

So we added Autoprefixer function to Sprockets which minify css and add message digest in our Rails Autoprefixer Rails.

Verification Environment

• Rails: ver4.3.1.
• Compile scss files with Sprockets and convert them to css.

How to embed Autoprefixer Rails in Rails

Added to Gemfile

The following was added to the Gemfile

gem 'autoprefixer-rails'

Add a configuration file

config/autoprefixer.yml

browsers:
  - "> 5%" #targeting the top 1% of browsers 
  - "last 2 versions" #Support only the latest 2 major browser versions except for the following
  - "IE >= 11" # IE is 11 or more
  - "Android >= 4" # Android supports system 4

With the above settings, browsers in the top 5% share will support the last 2 versions of that browser, but IE will support 11 or more and Android will support 4 or more.
If you write "IE >= 8" here, it means that IE8 or more will be used. (I don't want to target them.)

I honestly didn't know which browser's name is used for the percentage specification, or if it's seen in each version.
For more information, please refer to https://github.com/ai/browserslist.

Clearing the cache

Since deleting the cache is recommended, it would be better to clear it frankly.
If it's a development environment that doesn't do anything too tricky, you probably don't need to do it.

bin/rake tmp:clear

Compile results

The result of asset:precimpile and sequential compilation in the development environment is as follows.

SCSS before compiling

.sample {
  animation: spin 1s infinite linear;

  @keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
  }
}

CSS after compiling

-webkit has been added with vendor prefixes.

.sample {
  animation: spin 1s infinite linear; -webkit-animation: spin 1s infinite linear;
          animation: spin 1s infinite linear;
infinite linear; }
@-webkit-keyframes spin {
  from {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}
@keyframes spin {
  from {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}