CodaでPrefixrするやつ

Aug 04, 2011 - nagomu

「CSS3のプロパティを使いたい時に、手動で、色々なブラウザの為に、prefixを追加するの面倒すぎるから、ラクに出来るやつ作った」的な記事がNettuts+に掲載されてました。

Cross-Browser CSS in Seconds with Prefixr

見てたら、TextMateで使う場合のサンプルとかあったので、Codaのプラグインにしてみました。例によって、全くと言って良いほど検証していませんが、置いておきます。よろしければお使いください。

Prefixr （zip 6KB）

使う時は、


/* 例えば、こんなん書いて、選択します（1行だったら、zen-codingの「ctrl + L」とかでいける） */
.foo {border-radius: 5px;}
/* 「cmd + shift + ctrl + P」すると、 */
.foo {
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -o-border-radius: 5px;
  -ms-border-radius: 5px;
  -khtml-border-radius: 5px;
  border-radius: 5px;
}

また、


/* 以下のように他のプロパティが混ざっていた場合は, */
.foo {
  width: 100%;
  border-radius: 5px;
  font-size: 1.2rem;
}
/* こんな感じです。 */
.foo {
  width: 100%;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  -o-border-radius: 5px;
  -ms-border-radius: 5px;
  -khtml-border-radius: 5px;
  border-radius: 5px;
  font-size: 1.2rem;
}

見た目を調整してませんが、プロパティの前にはタブでインデントが入ります。

セレクタが無いまま、「border-radius: 5px;」だけ選択しても動作しますが、最後のセミコロンを省略してたりするとダメっぽかったです。

「俺、シングルラインで書いてるし」という人は、もう一度選択して、zen-coding（Tea for Coda）の「ctrl + M」すれば、イイんじゃないすかね？

といった感じです。

出来る事も出来ない事も、Prefixr次第という感じで、今のところ、たぶん、オプションは使えません。あと、当然、オフラインだと使えないです。

nagomu.me

CodaでPrefixrするやつ

Keywords

Tags