Tokyo Q Studio

Web制作・WordPress・BootStrap・DTM制作・SEO対策

Sublime Textで自動的にベンダープレフィックスを追加してくれるPlug-in-AutoPrefixer

Sublime TextのPlug-in、自動的でベンダープレフィックス・Plug-in-AutoPrefixer

これは待ち望んだプラグインだ。

Sublimeにこんな便利なプラグインがあったなんて。

早速インストールしましょう!

 

紹介サイト

http://zxcvbnmnbvcxz.com/autop…

 

追記:使用してみた感想

まず使用するにあたって「node.js」が必要でした。

これは「http://nodejs.org/」からダウンロードしてもらえれば問題ありません。

(ただし私はMacを使っているのでターミナルを使ったゴニョゴニョはちょっとだけで済みましたが・・・)

 

設定が済んだら後は天国ですw。

確かにcompassやgruntやら自動でホニャララしてくれるのは助かりますが、目で見て確認した方が良いし、sassからコンパイルしたcssに直接「AutoPrefixer」かけると「Can I Use」というcssのベンダープレフィックスを常に監視しているサイトから最新のプレフィックスを当ててくれると言う事です。

 

心配性の私にはこのくらいで丁度良いのかも知れません!

 

それで実際仕事でも使ってみましたが、素晴らしい結果が出ています。

例えばこのコード。

 

.sample {
 transform: rotatex(0deg);
 display: flex;
 background-image: linear-gradient(to right, #ffffff, #000000);
 box-shadow: 1px 2px 5px rgba(0, 0, 0, 0.8), inset 0px 0px 2px #68a7cf;
}

1・このCSSをID・classの範囲を選択し、
スクリーンショット 2014-06-26 11.21.02

2・「commond + shift +p(macの場合)」で「install package」を開きます。

3・「AutoPrefixer」を選択するとあら不思議!

スクリーンショット 2014-06-26 11.20.48

 

4・結果!

.sample {
 -webkit-transform: rotatex(0deg);
 -ms-transform: rotatex(0deg);
 transform: rotatex(0deg);
 display: -webkit-box;
 display: -webkit-flex;
 display: -ms-flexbox;
 display: flex;
 background-image: -webkit-gradient(linear, left top, right top, from(#ffffff), to(#000000));
 background-image: -webkit-linear-gradient(left, #ffffff, #000000);
 background-image: linear-gradient(to right, #ffffff, #000000);
 -webkit-box-shadow: 1px 2px 5px rgba(0, 0, 0, 0.8), inset 0px 0px 2px #68a7cf;
 box-shadow: 1px 2px 5px rgba(0, 0, 0, 0.8), inset 0px 0px 2px #68a7cf;
}

何とも簡単な!

こりゃ素晴らしい!

 

しかもこの「AutoPrefixer」なんですが、ググって拾ってきたcss3のコードなんかを最新の記述に変換してくれるんです!

>施行前

#sample {
 background: -moz-linear-gradient(top, #3bd1ff 0%, #1e42d0);
 background: -webkit-gradient(linear, left top, left bottom, from(#3bd1ff), to(#1e42d0));
}

>施行後

#sample {
 background: -webkit-gradient(linear, left top, left bottom, from(#3bd1ff), to(#1e42d0));
}

ただし万能ではないようで、たまに残ってしまう場合もあるようで・・・。

 

sassなんかで書いておけば階層管理も楽だし、記述も1行で済むからスピードアップ間違いなし。

最終的に納品時にコンパイルしたcss全体を「AutoPrefixer」すれば楽々です!

(実際納品cssを全体選択して「AutoPrefixer」を施すと簡単便利でした!)

開発は最新のブラウザーを使って、「LiveReload」なんかをあてがっておけば、保存する度に更新してくれるので記述も少なくて済みます。

(LiveReloadに関しては後日記述)

 

リテイクもsassで作っておけばcssに「AutoPrefixer」かけてしまっていても簡単にやり直せますし、再納品時にもう一度「AutoPrefixer」かければ済んでしまいます。

 

世の中もっともっと便利なモノもありますが、一つ一つやりやすく、かつ完璧な自己管理が出来る方が良いのかもしれませんね。

まぁ今の私には丁度良いのかもしれませんw。

  関連記事

  • no image
    ドコモでiPhone5を使用している人は注意「iOS6.1に したらLTEが使えなくなったよ」
    LTE戦争で大負けしているdocomo。 いの一番で回線開いたが遅いのでは問題外です。 まだまだ親元気にしてる体制は今後の日本としてどうなんでしょうか? 頑張ってください!(`_´)ゞ http:// ...
  • 4つの翻訳サイトを瞬時に切り替える翻訳アプリ『一挙に英語翻訳 』
    翻訳サイトはどこを選ぶかで変わりますからね。 4つ同時はありがたい。 iPhoneから送信
  • no image
    Googleが改良版UDPとしてQUICというプロトコルを開発中( らしい)
    改良賛成! もっと早くなって欲しいですね! http://jp.techcrunch.com/archi… 昨日のFrançois Beaufortは最高に幸せだった。今月初めに彼が見つけ ...
  • f:id:Tokiyo:20121201225622j:image:w360
    2012-12-01|イラストの練習
    目次1 2012-12-012 イラストの練習2.1 デフォルメデッサン2.2 影を描く 2012-12-01 イラストの練習 デフォルメデッサン 中心から描いていく 影を描く ヘタすぎる・・・練習し ...
  • f:id:Tokiyo:20121204205321p:image:w360
    2012-12-03|floatの勉強
    目次1 2012-12-032 floatの勉強2.1 「conteiner」に色を付けたいが上記のままでは色は現れない2.2 「overflow」で現れる2.3 練習 2012-12-03 floa ...
  • no image
    あれ、いつも書いてるな~というJavaScript の小技集 | バシャログ。
    JavaScriptは勉強中です。 なのでこういう使えそうなまとめ集はホントに助かります! ありがとう。 http://c-brains.jp/blog/wsg/14…
  • Googleの自動運転カーは毎秒1GBのデータを処理、これがGoogleカーから見た世界
    熱暴走が怖いですねw iPhoneから送信   Googleの全自動運転カー(セルフドライビングカー)がカーブするときにどれぐらいのデータを処理し、どのように世界を見て分析しているのかという ...
  • OS XからExtFSへフルアクセスできる「Paragon ExtFS」の新バージョン
    Windowsのデータがフルアクセス! 意外に便利です。 持ってて損はありません! iPhoneから送信 パラゴン ソフトウェアは、Mac OS XからLinuxファイルシステムへのフルアクセスを可能 ...
  • フォント表現の可能性を広げるjQueryプラグイン 「20 jQuery Typography Plugins」
    英字はイイなと思う今日この頃… タイポグラフィが本当にカッコいい。 日本語もいいとこあるんだけど、漢字は硬いしカタカナは機械的。 平仮名は好きだけど、それだけで全部は表現できないかもで… 英字っぽく日 ...
  • magic cube
    未来的な照射型キーボード『magic cube』が映画『オブリビオン』 とタイアップ
    かっこいいけどブラインドタッチが難しそう… iPhoneから送信 元の記事:http://getnews.jp/archives/348… SF映画の世界ではパソコンのモニターが空中に浮か ...