[CSS エディタ]MeryでCSS3のベンダープレフィックスをボタン1個で書く

毎日暑い日が続きますね！自宅のエアコン壊れっぱなし下山です。

今日はエディタの便利機能の紹介を。
ボクが最近使ってるエディタはMery。

スニペット(もどき)なんか自分で作れてオリジナルの環境作れるから便利です。
もちろんZenCodingも使えます。ボク使ってませんけど・・・

ちなみにスニペット(もどき)はJavascriptで書けます。

Meryダウンロード

そして最近気付いた機能が書いてるコードからスニペットを登録できるらしんですよ！

例えば上画像のようなボックス作ろうと思ったら、やってることは角丸、影、グラデーションの3つですが、各ブラウザ対応のためにプレフィックスも書きます。
ってそれがメンドクサイんです。

しかし、一度書いたコードをスニペットに登録しておけば次回からは「あら、簡単じゃない」ってことに・・・

では手順を。

とりあえずは1回メンドウなCSSを書きましょう。

.hogehoge {
	width:300px;
	height:300px;
	margin:100px auto;
	-webkit-box-shadow:2px 2px 2px #eee;
	-moz-box-shadow:2px 2px 2px #eee;
	-ms-box-shadow:2px 2px 2px #eee;
	-o-box-shadow:2px 2px 2px #eee;
	box-shadow:2px 2px 2px #eee;
	-webkit-border-radius:6px;
	-moz-border-radius:6px;
	-ms-border-radius:6px;
	-o-border-radius:6px;
	border-radius:6px;background:-webkit-linear-gradient(top, #fcfcfc, #f4f4f4);
	background:-moz-linear-gradient(top, #fcfcfc, #f4f4f4);
	background:-o-linear-gradient(top, #fcfcfc, #f4f4f4);
	background:linear-gradient(top, #fcfcfc, #f4f4f4);
}

今回書いたのはこれ。

次に登録したいCSSを選択してスニペットボタンをクリック→選択範囲を登録

スニペットボタン→スニペットを編集

こんな感じになってると思います。

これをこう書き換えましょう。

css
	shadow	-webkit-box-shadow:2px 2px 2px #eee;\n\t-moz-box-shadow:2px 2px 2px #eee;\n\t-ms-box-shadow:2px 2px 2px #eee;\n\t-o-box-shadow:2px 2px 2px #eee;\n\tbox-shadow:2px 2px 2px #eee;

css → 改行 → shadow → Tab の順番です。

すると次回からはこう出てきます。

ようするにcssというカテゴリを作って(css → 改行)その中にshadowというスニペットを作りましたよって感じです。
あとは必要なCSSを随時登録していけば、きっとそのうちスニペットだけでCSS書けちゃうんじゃね？(なわけないですが)

他にもJavascriptで多数スニペット作ってますので、そのうち公開します。