web-dev-qa-db-ja.com

CSSの@importとリンクの違い

プロジェクトテンプレートを微調整するCSSを学んでいます。私はこの問題に取り組みましたが、ウェブ上で明確な答えが見つかりませんでした。 CSSで@importまたはlinkを使用するのに違いはありますか？

@importの使用

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

リンクの使用

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

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

cssimporthyperlink
105
Omar Abid

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

Steve Soudersは<link>と@import（およびそれらのあらゆる種類の組み合わせ）の両方の影響を比較する広範なブログ記事を書きました。「 @ importを使用しないでください 」そのタイトルは、それ自体を物語っています。

Yahoo!また、パフォーマンスのベストプラクティスの1つとして言及しています（Steve Soudersの共著）： Choose <link> over @import

また、<link>タグを使用すると、 "preferred" and alternate stylesheets を定義できます。 @importではできません。

127
mercator

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

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

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

6
zenazn

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

6
merkuro

<link>ディレクティブを使用すると、複数のcssを非同期にロードして解釈できます。

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

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

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

5
Ape-inago

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

2
Matthew James Taylor

@importは一般に、例のようなインラインではなく、外部スタイルシートで使用することを意図しています。 really非常に古いブラウザからスタイルシートを非表示にしたい場合、それをハックとして使用して、スタイルシートを使用できないようにすることができます。

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

1
Gabriel Hurley

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

1
Barry Gallagher