2015/12/08
一石二鳥!ベンダープレフィックスをブラウザ上で追加し、CSSのミスも指摘してくれる「Autoprefixer」
ベンダープレフィックスvendor prefixesをブラウザ上で追加してくれたうえで、CSSのミスも同時に指摘してくれる「Autoprefixer」をご紹介。
ベンダープレフィックスを追加してくれるサービスはこれまでもありましたが、今回紹介する「Autoprefixer」は、CSSのミスも合わせてしてくれるので、一石二鳥でとっても便利です。
ご参考になれば幸いです。
ベンダープレフィックスをブラウザ上で追加し、CSSのミスも指摘してくれる一石二鳥なサービス「Autoprefixer」
「Autoprefixer」は、ベンダープレフィックスをブラウザ上で追加し、CSSのミスも指摘してくれる一石二鳥なサービスです。
ベンダープレフィックスというのは、各ブラウザが独自に拡張機能を実装したり、まだ草案段階の機能を実装した場合に、 それが拡張機能だということを明確にするために付ける接頭辞のこと。
-moz-や-webkit-などが代表例です。
ベンダープレフィックスは、将来的に仕様が変更された場合にも対応できるように、付けておくことが推奨されています。
さて、「Autoprefixer」ですが、使い方はとっても簡単で、Autoprefixerのサイトにいき、画面左側にCSSコードを貼り付けるだけ。
すると、右側にベンダープレフィックスがついた状態で表示されます。
ただし、CSSの記述にミスがあると、以下のようにミスを指摘してくれます。
ミスがある場合、ミスが完全に消えるまでは、ベンダープレフィックスを追加してくれませんので要注意!
でも、とっても親切ですね。
Autoprefixer CSS online
Sponsored by
お役に立てましたら、以下どれでも結構のですので、ポチリと……。
Amazonアソシエイト・プログラム規約による記載
当サイトはamazon.co.jpを宣伝しリンクすることによってサイトが紹介料を獲得できる手段を提供することを目的に設定されたアフィリエイト宣伝プログラムである、Amazonアソシエイト・プログラムの参加者です。
この記事を読んだ人はこんな記事も読んでいます
-
グラフィックデザイナーのためのオンラインポートフォリオ作成方法
グラフィックデザイナーの皆さんはオンラインポートフォリオをもっていらっしゃいますか? 持っていない
-
背景に使いたい!美しくカラフルなトライアングルメッシュ画像をSVGとして作成できるjsライブラリー「Trianglify」
最近よく見かける背景画像といえば、美しいボケ味の効いた画像やカラフルなピクセルパターンですが、美しく
-
HTML/CSSをより見やすく!Google Chromeデベロッパーツールの機能拡張「SnappySnippet」が便利
「このサイトのココどうやっているんだろう?」そう思ったとき、 ソースを見るか、Chromeのデベロ
-
画像を使わずにCSSとWEBフォントを利用してアイコンボタンをつくる方法
アイコンに画像を利用せず、WEBフォントとCSSを使って表現する方法が徐々に増えています。 画像を
-
アイコンはCSSで!フォントもSVGも使用しないCSSだけのアイコンセット「Icono」
CSSだけでつくられたアイコンセットのご紹介です。 近年のアイコンというと、アイコンフォントかSV
-
スクロールした位置についてくるStickyプラグイン15
スクロールした位置についてくる要素を実装するjQueryプラグイン「Stickyプラグイン」をまとめ
-
使える!2015年時点で最高の無料レスポンシブ用フリーテンプレート50+
2015年時点で最高の無料レスポンシブ用フリーテンプレートをご紹介します。 今回ご紹介する無料のH
-
WEBデベロッパーのためのおすすめYouTubeチャンネル15選
WEBデベロッパーのためのおすすめYouTubeチャンネルをご紹介します。 対象はHTML、CSS
-
リボン風の見出しをCSS3だけで実装する方法
見出しでリボン風の装飾をCSS3だけで実装する方法をご紹介します。 利用するのはboderプロパテ
-
レスポンシブWEBデザインなら導入したいレスポンシブ対応CSSフレームワーク35(〜2013年9月まで)
レスポンシブWEBデザインにますます注目が集まっているようです。 つい最近では、カラーミーショップ