インポート vs リンク
質問
まず、タイトルにあるように、これは重複した質問であることがわかります。 ここで , ここ そして ここ . このトピックで私が読んだものはすべて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のすべての側面を処理することができます。
関連
-
[css3]CSS3タブアニメーションの背景切り替えの動的効果例
-
[解決済み] JavaでImportの名前を変更する、または同じ名前の2つのクラスをインポートする
-
[解決済み] MySQLでコマンドラインを使用してSQLファイルをインポートするにはどうすればよいですか?
-
[解決済み] ES6インポートで中括弧を使用するのはどのような場合ですか?
-
[解決済み] CSSだけでリンクを無効化する方法
-
[解決済み] リンクから青いアンダーラインを削除する
-
[解決済み] SCSSファイル内に通常のCSSファイルをインポートする?
-
[解決済み] Java の import 文でワイルドカードを使用することは、なぜ悪いのですか?
-
[解決済み] インポート vs #インポート - iOS 7
-
[解決済み】ターミナルからMySQLでデータベースをインポートするには?
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
[CSSチュートリアル]CSSで簡単!高周波な異形ボタンを実現する方法
-
[CSSチュートリアル】シングルセレクトの折りたたみメニュー機能を実現するCSS
-
[CSSチュートリアル】CSS+HTMLで実現するトップナビゲーションバー機能
-
[CSS3] CSS3リスト無限スクロール/回転効果
-
[CSSチュートリアル]css display table adaptive height, widthの問題解決
-
[CSSチュートリアル】クールなネオン効果を実現するピュアCSS(デモあり)
-
[CSSチュートリアル】CSSでemを開く正しい方法 詳細へ
-
[css3] CSS3を使ってヘッダーアニメーション効果を作成する
-
[css3]css3によるフレックスレイアウト幅の解決方法が有効でない件
-
[解決済み] CSSの@importとlinkの違いについて