1. ホーム
  2. css

インポート vs リンク

2023-10-09 17:45:43

質問

まず、タイトルにあるように、これは重複した質問であることがわかります。 ここで , ここ そして ここ . このトピックで私が読んだものはすべて2年以上前のものです。その間に多くのことが変わりましたので、同じ考え方がまだ推奨されるのでしょうか?

私はスタイルシート内で @import を使用して、リセット CSS と他の 2 つのスタイルを取り込んでいます。これを @import から <link> ? これによると 記事 リンクを使用する必要があります。だから私は他の開発者に尋ねる、日付(2011年8月25日)のように本当に最良の方法は何ですか?

どのように解決するのですか?

この1、2年で何かが変わったかというとあまり変わっておらず、当時と同じブラウザを多く扱っているので、やり方を変えない方がいいでしょう。

<link> はすべての場合において @import なぜなら、後者は並列ダウンロードをブロックするからです。つまり、ブラウザはインポートされたファイルのダウンロードが終了するのを待ってから、残りのコンテンツのダウンロードを開始するからです。

ここでは、これを非常に詳細に見ることができます。

http://www.stevesouders.com/blog/2009/04/09/dont-use-import/

では、一方 @import は便利かもしれませんが、それが提供するすべてです。本当に高速な読み込み時間を利用したいのであれば、最小限のスタイルシートを使用し(おそらくほとんどの場合 1 つ)、効率的なセレクタ(通常のもの)で優れた CSS を記述し、minify を行い、さらに <link> タグを使用します。


コメントにするつもりでしたが、長くなりすぎました。

の代わりに @import (私はそれを知っている は非常に便利です)、サイトが公開されたらファイルをひとつにまとめるべきです。その時点ではとにかく手を加えるべきでないし、minifyを支援するツールも数多くある。個人的には、PHP を使って、すべての CSS ファイルを定義した設定ファイルを別の CSS ファイルに書き込んでいます (参照する CSS ファイルは <link> タグで参照するもの) に書き込むすべての CSS ファイルを定義し、キャッシュされたバージョンが古い場合 (手動または自動で決定)、それらを結合/最小化してコンテンツを "cache" ファイルに書き込み、CSS ファイル名に追加するタイムスタンプ クエリー ストリングを返して、新しいダウンロードを強制的に実行します。

もしあなたがPHPも使っているなら、私は強く cssmin のスタイルシートを解析することができます。 @import のスタイルシートを解析し、コンテンツを一つのファイルにまとめるだけでなく、minificationのすべての側面を処理することができます。