1

私は、ネストされたメディア クエリと呼ばれる 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 では条件付きコメントのサポートが廃止されたため、それは問題外だと思います。

何か案は？

4

1 に答える 1

0

さて、これが私が最終的に得たものです：

<!--[if (lte IE 8) & (!IEMobile)]>
<link rel="stylesheet" href="ie.css" />
<![endif]-->
<!--[if (IE 9)|(!IE)]><!-->
<link rel="stylesheet" href="site.css" />
<!--<![endif]-->

ie.css は、古いバージョンの Internet Explorer (<= IE8) を対象としています。site.css は、IE9 (メディア クエリを理解する)、IE 以外のブラウザー、条件付きコメントをサポートしないブラウザー (IE10 など) を対象としています。「|(!IE)」の部分は実際には必要ありませんが、わかりやすくするために含まれています。IEMobile の 1 つまたは別のバージョンがスローされる可能性があります。テストが必要です。最初のコメントと比較して、2 番目の条件付きコメントのわずかな違いに注意してください。これは、内部のコンテンツを IE 以外のブラウザから見えるようにする部分です。

このタイプの cc の詳細については、http: //en.wikipedia.org/wiki/Conditional_comment#Downlevel-revealed_conditional_commentを参照してください。

于 2013-10-07T07:27:46.017 に答える