Autoprefixer を使ってCSSを調整

無料のワードプレステーマ GEMSTONE

ベンダープレフィックス(vendor prefix)を設定すると、CSS3で様々な表現ができるので便利ですが
ブラウザごとに調整するのは、面倒だし大変なので正直嫌いな存在でした。

ベンダープレフィックスとは

CSS3で採用される予定の機能が各ブラウザで先行実装されていますが、それらの機能を動作させるには、 現状ではプロパティや値の先頭に-moz-や-webkit-などのベンダープレフィックスを付ける必要があります。

HTMLクイックリファレンスより引用

探したら便利なサービスがありました

そこで見つけたのが Autoprefixer です。
これを使えば、ブラウザのバージョンに合わせて、ベンダープレフィックスを追加したり、必要ないものは自動で消してくれたりと、非常に便利。
オンラインでできるウェブサイトもあったのでご紹介します。

CSS Online Autoprefixer
上記は、スタイルシートに必要なベンダープレフィックスを簡単に調べることができるウェブサービスです。
調べたいCSSをコピペするだけで、自動で調査してくれます。GEMSTONE最新バージョンもこれを使ってCSSを再設定しました。
(ブラウザは全て最新に合わせています)
style.css はだいたい100行くらいコードが減りましたね。

これを使って、より短いコードでCSSを記述できるというわけです。
Autoprefixer を使った最新バージョンの公開はもうすぐ!
お楽しみに!

この記事のタグ

「チェックを入れて送信」... 前の記事

次の記事 新年明けましておめでとう...

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です