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 順序なしテーブルのアプリケーションネスト
質問: インデックスは作成されているのに、Like ファジー クエリがまだ遅いのはなぜですか?インデ...
目次ルーティングマネージャー背景はじめる問題を解決する方法要約するルーティングマネージャー各ジャンプ...
たとえば、イントラネットに Jenkins サーバーがある場合、そのサーバーにアクセスするには、その...
目次1. 参照と反応1. 反応的2.参照2. shallowRef と shallowReactiv...
コードをコピーコードは次のとおりです。 <!--[if !IE]><!-->...
CSS プロパティのブラウザ互換性をまとめる必要があるのはなぜですか?使用する際は、Can I U...
1. はじめに要件は、特定の時間範囲内で、1 時間ごとのデータと前の 1 時間ごとのデータの差と比率...
jQuery フォーム検証の例 / ユーザー名、パスワード、住所、電子メールの検証を含む下記の通り ...
目次序文1. Dockerをインストールする2. ElasticSearchをインストールする3. ...
MySql 8.0 対応ドライバパッケージのマッチングMySql データベースをバージョン 8.0 ...
この記事の例では、WeChatアプレットの検索ボックス機能を実装するための具体的なコードを参考までに...
フォームを作成するときに、送信ボタンとリセットボタンを配置することがよくあります。ページの外観を考慮...
1. フロントエンド主導の実装手順最初のステップは、ページのインポートボタンをクリックしてExcel...
エラーメッセージ:エラー 2002 (HY000): ソケット '/tmp/mysql.so...