CSSの@importとリンクの違い

プロジェクトテンプレートを調整するためのCSSを学習しています。私はこの問題に遭遇し、ウェブ上で明確な答えを見つけることができませんでした。CSSでの@importまたはリンクの使用に違いはありますか？

@importの使用

<style>@import url(Path To stylesheet.css)</style>

リンクの使用

<link rel="stylesheet" href="Path To stylesheet.css">

それを行うための最良の方法は何ですか？なぜ？ありがとう！

理論的には、両者の唯一の違い@importは、スタイルシートと<link>HTMLメカニズムを含めるCSS メカニズムです。ただし、ブラウザはそれらを異なる方法で処理するため、<link>パフォーマンスの面で明らかな利点があります。

Steve Soudersは、「@ importを使用しない」と呼ばれる両方<link>と@import（およびそれらのあらゆる種類の組み合わせ）の影響を比較する広範なブログ投稿を作成しました。そのタイトルはそれ自体がほとんどを物語っています。

Yahoo! パフォーマンスのベストプラクティスの1つとしても言及しています（Steve Souders共著）：@ importを選択<link>してください

また、<link>タグを使用すると、「優先」スタイルシートと代替スタイルシートを定義できます。でそれを行うことはできません@import。

importコマンドを使用して、cssファイル内に別のCSSをインポートできますが、linkコマンドではできません。本当に古いブラウザは（IE4、IE5が部分的に）インポート機能を処理できません。さらに、xhtml / htmlを解析する一部のライブラリは、スタイルシートのインポートの取得に失敗する可能性があります。インポートは他のすべてのCSS宣言の前に行う必要があることに注意してください。

本当の違い@importはありませんが、古いブラウザー（Netscape 4など）では正しく処理されないため、@importハックを使用してこれらの古いブラウザーからCSS 2ルールを隠すことができます。

繰り返しになりますが、本当に古いブラウザをサポートしていない限り、違いはありません。

ただし、私があなただった場合は、<link>メディアタイプ（印刷、画面など）などを指定できるため、HTMLページでバリアントを使用します。

<link>ディレクティブを使用すると、複数のcssを読み込んで非同期に解釈できます。

@importディレクティブはブラウザー*に強制的にインポートされたスクリプトが親スクリプトにインラインでロードされるまで待機させ、それが技術的には1つのスクリプトであるため、エンジンで正しく処理されます。

多くのcss最小化スクリプト（およびlessまたはsassなどの言語）は、リンクされたスクリプトをメインスクリプトに自動的に連結します。これにより、転送のオーバーヘッドが少なくなるからです。

*（ブラウザによって異なります）

この記事はここで役立つかもしれません：CSSをHTMLに追加する4つの方法：リンク、埋め込み、インライン、インポート

@importルールを使用する場合、通常は既存のスタイルシート内にスタイルシートをインポートします（ただし、最初からそうすることは好きではありません）。しかし、あなたの質問に答えるには、違いはないと思います。有効なXHTMLに準拠するために、URLを二重引用符で囲んでください。

@importは通常、例のようにインラインではなく、外部スタイルシートで使用するためのものです。あなたがいる場合、実際には非常に古いブラウザからスタイルシートを非表示にしたかったあなたはそのスタイルシートを使用してからそれらを防ぐためにハックとしてそれを使用することができます。 

全体として、<link>タグは@importルールよりも速く処理されます（CSS処理エンジンに関する限り、これは明らかにやや遅い）。

Microsoft Internet Explorer 9（MSIE9）は@importを適切に処理しないようです。私のApacheログからこれらのエントリを確認します（IPアドレスは非表示ですがwhois、Microsoft自体が所有していると述べています）：screen.cssにリンクされているメインHTML

@import url("print.css") print;
@import url("speech.css") aural;

これをlinkHTMLの要素に変更しようとしています。これは、MSIE9がサーバーに2つの誤った要求を発行し、私がなしで実行できる404エラーが表示されるためです。

[ip] - - [21/Dec/2019:05:49:28 +0000] "GET /screen.css HTTP/1.1" 200 2592 "https://ssb22.user.srcf.net/zhimo/"; "Mozilla/5.0 (compatible; MSIE 9.0; Windows NT 6.1; Trident/5.0;  Trident/5.0)" ssb22.user.srcf.net
[ip] - - [21/Dec/2019:05:49:28 +0000] "GET /url(%22print.css%22)%20print HTTP/1.1" 404 7498 "https://ssb22.user.srcf.net/zhimo/"; "Mozilla/5.0 (compatible; MSIE 9.0; Windows NT 6.1; Trident/5.0;  Trident/5.0)" ssb22.user.srcf.net
[ip] - - [21/Dec/2019:05:49:28 +0000] "GET /url(%22speech.css%22)%20aural HTTP/1.1" 404 7498 "https://ssb22.user.srcf.net/zhimo/"; "Mozilla/5.0 (compatible; MSIE 9.0; Windows NT 6.1; Trident/5.0;  Trident/5.0)" ssb22.user.srcf.net

その後、これらのファイルに対する適切な要求がありましたが、この「サーバーで最初に撃ってから解析するurl」というロジックなしで済ますことができます。