8

最近、Coda.com で @import ルールの使用法を見つけました。実際には、サイトのメイン スタイル シート、具体的には次の形式をインポートするために使用しています。

<style type="text/css" media="screen">
  @import url(./coda.css);
</style>

どちらが Netscape 3 と IE 3 および 4 からルールを隠しますか? Web 開発ツールの主な対象者は最新のブラウザーを使用するため、リンクではなくこれを使用する他の理由はありますか?

4

5 に答える 5

8

Coda のサイトの場合、差し迫った技術的な必要性というよりも、習慣の力でそれを行ったのではないかと思います。

@import実際の CSS ファイル内 ( <style>HTML の要素内ではない) のステートメントは、他の CSS ファイルを簡単にスワップインおよびスワップアウトできるようにするなど、多くの目的に役立ちます。ブループリント CSS フレームワークはこれを行い、タイポグラフィやグリッドなどのフレームワークの特定の部分を簡単に削除できるようにします。

もちろん、本番環境では、一連の@importステートメントを使用すると、Web ブラウザーがプルダウンする必要があるファイルの数が増えるため、眉をひそめられます。

于 2009-02-12T23:47:37.550 に答える
3

現在このルールを使用する唯一の理由は、CSS をライブラリーなどの異なるファイルに分割することで、CSS をよりモジュール化するためです。

したがって、ページが 1 つのスタイルシートにリンクしている場合でも、そのスタイルシートはリセットやタイポグラフィなどのために他のスタイルシートを @import できます。

ただし、これは単に http リクエストがシーケンシャルであるため、ページの読み込みが遅くなります。

于 2009-02-12T23:47:59.077 に答える
0

私はアンドリューに同意します。また、インポートを使用して css を論理的に分割します。個人的には、リセット、構造、タイポグラフィ、一般 (bgs/borders など) の 4 つに分けるのが好きです。

人、スタイル、好みに応じて、css ファイルをページ セクションごとに分割することもできます (header.css、footer.css など)。

ただし、複数の http 要求を回避するために私が行っているもう 1 つのことは、ライブ展開用に css ファイルを (インポート順に) マージして圧縮するビルド プロセスを用意することです。

お役に立てれば

于 2009-02-13T03:41:52.883 に答える
0

私自身、モジュラー開発アプローチを使用しており、最終的に 10 以上の個別の CSS ファイルになることがよくあります。ご存じのように、これは非常に膨大な数の HTTP リクエストであるため、私はBlenderを使用するのが好きです。

Blender は、任意の数の CSS ファイルを単一のスタイルシートに統合および縮小する ruby​​gem です。JavaScript でも動作します。

個々のスタイルシートで @media を定義して、適切なルールを正しいデバイス タイプにのみ提供することができます。

于 2009-02-13T03:47:53.447 に答える