ホームページ  >  記事  >  ウェブフロントエンド  >  CSSのインポートとリンクの違いを比較する

CSSのインポートとリンクの違いを比較する

巴扎黑
巴扎黑オリジナル
2017-08-14 14:46:141313ブラウズ

タオバオのウェブページではインポートを使用していることがわかりましたが、多くのウェブサイトではリンクが使用されています。もちろん、HTML コードに CSS を直接記述する、比較的シンプルなページやトラフィックの多いウェブサイトもあります。それらの違いは何ですか? CSS には import と link のどちらを使用する方が良いですか? クラシックフォーラムと別の Web サイトから大まかなアイデアを得ました

いくつかの Web サイトのほとんどのページがこのように書かれているのを見ました



そして多くのウェブサイトは All are link

を使用しています。 Google Baidu 163 など Web ページに直接記述されます

もちろん、リンクとインポートを使用する利点はメンテナンスが簡単であることですが、ネットワーク速度が遅い場合、読み込みの中断が発生し、ページが表示されなくなります。レイアウトエラー

それらは同じ効果を持っています

唯一の違いは、サービスオブジェクトが異なることです

@importはCSSを提供します

リンクは現在のページを提供します

古典的に、一部のネチズンは@importが最初に実行されると言いました。

外部参照CSSにおけるlinkと@importの違い

この2日間でXHTMLにCSSを読み込む方法をいくつか書き終えたところですが、その中で外部参照CSSはlinkと@importの2つの方法に分かれます。

基本的に、これら 2 つの方法は CSS ファイルを読み込むために使用されますが、それでも微妙な違いがあります。

違い1:私たちの祖先との違い。 LinkはXHTMLタグに属しており、@importは完全にCSSが提供するメソッドです。
CSS のロードに加えて、link タグは RSS の定義、rel 接続属性の定義など、他の多くのことも行うことができます。 @import は CSS をロードすることしかできません。

違い2:ロード順の違い。ページが読み込まれるとき (つまり、ビューアで表示されるとき)、link によって参照される CSS は同時に読み込まれますが、@import によって参照される CSS は、ページが完全にダウンロードされるまで待ってから読み込まれます。そのため、@import が CSS をロードするページを閲覧すると、スタイルが表示されないことがあります (ちらつくだけです)。これは、ネットワーク速度が遅い場合には明らかです (Dream City で CSS をロードする方法は、@import を使用することです。私はダウンロードします)同時に Dream City Web ページを閲覧すると、上記の問題が発生します)。

違い3:互換性の違い。 @import は CSS2.1 で導入されたため、古いブラウザではサポートされていません。@import は IE5 以降でのみ認識されますが、リンク タグにはこの問題はありません。

違い4: DOMを使用してスタイルを制御する場合の違い。 JavaScript を使用して dom を制御してスタイルを変更する場合、@import は dom によって制御できないため、link タグのみを使用できます。

これらが違いです(他に違いがある場合は教えてください、追加します)上記の分析から、リンクタグを使用する方が良いです。

以上がCSSのインポートとリンクの違いを比較するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。