Web Essentials スタイル シート StyleSheets_html/css_WEB-ITnose

Web Essentials 機能ディレクトリに戻る

この記事ディレクトリ

• インテリジェント センシング
• ビジュアルキュー
• 検証
• ウェブ標準
• コンバータ

Web Essentials の CSS 機能のほとんどは LESS にも適用されます。

Intellisense

ベンダー固有のプロパティを生成

CSS 3 の新しいプロパティの多くは、ベンダー固有のプロパティが追加された場合、ブラウザー間で機能します。これらのベンダー固有の属性には、-moz、-webkit、-ms、および -o が含まれます。ベンダー プレフィックスの詳細については、 この記事 を参照してください。

その結果、欠落しているベンダー固有のプロパティが正しい順序で挿入されます。

1 つ以上のベンダー固有のプロパティがすでに存在する場合は、不足しているプロパティのみが追加されます。

カスタム フォント

欠落している標準属性を追加します

唯一のプロンプトをクリックして、欠落している標準属性を自動的に挿入します:

IOS スクロール バー

カスタム iOS スクロール バーの場合、VS2012 はさまざまな擬似要素をサポートします。これらの疑似要素を正しくリンクする方法がわからないと、少し難しくなります。これでもう問題はなくなりました。

ベンダー固有の属性値は同期的に変化します

特に言うことはありませんが、その効果を見てください:

アニメーション名

HTML 要素、クラス、ID

インライン URL チェッカー

ファイル システムは、入力を開始します。

ハック

詳細については、 この記事 をご覧ください。

!重要

!重要に関するスマートなヒントが提供されるようになりました。

Modernizr

Modernizr クラス名が CSS エディターで太字になりました。

領域の追加

CSS エディターで領域を簡単に追加できるようになりました。

地域を入力して TAB キーを押すと、次のコードセグメントが挿入されます

メディアクエリ式

はメディアで取得できますクエリ すべての賢いヒント。

メディア クエリ スニペット

ビジュアル プロンプト

ブラウザ プロンプト

フォントおよび画像プレビュー

カラー スタイル

新しい CSS 3 形式を含むすべてのカラー タイプをサポートします。

ブラウザ セレクター

サポートするブラウザーに応じて、検証と IntelliSense の動作を制御します。

CSS ドキュメント内で右クリックし、Web Essentials のコンテキスト メニューで [ブラウザの選択...] をクリックします。

不明なベンダー固有の属性

すべてのベンダー固有の属性を検証して識別することは非常に困難であるため、間違いを犯しやすい。心配しないでください。バリデーターは、有効または期限切れのベンダー固有の属性を自動的に取得します。

IE10 プレフィックス

IE10 パブリック プレビューでは、-ms-animation などの新しいプレフィックス属性が導入されています。 IE10 の最終バージョンでは、非推奨のプレフィックス付きバージョンを表示するために、これらのプロパティのプレフィックスなしバージョンも実装されています。

ベスト プラクティスとブラウザの互換性

この情報は VS のエラー リストに表示されます:

役立つエラー情報

いくつかのエラーは非常に一般的です。 Web Essentials はこれらのエラーをチェックし、修正に役立つより正確で役立つエラー情報を提供するようになりました。

9 の警告を削除

CSS エディターは 9 ハックをサポートしていないため、エラーが生成されます。 Web Essentials はこれらのエラーを削除します。

セレクター内の不明な HTML タグ

警告なしに HTML のタイプミスをするのは簡単です。これで、古い HTML タグと新しい HTML 5 タグ名の両方がチェックされるようになります。

カラー値

カラー関数 (rgb(1,2,553) など) が検証され、パラメーターが許容範囲内にあることが確認されます。

Web 標準

標準を自動的に更新

Web Essentials は、ドライバー検証ファイルと IntelliSense スキーマ ファイルの更新をチェックします。更新がある場合は、バックグラウンドでダウンロードされ、すぐに使用されます。

ベンダー固有の更新

新しいブラウザーがリリースされると、ベンダーは新しいベンダー固有のプロパティを導入することがよくあります。 Web Essentials は、新しいブラウザーとの特定の互換性のためにスキーマ ファイルを自動的に更新します。

変数モジュール

Web Essentials には、IntelliSense と同じ変数のカラー ブロックを取得するための新しい CSS 変数構文があります。

色を暗く/明るくします

カーソルを 16 進数の色の値の上に置き、Shift+Ctrl+矢印キーを押しながら上/下に移動すると、色が暗くなったり明るくなったりします。以下のデモを参照してください:

カラー形式の変換

以下に示すように、逆三角形のプロンプトをクリックして、さまざまな形式でカラー変換を実行します:

DataURI と背景画像

これにより、参照された画像が Base64 のスタイル ファイルに直接エンコードされるため、HTTP リクエストが 1 つ削減されます。

base64 文字列が長すぎる場合、簡単に折りたたむことができます。ただし、VS 2013 Update5 では、すべての Base64 文字列が 1 行に表示されます。

覚えておいてください: これらのイメージを Base64 文字列に変換する前に、まずイメージ ファイルを最適化する必要があります。 Image Optimizer プラグインを使用すると、画像を簡単に最適化できます。

属性の並べ替え

各セレクターの逆三角形のプロンプトを使用すると、ルールに従ってすべての属性を簡単に並べ替えることができます。

CSS ソートはオープンソースであり、コードは Github で見つけることができます。

最小化

エディターで CSS を直接最小化できます。以下に操作プロセスを示します。

CSS ファイル全体を最小化してバンドルできます。これについては 一般関数 セクションで説明されているため、詳細は説明しません。