Taobao のウェブページはインポートを使用していますが、多くのウェブサイトはリンクを使用しています。もちろん、よりシンプルなページと大量のトラフィックを持つウェブサイトの中には、HTML コードに直接 CSS を記述しているものもあります。それらの違いは何ですか? CSS には import と link のどちらを使用する方が良いでしょうか?私はクラシックフォーラムと別のウェブサイトから大まかなアイデアを得ました。 Taobao のページのほとんどは次のように書かれています: コードをコピー コードは次のとおりです。<スタイル タイプ="text/css" メディア="screen"> @import url("http://www.taobao.com/home/css/global/v2.0.css?t=20070518.css"); </スタイル> 多くのウェブサイトはリンクを使用しています: コードをコピー コードは次のとおりです。<link rel="スタイルシート" rev="スタイルシート" href="default.css" type="text/css" media="all" /> Google、Baidu、163などのウェブサイトはすべてウェブページに直接書かれています。もちろん、リンクやインポートを使用する利点はメンテナンスが簡単であることです。しかし、ネットワーク速度が遅いと、読み込みが中断され、ページレイアウトエラーが発生します。 これらは同じ機能を持っていますが、唯一の違いは異なる目的を果たすことです CSS の @import リンクは現在のページを提供します。Blue Classic の一部のネットユーザーは、@import が最初に実行されると述べています。 +++++++++++++++++++++++++++++++++++++++++++++++++ 外部参照 CSS における link と @import の違い<br />この 2 日間で、XHTML で CSS を読み込む方法をいくつか書き終えましたが、その中で外部参照 CSS は link と @import の 2 つの方法に分かれています。 基本的に、どちらの方法も CSS ファイルを読み込むためのものですが、微妙な違いがあります。 違い1: 祖先の違い link は XHTML タグですが、@import は完全に CSS によって提供されるメソッドです。 CSS の読み込みに加えて、link タグは RSS の定義、rel 接続属性の定義など、他の多くのことも実行できますが、@import は CSS のみを読み込むことができます。 違い2: 読み込み順序の違い<br />ページが読み込まれるとき(つまり、閲覧者がページを閲覧するとき)、リンクで参照される CSS は同時に読み込まれますが、@import で参照される CSS はページ全体がダウンロードされるまで読み込まれません。そのため、@import を使用して CSS を読み込むページを閲覧すると、最初はスタイルが表示されない (ちらつく) ことがあります。これは、ネットワーク速度が遅い場合に非常に顕著になります。 違い3: 互換性の違い<br />@importはCSS2.1で提案されたため、古いブラウザではサポートされていません。@importはIE5以上でのみ認識されますが、linkタグではこの問題はありません。 違い4: DOMを使用してスタイルを制御する場合の違い<br />JavaScriptを使用してDOMを制御してスタイルを変更する場合、@importはDOMで制御できないため、linkタグのみを使用できます。 違い 5: @import を使用すると、他のスタイルシートを CSS にインポートできます。<br />たとえば、メイン スタイルシートを作成し、他のスタイルシートをメイン スタイルシートにインポートできます。 基本的にはこれらが違いです(他にも違いがあれば教えてください。追加します)。残りは同じです。上記の分析から、リンクタグを使用する方が良いでしょう。 |
<<: Dockerはコンテナを通じてイメージを生成し、詳細にDockerCommitを送信します
>>: HTML ul 順序なしテーブルのアプリケーションネスト
目次Vue での this.$set の使用使用なぜレスポンシブなのか?分析する要約するVue での...
単一のDOMノードでカルーセルを実装するbackgroundImage を使用すると、複数の画像を追...
この記事では、参考までに、Vue の具体的なコードで簡単な計算機を実装する方法を紹介します。具体的な...
目次結合アルゴリズム駆動テーブルと非駆動テーブルの違い1. 単純なネストループ結合、単純なネスト、イ...
目次SaltstackがZabbixサービスを導入httpd、mysql、phpをインストールするh...
序文RabbitMQ を使用する場合、一定期間クライアントと RabbitMQ サーバーの間でトラフ...
ウェブサイトを開発する場合、データを保存するためにデータベースを使用する必要があることがよくあります...
Swiper は、携帯電話やタブレットなどのモバイル端末向けに設計された、純粋な JavaScri...
この記事では、:placeholder-shown 疑似クラスを使用して、純粋な CSS で浮動疑問...
最近、個人のウェブサイトを書き直しました。Alibaba Cloudで新しいサーバーを購入しました。...
目次序文SSHとは何かssh は何に使用されますか? sshの使い方ssh 再修正要約する序文ssh...
説明: 指定された時間内に前のノードのコンテンツを置き換えるタイマーを設定します。 1. キーコード...
一昨日、本番環境でGROUP_CONCAT関数を使用して選択したデータが切り捨てられ、最大長が102...
前回の記事では、Vue で画像の切り抜きや拡大・縮小、回転を実現する方法を紹介しました。今回は、アイ...
以前、開発で頻繁に pip ダウンロードを使用する必要がありました。pip ソースを国産ソースに変更...