外部スタイルシートまたはインラインスタイルの両方を含むCSSスタイルをWebページに適用するには、さまざまな方法があります。外部スタイルシートを使用している場合は、HTML文書のルック＆フィールを指定するための推奨方法ですが、その1つの方法は、
@インポート。
ザ
@インポート ルールを使用すると、ドキュメント内の重要な外部スタイルシート（HTMLページ、または他のCSSドキュメントのいずれか）に移動できます。多くのスタイルを多数の小さなファイル（レイアウト用、タイポグラフィ用、イメージ用など）に分割することで、それらのファイルとその中に含まれるさまざまなスタイルをより簡単に管理できます。その利点を享受するには、これらのさまざまなファイルをインポートすることが、Webページの表示用にすべて機能するようにする必要があります。
HTMLへのインポート
使用するには
@インポート ルールをHTMLに追加するには、
ドキュメントの
:
このコードは、このHTMLページで使用するためにこのスタイルシートをインポートし、その1つのファイル内のすべてのスタイルを管理することができます。このように重要なスタイルシートの欠点は、この方法ではパラレルダウンロードができないことです。ページは、このメソッドを使用して読み込んでいる他のCSSファイルを含め、ページの残りの部分に移動する前にスタイルシート全体をダウンロードする必要があります。これは、ページの速度とダウンロードのパフォーマンスに悪影響を及ぼします。ページのパフォーマンスがウェブサイトの成功にとってどれほど重要かを考えると、この欠点だけが@importの使用を避けたい理由です。
代替アプローチ
使用する代わりに
@インポート あなたのHTMLでは、次のようにそのCSSファイルにリンクすることができます：
これは、
@インポート 1つの中央ロケーション/ファイルからすべてのCSSを管理することができますが、この方法はダウンロードの観点からは好ましい方法です。異なる種類のスタイルを別々のファイルに分割したい場合は、引き続きそれを行い、マスターCSSファイル内で@import機能を使用することができます。つまり、外部CSSファイルは個別に管理できますが、すべてが1つのマスターCSSにインポートされるため、パフォーマンスが向上します。
CSSへのインポート
を使用する
上記のコード例はHTMLページで "default.css"ファイルを使用します。そのCSSファイルの中には、さまざまなページスタイルがあります。その1つのページにすべてのスタイルを記述することができます。また、@importを使用して簡単に管理することもできます。もう一度、レイアウト用、タイポグラフィ用、画像用の4つの別々のCSSファイルを使用しているとします。 4番目のファイルは、私たちのページがリンクしている "マスター"ファイルです（この例では、 "default.css"です）。そのマスターCSSファイルの最上部に、以下に示すルールを追加することができます：
@import url（ '/ styles / layout.css'）; @ import url（ '/ styles / type.css'）; @ import url（ '/ styles / images.css'）;
これらの規則 必須 あなたのCSSファイル内の他のすべてのコンテンツの前にいなければなりません。これらのインポートルールの前に他のCSSスタイルを使用することはできません。
これらのインポートルールの下で、デフォルトシートに含める他のCSSスタイルを追加することができます。そのメインのCSSファイルが読み込まれると、最初にこれらの別々のファイルを読み込んでスタイルをスタイルシートの最上部に追加します。これらのインポートされたものの下にあなたの他のすべてのスタイルがあり、ウェブブラウザがあなたのサイトを表示するのに使う完全なCSSファイルを作成します。そのHTMLにリンクされた単一のスタイルシートを持ちながら、小さくて集中したファイルを管理する利点があります。
@importをメディアクエリに使用する
1つのことは、レスポンシブウェブサイトスタイルのウェブサイトのメディアクエリを別々のファイルに分割することです。これらのレスポンシブなスタイルは、サイトの他のスタイルルールと一緒に見たときに混乱する可能性があるため、別のファイルで独自のスタイルを使用すると魅力的な場合があります。このアプローチの1つの懸念事項は、
@インポート ルールが最初になければなりません。これは、サイトのスタイルの残りの部分より前にメディアクエリが読み込まれることを意味します。パフォーマンスを考慮したモバイル対応のレスポンシブサイトを作成する場合、これが問題になる可能性があります。このため、サイトのレスポンシブスタイルを個別にセクション分割しないでください
@インポート あなたのサイトにそれらを持って来る。はい、利点があるように見えるかもしれませんが、欠点はこれらの利点を上回ります。
@importを使用する必要がありますか？
いいえ、あなたはしません。多くのサイトでは、1つのファイル内にすべての主要なスタイルを表示するだけで、そのファイルが大きくてもそれが管理されます（これは私が自分の作品でやる方法です）。もしあなたが見つけたら
@インポート それはあなたのワークフローの一部になることができます。それ以外の場合は、 すべてのCSSルールの単一のスタイルシート。
ブラウザのサポート
非常に古いブラウザでは、これらの@importルールのいくつかに問題がありますが、最近はこれらのブラウザが問題になることはまずありません。これは特に、Internet Explorerの古いバージョンの期限が切れたためです。最終的に、あなたが
@インポート あなたのHTMLやCSSのルールでは、IEの古いバージョンを驚くほどサポートする必要がある場合を除いて、Webブラウザのレガシーバージョンで問題に遭遇しないでください。
ジェレミージラール編集
