linkと@importインポートcssの違い


グループの中でlinkと@importの違いを提案する人がいて、よく考えてみると、私は本当に知らないので、googleはちょっとして、ここに記録しました.
 
まず両者の書き方を示します
 
ほとんどの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ラベルしか使用できません.