Web ページで外部 CSS を参照するには、@import と link の 2 つの方法があることはわかっています。CSS を導入するにはリンクを使用する方が良いという意見をよく聞きますが、その理由はご存知ですか?
リンク
ソースコードの例
[www.downcodes.com]リンクは外部 CSS を Web ページに接続するもので、特定のフォームは <link href="http://www.downcodes.com/styles.css" type="text/css" /> です。
ソースコードの例
[www.downcodes.com] import と link の違いは、他の複数の CSS ファイルを 1 つの CSS ファイルに導入できることです。その具体的な形式は <style type="text/css">@import url("http://www.downcodes.com/styles) です。 .css");</style>
@import を使用する理由
古いブラウザは @import をサポートしていないため、ほとんどの人は @import を使用します。つまり、@import を使用して、最新のブラウザだけが解析できる CSS スタイルを導入できます。
IE6 以下のブラウザが CSS を解析できないようにするには、次のコードを使用します (IE6 以下のメソッドは廃止されているため、ここでは省略します)。
@import url(../style.css) 画面;
もう 1 つの主な理由は、Web ページで複数の外部 CSS ファイルを導入する必要がある場合です。リンクを使用して CSS を導入し、@import メソッドを使用してこの CSS ファイルに他のいくつかの CSS ファイルを導入する必要があります。
リンクを使用する理由
リンク メソッドを使用する主な理由の 1 つは、Firefox、Opera、Safari などの最新のブラウザがすべて rel="alternate stylesheet" 属性をサポートしている (つまり、異なるスタイルを選択できる) ことをユーザーに許可できることです。もちろん、JavaScript を使用して、IE がユーザーのスタイル変更をサポートできるようにすることもできます。
@import に関する小さな問題。Web ページの head タグが @import 属性のみを含む非常に単純な場合、ユーザーが遅いインターネット速度で閲覧すると、CSS ファイルが表示されます。この問題を回避するには、head に少なくとも 1 つのスクリプトまたはリンク タグが存在することを確認する必要があります。
どちらの方法を使用するべきでしょうか? 現時点では、小規模な Web サイトではリンクを使用する方が適切 (または一般的) だと思われます。 もちろん、将来 CSS をモジュール化する必要がある場合は、間違いなく @import を使用することになります。
この記事は What's the Difference Between @import and link for CSS? を学習目的で部分的に翻訳したものです。追加を歓迎します。
