Web ページで外部 CSS を参照するには、@import と link の 2 つの方法があることはわかっています。CSS を導入するにはリンクを使用する方が良いという意見をよく聞きますが、その理由はご存知ですか?
リンク
リンクは外部 CSS を Web ページに接続することです。具体的な形式は次のとおりです。
@輸入
インポートとリンクの違いは、他の複数の CSS ファイルを 1 つの CSS ファイルに導入できることです。具体的な形式は次のとおりです。
@import を使用する理由
古いブラウザは @import をサポートしていないため、ほとんどの人は @import を使用します。つまり、@import を使用して、最新のブラウザだけが解析できる CSS スタイルを導入できます。
IE6 以下のブラウザが CSS を解析できないようにするには、次のコードを使用します (IE6 以下のメソッドは廃止されているため、ここでは省略します)。
@import url(../style.css) screen; もう 1 つの主な理由は、Web ページに複数の外部 CSS ファイルを導入する必要がある場合です。リンクを使用して CSS を導入し、この CSS ファイルで @import メソッドを使用できます。他のいくつかの CSS ファイルも同様です。これは管理しやすいようです。
リンクを使用する理由
リンク メソッドを使用する主な理由の 1 つは、Firefox、Opera、Safari などの最新のブラウザがすべて rel="alternate stylesheet" 属性をサポートしている (つまり、異なるスタイルを選択できる) ことをユーザーに許可できることです。もちろん、JavaScript を使用して、IE がユーザーのスタイル変更をサポートできるようにすることもできます。
分からない場合は、このページに入り、Firefox の「表示 - ページスタイル」をクリックしてください。
@import に関する小さな問題
Web ページの head タグが @import 属性のみを含む非常に単純な場合、ユーザーが遅いインターネット速度で閲覧すると、スタイルのないページが表示され、CSS ファイルがダウンロードされるとそのページが表示されます。このような問題を回避するには、head に少なくとも 1 つのスクリプトまたはリンク タグが存在するようにする必要があります。
04-11 更新: @import により、CSS の全体的な読み込み時間が長くなり、IE でのファイルのダウンロード順序が変更されます。たとえば、@import の後に配置されたスクリプト ファイルが CSS の前にダウンロードされます。
詳細については、http://www.stevesouders.com/blog/2009/04/09/dont-use-import/を参照してください。
どの方法を使用する必要がありますか?
現時点では、小規模な Web サイトにはリンクの方が適している (または人気がある) ようです。 もちろん、将来 CSS をモジュール化する必要がある場合は、間違いなく @import を使用するでしょう。