web-dev-qa-db-ja.com

@import vsリンク

最初に、タイトルに、これが herehere 、および here のように、重複した質問であると書かれています。このトピックで読んだものはすべて2年以上前のものです。その期間に多くの変化がありましたので、同じ考えをお勧めしますか?

以下に例を示します。スタイルシート内で@importを使用して、リセットCSSと他のいくつかのスタイルを取り込みます。 @importから<link>に変更する必要がありますか?これによると 記事 リンクを使用する必要があります。だから私は他の開発者に、これまでのところ本当に最高の方法は何ですかと尋ねます(2011年8月25日)

58
L84

過去1年または2年で何かが変わったとしても、それほど多くはありません。また、私たちはそれから多くの同じブラウザを扱っているので、練習を変えるべきではありません。

<link>は、@importよりもすべての場合に優先されます。後者は、並行ダウンロードをブロックするためです。つまり、ブラウザーは、インポートされたファイルのダウンロード完了を待ってから、残りのコンテンツのダウンロードを開始します。

これはここで詳細に見ることができます:

http://www.stevesouders.com/blog/2009/04/09/dont-use-import/

したがって、@importは便利かもしれませんが、それだけです。高速な読み込み時間を本当に活用したい場合は、最小限のスタイルシート(おそらくほとんどの場合1つ)を使用し、効率的なセレクター(通常のもの)で適切なCSSを記述し、それを縮小して、<link>タグを使用します。


これはコメントになる予定でしたが、長すぎました:

@import(代わりにisが非常に便利です)の代わりに、サイトを公開するときにファイルを1つに結合する必要があります。とにかくその時点で微調整するべきではありません。それを縮小するのに役立つツールがいくつかあります。個人的に、PHPを使用して、個別のCSSファイル(<link>タグで参照するファイル)に書き込まれるすべてのCSSファイルを定義する構成ファイルがあり、キャッシュバージョンが古い場合(どちらか)手動または自動で決定)、それらを結合/縮小し、コンテンツを「キャッシュ」ファイルに書き込み、タイムスタンプクエリ文字列を返し、CSSファイル名に追加して新しいダウンロードを強制します。

PHP=も使用している場合、 cssmin を強くお勧めします。スタイルシートで@importを解析し、コンテンツを1つのファイルにプルできます。縮小のすべての側面を処理します。

68
Wesley Murch