個人的に役立ったデザイン素材やTips、WEBサービス、役立つグッズ、あれやこれやをご紹介

一石二鳥!ベンダープレフィックスをブラウザ上で追加し、CSSのミスも指摘してくれる「Autoprefixer」

一石二鳥!ベンダープレフィックスをブラウザ上で追加し、CSSのミスも指摘してくれる「Autoprefixer」

ベンダープレフィックスvendor prefixesをブラウザ上で追加してくれたうえで、CSSのミスも同時に指摘してくれる「Autoprefixer」をご紹介。
ベンダープレフィックスを追加してくれるサービスはこれまでもありましたが、今回紹介する「Autoprefixer」は、CSSのミスも合わせてしてくれるので、一石二鳥でとっても便利です。
ご参考になれば幸いです。

ベンダープレフィックスをブラウザ上で追加し、CSSのミスも指摘してくれる一石二鳥なサービス「Autoprefixer」

「Autoprefixer」は、ベンダープレフィックスをブラウザ上で追加し、CSSのミスも指摘してくれる一石二鳥なサービスです。
ベンダープレフィックスというのは、各ブラウザが独自に拡張機能を実装したり、まだ草案段階の機能を実装した場合に、 それが拡張機能だということを明確にするために付ける接頭辞のこと。
-moz-や-webkit-などが代表例です。
ベンダープレフィックスは、将来的に仕様が変更された場合にも対応できるように、付けておくことが推奨されています。

さて、「Autoprefixer」ですが、使い方はとっても簡単で、Autoprefixerのサイトにいき、画面左側にCSSコードを貼り付けるだけ。
すると、右側にベンダープレフィックスがついた状態で表示されます。

一石二鳥!ベンダープレフィックスをブラウザ上で追加し、CSSのミスも指摘してくれる「Autoprefixer」

ただし、CSSの記述にミスがあると、以下のようにミスを指摘してくれます。

一石二鳥!ベンダープレフィックスをブラウザ上で追加し、CSSのミスも指摘してくれる「Autoprefixer」

ミスがある場合、ミスが完全に消えるまでは、ベンダープレフィックスを追加してくれませんので要注意!
でも、とっても親切ですね。
Autoprefixer CSS online

お役に立てましたら、以下どれでも結構のですので、ポチリと……。

  • 0
  • 0
  • 0
  • 3

Amazonアソシエイト・プログラム規約による記載
当サイトはamazon.co.jpを宣伝しリンクすることによってサイトが紹介料を獲得できる手段を提供することを目的に設定されたアフィリエイト宣伝プログラムである、Amazonアソシエイト・プログラムの参加者です。

この記事を読んだ人はこんな記事も読んでいます

コピペで完了!12種類のプログレスバーを簡単に導入できるPACE.js

すでに当サイトにも導入してみたのですが、お気づきでしょうか。 PC版で当サイトをご覧いただくと、画

記事を読む

無料で商用利用可のレスポンシブ/HTML5対応のテンプレートをまとめてくれている「HTML5 UP」

無料テンプレートを探すとき、どういう基準で探していますか? レスポンシブ対応? HTML5対応?

記事を読む

レスポンシブWEBデザイン対応のメニューが作れるチュートリアル17(ソースファイル付き)

レスポンシブWEBデザインを行ううえで重要になってくるのがメニューをどのようにするかということではな

記事を読む

オフラインでも便利なChrome機能拡張おすすめアプリ10

ネットが便利なのは言うまでもありませんが、場所の制約からネット回線につながらないときがあります。

記事を読む

トップ固定でレスポンシブ対応のナビゲーション/メニューを簡単に実装できる「Fixed Nav」

トップ固定で、レスポンシブ対応のナビゲーションが増えていますね。 これだけ増えてくると、トップ固定

記事を読む

これは簡単!ポリゴン画像生成ジェネレーター「Trianglify Generator」

これは簡単!ポリゴン画像生成ジェネレーター「Trianglify Generator」

簡単・無料で利用できるこポリゴン画像生成ジェネレーターをご紹介。 背景画像などによく使われているポ

記事を読む

Sketch用の無料フリー素材1500+ 2015年04月

Sketch用の無料フリー素材1500+ 2015年04月

Sketch用の無料フリー素材を集めてみました。 Mac専用ということもあり、日本ではPhotos

記事を読む

2013年のベストjQueryプラグイン47

2013年も残すところわずかになりました。 今年もたくさんのjQueryプラグインが発表されていま

記事を読む

無料で使えるフラットデザインUIキット40

フラットデザインのUIキットをご紹介します。 さまざまなサイトで取り入れられているフラットデザイン

記事を読む

CSS3だけで映画のエンドロール風エフェクトを表現した「Movie Credits」

CSS3だけで映画のエンドロール風エフェクトを表現した「Movie Credits」

CSS3って、とっつきやすいうえに、表現力も豊かで、実装するのが楽しくなってしまいます。 表現力豊

記事を読む