私はこの質問の主題である CSS コンプレッサー ( http://www.lotterypost.com/css-compress.aspx ) の開発者なので、コンプレッサーがどのように CSS を壊すかの例を詳しく説明します。ツールが積極的に書き換える場合はカスケードします。
スタイル シート内の要素をターゲットにする方法は多数あります。CSS コンプレッサは、ページの DOM 構造、クラス、ID などについて詳細な知識を持っていないため、括弧で囲まれた最適化が交差するかどうかをコンプレッサが知る方法はありません。定義が壊れるかどうか。
たとえば、単純な HTML 構造は次のとおりです。
<div class="normal centered">
<p>Hello world.</p>
</div>
そしていくつかの CSS:
div.normal p {
margin: 10px 0 10px 0;
}
div.centered p {
margin: 10px auto;
}
div.normal p {
margin-bottom: 5px;
}
圧縮されていないコードは、上マージンが 10 ピクセル、下マージンが 5 ピクセルの中央揃えの段落を生成します。
CSS Compressor を介して CSS スタイルを実行すると、元の圧縮されていないスタイルの順序とカスケードを維持する次のコードが得られます。
div.normal p{margin:10px 0}div.centered p{margin:10px auto}div.normal p{margin-bottom:5px}
2 つのdiv.normal p定義の余白を組み合わせて、スタイルをさらに積極的に圧縮したいとします。どちらもまったく同じセレクターを持っており、下マージンを冗長にスタイルしているように見えます。
マージンを結合するには 2 つの方法があります。2 つのマージン定義を最初 (上) のdiv.normal pスタイルに結合するか、それらを最後 (下) に結合することができます。両方の方法を試してみましょう。
マージンを最初 (上) のdiv.normal pスタイルに組み合わせると、次のようになります。
div.normal p{margin:10px 0 5px}div.centered p{margin:10px auto}
このようにマージンを組み合わせた結果、下マージンが誤って 10px に設定されます。これは、「中央揃え」クラスが下マージンをオーバーライドするためです (「中央揃え」スタイル定義がカスケードの後半に表示されるため)。
マージンを最後 (下) のdiv.normal pスタイルに組み合わせると、次のようになります。
div.centered p{margin:10px auto}div.normal p{margin:10px 0 5px}
マージンをそのように組み合わせた結果、段落が中央揃えで表示されなくなります。これは、下部の「p」定義が、「中央揃え」クラスで定義されている「auto」の左右のマージンをオーバーライドするためです。
したがって、まったく同じセレクターを持つスタイル定義を組み合わせることで、かなり悪い問題が発生する可能性があることがわかります。
個人的にこのようなコードを書くことはありますか? たぶん、そうでないかもしれません。カスケードにはさまざまな「重み」ルールがあるため、気付かないうちにこのタイプのコード トラップに陥る可能性があります。
さらに、今日の Web ページでは、複数の CSS ファイルを 1 つのファイルにまとめてサーバーにダウンロードする回数を減らすことが多いという事実を考えると、CSS Compressor が複数のスタイル シート (おそらく異なる人によって書かれたもの) が 1 つのファイルに一緒に追加されます。
実際、私は自分の Web サイトLottery Postで、まさにこのシナリオ用の CSS Compressor を作成しました。各 Web ページには、さまざまな jQuery やその他のコンポーネントをサポートする多数のスタイル シートがあり、CSS Compressor を使用して、これらすべてのスタイル シートを 1 回のダウンロードに自動的に圧縮します。サイトのすべてのページには、少なくとも 10 種類のスタイル シートが組み合わされており、ほとんどのページにはそれ以上のスタイル シートがあります。
たとえば、CSS Compressor ページ自体の背後にあるコードを見ると、head に次のようなメインのスタイル シートがあることがわかります。
<link rel="stylesheet" href="http://lp.vg/css/d11019.0/j2HKnp0oKDOVoos8SA3Bpy3UHd7cAuftiXRBTKCt95r9plCnvTtBMU2BY2PoOQDEUlKCgDn83h16Tv4jbcCeZ(gupKbOQ9ko(TcspLAluwgBqrAjEhOyXvkhqHA(h5WFDypZDK2TIr(xEXVZtX7UANdFp6n1xfnxqIMR8awqGE)vrwUgY2hrCGNNTt1xV7R1LtCSfF46qdH1YQr2iA38r1SQjAgHze(9" />
URL の gobbledeegook は、実際には、サーバー上で結合するすべてのスタイル シートを含む暗号化された文字列です。サーバーはそれらを圧縮し、結果をキャッシュします。
その 1 つのスタイル シート呼び出しでのスペースと時間を節約する手法には、次のようなものがあります。
- 多くのスタイル シートを 1 つのファイル/ダウンロードにまとめて追加するだけ
- CSS Compressor を使用して結合されたスタイル シートを圧縮する (カスケードを台無しにすることなく!)
- スタイル シートのダウンロードに別のドメイン名 (lp.vg) を使用することで、ブラウザーの並行ダウンロード機能が向上します。
- 非常に短いドメイン名 (lp.vg) を使用する
- GZip 圧縮は、Web サーバー上のスタイル シートに適用されます。
- スタイル シートのバージョン番号は URL (".../d11019.0/...") に埋め込まれているため、複数のスタイル シートのいずれかでスタイルが変更された場合、バージョン番号とブラウザは、キャッシュしたバージョンを決して使用しません。(バージョン番号は、クエリ文字列ではなく、URL パスの一部である必要があることに注意してください。一部のプロキシ サーバーは、ページをキャッシュから取得する必要があるかどうかを判断するためにクエリ文字列を確認しないためです。)
これが物事をよりよく説明し、ページのパフォーマンスを改善しようとしている人に役立つことを願っています!
-トッド
より詳しい情報：
上記に加えて、色の例を取り上げ、スタイル定義を同じセレクターと組み合わせると想像してください。
圧縮されていないスタイルを次に示します。
div.normal p {
margin: 10px 0 10px 0;
}
div.centered p {
margin: 10px auto;
color: blue;
}
div.normal p {
color: black;
}
CSS Compressor は次の出力を生成します。
div.normal p{margin:10px 0}div.centered p{margin:10px auto;color:blue}div.normal p{color:#000}
同じセレクターを持つスタイル定義の積極的な組み合わせを適用すると、次のコードが得られます。
両方を最初の定義に組み合わせる方法 1は、テキストの色を誤って青色にします。
div.normal p{margin:10px 0;color:#000}div.centered p{margin:10px auto;color:blue}
方法 2の両方を 2 番目の定義に組み合わせると、テキストが誤って左揃えになります。
div.centered p{margin:10px auto;color:blue}div.normal p{margin:10px 0;color:#000}
スタイル定義を同じセレクターと組み合わせて 100% エラーが発生しないのは、定義が次々に現れる場合だけですが、それ以外の場合はすべて、この手法はスタイルのカスケードを破損する危険があります。
開発者がこの方法でコードを記述するケース (まったく同じセレクターを持つ 2 つのスタイル定義が、すぐ後に続く) を想像することはできなかったので、コーディングに必要な労力と、コンプレッサーの追加の障害点は、ロングショットでは価値がありませんでした。
率直に言って、カスケードは非常に脆弱なものであり、カスケードを壊すのは非常に簡単であるため、異なる定義ブロックのスタイルを組み合わせた CSS コンプレッサーについては非常に懸念しています。