2009-06-20 40 views
90

私は自分のプロジェクトテンプレートを微調整するいくつかのCSSを学んでいます。私はこの問題に遭遇し、ウェブ上で明確な答えを見つけられませんでした。 CSSで@importやlinkを使うのに違いはありますか?それを行うための最善の方法は何リンクCSSの@importとリンクの違い

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

の@import

<style type="text/css">@import url(Path To stylesheet.css)</style> 

利用

を使用しますか?なぜ? ありがとう!

答えて

114

唯一の違いは、@importはCSSメカニズムで、スタイルシートと<link>のHTMLメカニズムが含まれていることです。しかし、ブラウザはそれらを別々に扱い、<link>にパフォーマンスの点で明らかな利点を与えます。

スティーブ・サウダーは、<link>@import(およびそのすべての組み合わせ)の影響を比較する広範なブログ記事を投稿しました。「don’t use @import」と書かれています。そのタイトルはそれ自身のことを言っています。

Yahoo!あなたが"preferred" and alternate stylesheetsを定義することができます<link>タグを使用して、またChoose <link> over @import

:また(スティーブ・ソーダーズ共著)彼らのパフォーマンスのベストプラクティスの一つとして、それを言及しています。 @importでそれを行うことはできません。

+0

ありがとう - 良いハイパーリンク - 特に最初のもの。 –

1

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

5

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

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

しかし、私があなたの場合は、<link>の亜種をHTMLページで使用します。メディアタイプ(印刷、画面など)を指定できるためです。

+5

@importステートメントにもメディアを指定することができます。 –

+0

本当ですか?私は、あなたのスタイルタグにメディアタイプを入れることができると思うが、それはちょっとしたハックのようだ。 – zenazn

+5

"@import url(style.css)screen、print"、IE7以前はメディアタイプをサポートしていません。 – mercator

6

リンクコマンドでは使用できないCSSファイル内の別のCSSをインポートするには、importコマンドを使用します。本当に古いブラウザ(IE4、IE5は部分的に)はインポート機能を処理できません。さらに、xhtml/htmlを解析しているライブラリの中には、スタイルシートの読み込みに失敗するものもあります。あなたのインポートは他のすべてのCSS宣言の前に来るべきであることに注意してください。

0

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

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

2

この記事では、ここでは有用であり得る:4 methods of adding CSS to HTML: link, embed, inline and import

+1

引用:「1000ページのWebサイトがあり、サイトのすべてのページからCSSファイルにリンクしているとしましょう。次に、すべてのページに2つ目のCSSファイルを追加したいと考えてみましょう。 2番目のCSSリンクを追加するか、最初のファイルから2番目のCSSファイルをインポートする方がはるかに良い方法です。 – Casebash

4

<リンク>ディレクティブがロードされ、asyncronously解釈する複数のCSSを可能にすることができます。

@importディレクティブは、読み込まれたスクリプトが親スクリプトにインラインでロードされるまで強制的にブラウザに強制的に送り、技術的には1つのスクリプトなので、エンジンによって正しく処理されます。

多くのCSS最小化スクリプト(および低速または低速のような言語)は、リンクされたスクリプトをメインスクリプトに自動的に連結します。これにより、転送オーバーヘッドが少なくなるためです。

*(ブラウザによって異なります)

関連する問題