大きな CSS ファイルがあり、メディア クエリを使用する特別な場合に備えて、他の CSS ファイルを含めたいと考えています。
@import
次のように CSSで使用しても安全ですか。
@media only screen and (max-width: 480px) {
@import url('/css/styles-480.css');
}
大きな CSS ファイルがあり、メディア クエリを使用する特別な場合に備えて、他の CSS ファイルを含めたいと考えています。
@import
次のように CSSで使用しても安全ですか。
@media only screen and (max-width: 480px) {
@import url('/css/styles-480.css');
}
@import
ルール内に を持つことは有効ではない@media
ため、あなたが持っているものは機能しません。
これを行う正しい方法はさらに簡単です。@import
それ自体が URL の後にメディア クエリを受け入れます。
@import url('/css/styles-480.css') only screen and (max-width: 480px);
この構文は、メディア タイプで使用するために CSS2.1 で導入されましたが、メディア タイプからの直接の拡張であるため、メディア クエリも機能します。
@import
ルールはスタイルシートの先頭にしか存在できないことに注意してください。
読み込みのパフォーマンスが気になる場合は、 Asad で示されているように、<link>
の代わりにページ ヘッドで別の要素を使用して、このスタイルシートを参照することをお勧めします。ただし、どちらの方法でも問題なく動作します。@import
CSS ファイル内でインポートする代わりに、必要に応じて CSS ファイルを並行してダウンロードすることをお勧めします。
<link media="only screen and (max-width: 480px)"
href="/css/styles-480.css" type="text/css" rel="stylesheet" />
を使用する際の問題@import
は、2 番目のファイルは、含まれている CSS ファイル@import
が完全にダウンロードされて解析された後にのみダウンロードされることです。すべてのルールを上書きするか一部のルールを上書きするかに関係なく、ファイルを順番にロードしないため、この方法の方が高速です。