個人的に役立ったデザイン素材や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アソシエイト・プログラムの参加者です。

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

コード/js不要!ドラッグ&ドロップだけでCSSイメージスライダーがつくれるアプリ「cssSlider.com」

コード/js不要!ドラッグ&ドロップだけでCSSイメージスライダーがつくれるアプリ「cssSlider」

イメージスライダーは限られたスペースに多くの視覚的情報を盛り込めるので、ショップなどでは非常によく利

記事を読む

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

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

記事を読む

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

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

記事を読む

ショッピングカートだけの利用も無料!決済システムが充実したBASE(ベイス)が使える

ショッピングカートだけの利用も無料!決済システムが充実したBASE(ベイス)が使える

無料でネットショップが開設できるBASE(ベイス)に、ショッピングカートだけの利用も無料というサービ

記事を読む

HTML/CSSをより見やすく!Google Chromeデベロッパーツールの機能拡張「SnappySnippet」が便利

HTML/CSSをより見やすく!Google Chromeデベロッパーツールの機能拡張「SnappySnippet」が便利

「このサイトのココどうやっているんだろう?」そう思ったとき、 ソースを見るか、Chromeのデベロ

記事を読む

レスポンシブ対応済みサイトがApple Watchに対応しているかどうかがわかる「the ultimate responsive test」

レスポンシブ対応済みサイトがApple Watchに対応しているかどうかがわかる「the ultimate responsive test」

Apple Watchがいよいよ発売になります。 ところで、あなたのレスポンシブ対応済みのサイトは

記事を読む

いまさら聞けない無料のアイコンフォントの導入の仕方・使い方

アイコンフォントを今頃になってようやく使ってみました。 最初は正直よくわからず、戸惑ってしまいまし

記事を読む

参考にしたい!シンプルで美しいWEBデザイン50(〜2014.02)

2014年2月現在までに公開されているサイトのうち、美しくスッキリしたデザインをコレクションしてみま

記事を読む

初心者のためのCSSアニメーションチュートリアル

よくわかる 初心者のためのCSSアニメーションチュートリアル

初心者のためのCSSアニメーションチュートリアルです。 海外の有名ブログでわかりやすいチュートリア

記事を読む

1歩先へ!HTML/CSS/JSのスゴワザ・テクニック満載「Top Pens of 2014」

CodePenより、2014年注目のスゴワザ・テクニックが紹介されましたので、ご紹介します。 Co

記事を読む