linkと@importインポートcssの違い
1054 ワード
グループの中でlinkと@importの違いを提案する人がいて、よく考えてみると、私は本当に知らないので、googleはちょっとして、ここに記録しました.
まず両者の書き方を示します
ほとんどのWebサイトで採用されているlink方式:
@import方式
どちらもcssファイルをロードするためですが、次のような小さな違いがあります.
1.本質的な違い:
linkは現在のページサービスであり、XHTMLタグに属し、CSSをロードできるほか、RSSの定義、rel接続プロパティの定義など、多くのことをすることができます.
@importはcssサービスであり、cssに属する方法であり、cssを導入するためにしか使用できない.
2.ロード順序:
1つのページがロードされると、link参照のCSSが同時にロードされ、@import参照のCSSはページがすべてダウンロードされるまでロードされます.したがって@importがCSSをロードしたページをブラウズしている間にスタイルがなくなり、ページが点滅することがあります.
3.互換性:
linkすべてのブラウザで互換性があります
@importはcss 2です.1で提案されたもので、古いブラウザはサポートされておらず、IE 5以上でしか認識できません.
4.domを使用してスタイルを制御する場合の違い.javascript制御domを使用してスタイルを変更する場合は、@importはdomが制御できるものではないため、linkラベルしか使用できません.
まず両者の書き方を示します
ほとんどのWebサイトで採用されているlink方式:
<link rel="stylesheet" href="style.css" type="text/css" media="all" />
@import方式
<style type="text/css" media="screen">
@import url("style.css");
</style>
どちらもcssファイルをロードするためですが、次のような小さな違いがあります.
1.本質的な違い:
linkは現在のページサービスであり、XHTMLタグに属し、CSSをロードできるほか、RSSの定義、rel接続プロパティの定義など、多くのことをすることができます.
@importはcssサービスであり、cssに属する方法であり、cssを導入するためにしか使用できない.
2.ロード順序:
1つのページがロードされると、link参照のCSSが同時にロードされ、@import参照のCSSはページがすべてダウンロードされるまでロードされます.したがって@importがCSSをロードしたページをブラウズしている間にスタイルがなくなり、ページが点滅することがあります.
3.互換性:
linkすべてのブラウザで互換性があります
@importはcss 2です.1で提案されたもので、古いブラウザはサポートされておらず、IE 5以上でしか認識できません.
4.domを使用してスタイルを制御する場合の違い.javascript制御domを使用してスタイルを変更する場合は、@importはdomが制御できるものではないため、linkラベルしか使用できません.