ブラウザ固有の接頭辞(プレフィックス)のあるCSS3プロパティをまとめて挿入するコードヒントを作りました - dwlog.net

ブラウザ固有の接頭辞(プレフィックス)のあるCSS3プロパティをまとめて挿入するコードヒントを作りました

| コメント(2) | トラックバック(0)

バージョンアップしました。詳細はこちらの記事

久々の投稿です。11.0.3のアップデータでHTML5 Packが正式にDreamweaverに導入されました。個人的には今までのようにmxpで導入のオンオフ制御を希望するところですが、オンオフができるのは何故かマルチスクリーンプレビューのみという変な対応になってます。まあどうでもいいですが中途半端だなあと...。

HTML5 PackではもともとCSS3プロパティ&Firefox、Safari、Operaの接頭辞付きプロパティに対応してましたが、Labsにあったベータ版ではヒンティング表示が一律で、選んでいくのに、過剰なスクロールをしないといけないという、いけてない仕様でした。それが11.0.3になって一旦接頭辞(-moz-、-o-、-webkit-)だけ表示して該当プロパティのみ表示する、スマートな形に変わっていて、個人的には使いやすくなっていると思います。

その他プロパティの値やHTML5のDOM関係のコードヒントも追加されているようで、JavaScriptの開発時もそれなりに重宝しそうです。

相変わらずセレクタには対応していないので、セレクタのコードヒントをご希望の方はCSS3セレクタ機能拡張を入れてください。

で作業してて思ったのが、まだCSS3は正式勧告ではないし、ブラウザ対応のためにまだ多くのプロパティに接頭辞付きプロパティを追加しないといけない現状があります。となるとプロパティによっては各ブラウザ毎に3-4つくらい、さらには値も指定してやる必要があります。

ということで多少の入力補助になるかもと思って、接頭辞付きもまとめて挿入するコードヒント拡張機能を作ってみました。

「+」付きを選択すると、接頭辞付きプロパティーを同時に挿入します。

【機能について】

  • ヒントリストの語尾に「+」のあるプロパティを選択すると、Firefox、Safari、Operaのプレフィックス付きプロパティが同時に挿入されます。
  • IEの対応は、最近はいろいろな手法が出てたりすることもあり、今回は見送りました。(要望が多ければ検討します)
  • 挿入されるのはプロパティーのみです。値は個別に入れてやる必要があります。
  • 改行時にインデントしてないので変換時はいけてませんが、そこはコードフォーマットで整形してください。
  • background-imageの時に、グラデーションをlinearかradiusで挿入するように設定しているのですが、デフォルトのCodeHint.xmlだと表示されません。こちらはもうすぐ出す予定のスペシャルコードヒント改訂版で修正しましたので、表示可能になるはずです。

【対応バージョンについて】

  • インストールはDreamweaver8以降に対応しています。

【導入方法】

  • 解凍したファイルはmxp形式となっており、ExtentionManegerにて簡単に導入することが出来ます。

【ダウンロード】

トラックバック(0)

トラックバックURL: http://dwlog.net/mt/mt-tb.cgi/47

コメント(2)

はじめまして!CHRISと申します。
最近DWを使い始めて、HTML5やCSS3のコーディングをしていまして、ブラウザ固有のCSS3プロパティを入力やコピペをしていたので、ちょっと大変でした。

コードヒント拡張機能は各ブラウザのCSS3プロパティが同時に挿入できて大変便利でこれからのコーディングがスムーズにできます!

ありがとうございます!応援してます!

CHRISさん使っていただき、ありがとうございます。使っていて思うところがあれば、またコメント書き込んでいただけるとありがたいです。twitterとかでもOK(@akira_maru)。

コメントする