原典：New CSS Editor Improvements in Visual Studio (ASP.NET 4.5 Series)
Visual StudioのCSSエディタ機能の改善 （ASP.NET 4.5シリーズ）
ASP.NET 4.5のブログ投稿シリーズで、今回は7回目になります。
次期リリースの.NETおよびVisual Studioには、新機能が非常に多く含まれています。ASP.NET 4.5では、WebフォームとMVC、またそのどちらの基盤となっているASP.NETコアも含め、非常に素晴らしい改善点が多く見られます。
本日の投稿では、Visual Studioの次期リリースに追加された、CSSおよびCSS3に対する改善点で、ASP.NETプロジェクトと特に相性の良い改善点についてカバーします。
CSS カラーピッカー
Visual Studioの前バージョンでは、CSSエディタにあるIntelliSenseエンジンは、色名をドロップダウンリストに表示していました。これを、Visual Studioの新バージョンでは、スタイルシートのどこかで以前使用された色が選択できたり、独自の色のスタイルが作成できるフル機能のカラーピッカーに変更しました。
CSSエディタで、CSSプロパティの色の値を編集すると、新しいカラーピッカーが自動的に表示されます。デフォルトでは、スタイルシート内で以前使用された色と、デフォルトのサンプルパレットが表示されます。そのリストから、マウスやキーボードを使用して色が選択できます。
『+』アイコンを選択すると、全色揃ったカラーピッカーが表示されるので、より細かい色の選択ができます。
Opacityスライダーをスライドすれば、自動的にどの色もCSS3 RGBAの値に変換され、アルファチャンネルを管理できます。また、Color Selectorと呼ばれる機能もあり、ブラウザにロードされている他のWebサイトや、システム上で実行している他のアプリケーションからも色が選択できます（Eye-Dropper機能）。
カラーピッカーの実際の動きについては、この60秒ビデオを見てください。同じスタイルシートにある他の色を使用したり、新しい色を作成したり、CSS3の不透明度機能を使用しているところが確認できます。
クロスブラウザとCSS3スニペット
スタイルシートを書く際、同じCSS3プロパティのベンダー特有のバージョンを扱うのは、面倒なことです。各ブラウザに対して、同じプロパティを書かなければならないこともしばしばで、5回全く同じ値を書かなければならないケースなどもあります。これは大変ですが、すべてのブラウザのバージョンをサポートするためには、必要な作業です。
Visual Studioの次期バージョンには、CSSスニペットがサポートされており、ベンダー特有のプロパティを自動生成します。つまり、CSS3プロパティをクロスブラウザで動作させるための大変な検索や入力作業はもう必要ありません。
CSSスニペットは、Visual Studioのその他のエディタにあるコードスニペットと同じように動作します。
例えば、CSS3のtransitionプロパティに対するスニペットが必要な場合は、『transition』とタイプするか、CSSスタイルシートのIntelliSenseから選択するだけです。
その後、TABキーを押すと、Visual Studioは、CSS transitionスニペットを実行して、すべてのベンダープレフィックスを追加したコードを生成します。また、値をひとつ変更すると、他のプロパティも自動的に反映されます。
CSSスニペットの実際の動きについては、この60秒ビデオを見てください。ベンダープレフィックス、またマルチスクリーンをサポートするためのメディアクエリやクロスブラウザのフォントの埋め込みなどのようなシナリオでの、スニペットの活用方法を紹介しています。
階層的CSSインデント
実際のスタイルシートをみると、Web開発者は個々のCSSルールにおける親子関係を作成したり、それを保つために、インデントを使用する傾向が多く見られます。これによってツリー式の階層を表現できるため、ルール間やドキュメント内の論理的な関係性が簡単に視認できます。
以前のVisual Studioのバージョンでは、手動でこれらの階層を保つのは大変で、CSSフォーマッターを動作させると、余分なインデントが削除されてしまいます。つまり、全体のスタイルシートを手動でフォーマットし直さなければなりません。
Visual Studioの次期リリースでは、選択している部分、もしくはすべてのドキュメントがフォーマットされたときに、CSS階層の作成／保持をビルトインサポートしています。これにより、スタイルシートの構造や、たまにあるルールの複雑な階層などのチェックが簡単になります。
Visual Studioにおける最新のCSSエディタは、共通のCSSハックもサポートしており、その知識を構造的なインデントメカニズムに取り込んでいます。これによって、以下のスクリーンショットで描かれているようなハックでも、ルールのカスケード位置を保持できるようにしています。
CSS階層的インデントの実際の動きについては、この60秒ビデオを見てください。CSSルールの作成や、CSSハックを使用した場合の活用方法などが確認できます。
まとめ
ASP.NETおよびVisual Studioの新バージョンでは、ASP．NETアプリケーション内でCSSを簡単に最大限に活用できます。
今回の投稿では、これをサポートするためにVisual Studioに行ったCSSエディタの改善をいくつか紹介しました。前回の投稿では、JavaScript およびCSSのバンドルとミニファイの実行時についてカバーしました。今後の投稿では、CSSをより使いやすくするために行った、ASP．NETのWebフォームコントロールやASP.NET MVCヘルパーの改善についてカバーします。
Hope this helps,
Scott
P.S. ブログ以外に、Twitterを使って簡単な更新やリンク共有を行っています。私のハンドル名は、@scottguです。
