みかづきブログ その3

3ヶ月つづけてみました。

grunt-autoprefixerで自動でprefixをつける際に気をつけること

便利ですが、範囲の指定には気をつけましょうという話です。

github.com

// grunt-autoprefixer
autoprefixer: {
  options: {
    browsers: ["last 2 version"] // 対象のバージョンが指定できる
  },
  develop: {
    src: "build/data/css/*.css"
  },
  distribution: {
    src: "dist/data/css/*.css"
  }
}

こんな感じでタスクを設定しておけば必要なプレフィックスを自動でつけてくれる便利なプラグインです。

先日Andoroid4.2.2でtransitionが効かないという現象に出くわした際、CSSを確認したところ、

    transition: opacity 1s ease-in-out;

と-webkit-のベンダープレフィックスが付加されていませんでした。
(Androidは4.3までtransitionにプレフィックスが必要)

Can I use... Support tables for HTML5, CSS3, etc

autoprefixerを使っていたので油断していたのですが、

options: {
  browsers: ["last 5 version"]
}

と範囲を広げたところ解決しました。