みかづきブログ その3

本ブログは更新を終了しました。通算140万ユーザーの方に観覧頂くことができました。長い間、ありがとうございました。

👆

引越し先はこちらです!

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"]
}

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