私は大きなCSSファイルを持っています。メディアクエリーを使用して特別な場合には、他のCSSファイルを含めたいと思います。メディアクエリを使用して別のCSSファイルにCSSファイルを含めることはできますか？
は、それが安全に、このようにCSSで@importを使用することです：
@media only screen and (max-width: 480px) {
@import url('/css/styles-480.css');
}
、私はそれが必要な場合は、並列にCSSファイルをダウンロードすることをお勧めします：
<link media="only screen and (max-width: 480px)"
href="/css/styles-480.css" type="text/css" rel="stylesheet" />
問題を@importを使用して第二のファイルが後にのみダウンロードされていることです@importを含むCSSファイルが完全にダウンロードされ、解析されます。すべてのルールまたはルールの一部をオーバーライドしているかどうかにかかわらず、ファイルを順番にロードしないため、このアプローチは高速です。
これは依存します - '@ import'があるスタイルシートに、OPがとにかくロードする必要のある他のスタイルを含んでいる場合、そのスタイルシートからこの' @ import'を移動しても違いはありません。 – BoltClock
@BoltClock True、私は、OPが '@ import'ですべての現在のルールをオーバーライドしていると仮定していました –
@BoltClock実際にはそうではありません。私のアプローチは、 '@ import'がCSSファイルが完全にダウンロードされ、解析された後にのみ起動するため、より速く関連しています。つまり、ファイルは順番にロードされます。 –
それはあなたが持っているものは動作しません、@mediaルール内@importを持つことが有効ではありません。彼らはメディアタイプからの直接進展しているので、
@import url('/css/styles-480.css') only screen and (max-width: 480px);
この構文は、introduced in CSS2.1 for use with media typesですがmedia queries will also work：自体はURLの後にメディアクエリを受け付け@import -
これを行うための正しい方法はさらに簡単です。
@importルールはスタイルシートの先頭にしか存在しないことに注意してください。
ロードのパフォーマンスが心配な場合は、@import,as shown by Asadではなく、このスタイルシートを参照するためにページヘッドの別の<link>要素を使用することができます。しかしどちらの方法もうまくいくはずです。代わりに、CSSファイル内のインポートの
まことにありがとうございます。 – Wilson
一般的に@importを使用すると、ブラウザの表示が遅くなります。 [この関連する質問]（http://stackoverflow.com/questions/6912899/css-import-best-practices）を参照してください。 Web最適化の基本ルールは、要求の数、特に順次要求を最小限に抑えることです。 –