私は、ネストされたメディア クエリと呼ばれる LESS のこの優れた機能を使用して、各「モジュール」に関連するスタイルを 1 か所に保持できるようにしています。私のメディアクエリは、次のように変数ファイルで定義されています。
// Breakpoints
@breakpoint-medium: "600px";
....
// Queries
@mq-medium-and-up: ~"only screen and (min-width: @{breakpoint-medium})";
....
次に、次の方法で、スタイルシート全体でメディア クエリを使用できます。
.module {
background: green;
@media @mq-medium-and-up {
background: yellow;
}
}
私は自分の CSS に対してモバイル ファーストのアプローチを採用しており、小さな画面 (メディア クエリなし) から大きくて大きなブレークポイント (メディア クエリを使用) へと進んでいきます。明らかに、メディア クエリは IE <= 8 ではサポートされていないため、それらのブラウザを「デスクトップ スタイル」にフォールバックさせたいと考えています。
そうするために、私は現在、次のようにメディア クエリを再定義する別の less ファイル (IE.less) を保持しています。
@mq-medium-and-up: ~"all";
@mq-large-and-up: ~"all";
これにより、古いバージョンの IE が理解できるメディア ルールが作成されます。
@media all ...
これまでのところ、すべてが良好です。「デスクトップ」スタイルを含む別の IE スタイルシートができました。これの問題点は、古いバージョンの IE が両方のスタイルシート (基本的には同じ) を要求するのを防ぐために、これら 2 つの別個のスタイルシートをどのように含めるかということです。
現在、私は次のようにしています:
<link rel="stylesheet" href="site.css" />
<!--[if (lt IE 9) & (!IEMobile)]>
<link rel="stylesheet" href="ie.css" />
<![endif]-->
IE < 9 が site.css をダウンロードするのを防ぎながら、他のブラウザから見えるようにすることは可能でしょうか? 私の最初の考えは、NOT 演算子を使用して site.css ファイルを別の条件付きコメントでラップすることでしたが、IE10 では条件付きコメントのサポートが廃止されたため、それは問題外だと思います。
何か案は?