フロントエンド開発のための CSS 原則の詳細な説明

この記事では、フロントエンド開発におけるCSS原則の詳細な説明に関する関連情報を主に紹介しますので、必要な方は参考にしてください

フロントエンド開発におけるCSS原則の詳細な説明

Webに携わる方。フロントエンド開発では CSS を扱うことが多く、ブラウザがどのように CSS を解析するのかを知らない人もいるかもしれません。これが CSS レベルを向上させる上でのボトルネックになった場合、それについてもっと知る必要があるでしょうか?

1. ブラウザ開発と CSS

Web ブラウザは主に HTTP プロトコルを介して Web サーバーに接続し、Web ページを取得します。HTTP を使用すると、Web ブラウザは Web サーバーにデータを送信し、Web ページを取得できます。現在、最も一般的に使用されている HTTP は HTTP/1.1 であり、RFC2616 で完全に定義されています。 HTTP/1.1 には、Internet Explorer が完全にはサポートしていない独自の標準セットがありますが、他の多くの最新の Web ブラウザはこれらの標準を完全にサポートしています。 Web ページの場所は、Web ページのアドレスである URL (Uniform Resource Locator) によって示されます。http: で始まるものは、HTTP プロトコルを介してログインすることを意味します。多くのブラウザは、FTP (ファイル転送プロトコル) の ftp:、Gopher の gopher:、HTTPS (SSL で暗号化された HTTP) の https: など、他のタイプの URL およびプロトコルもサポートしています。

初期の Web ブラウザは、HTML の簡易バージョンのみをサポートしていました。独自のソフトウェア ブラウザの急速な発展により、非標準の HTML コードが作成されるようになりました。しかし、HTML が成長するにつれて、デザイナーの要件を満たすために多くの表示機能が追加されました。これらの機能が増加するにつれて、スタイルを定義するための外国語はますます意味がなくなりました。

CSSの元々の提案は1994年にHakun Leeによって提案されました。 BertBos は Argo というブラウザを設計しており、CSS について協力することにしました。

スタイルシート言語についてはすでにいくつかの提案がありましたが、「カスケード」という考えを最初に取り入れたのは CSS でした。 CSS では、1 つのファイル内のスタイルを他のスタイル シートから継承できます。読者は、ある場所では自分の好みのスタイルを使用し、他の場所では作者のスタイルを継承または「レイヤー」することができ、このレイヤー化方法により、作者と読者の両方が独自のデザインを柔軟に追加し、独自の好みを組み合わせることができます。
1997 年初頭、

W3C

は CSS を専門に担当するワーキンググループを組織し、そのリーダーは Chris Lilley でした。このワーキンググループは、初版ではカバーされていない問題について議論を開始し、その結果、1998 年 5 月に第 2 版の要件が発行されました。 2007 年の時点では、第 3 版はまだ完成していません。

2. ブラウザーによるページのレンダリングと読み込み方法

一部の Web サイトを開いたときに読み込みが非常に遅く、ページ全体が同時に表示されるのに対し、一部の Web サイトは上から下まで徐々に表示されるのはなぜですかの底？これを理解するには、次の一般的なプロセスから始めることができます:

1. ブラウザのダウンロードの順序は上から下であり、レンダリングの順序も上から下に行われます。ダウンロードとレンダリングは同時に実行されます。 。

2. ページの特定の部分をレンダリングすると、その上のすべての部分がダウンロードされます (これは、関連するすべての要素がダウンロードされたことを意味するわけではありません)。

3. 意味的に解釈可能なタグ埋め込みファイル (JS スクリプト、CSS スタイル) が見つかった場合、IE のダウンロード プロセスにより、ダウンロード用に別の接続が有効になります。
4. そして、ダウンロード後に解析を実行し、解析プロセス中に、ページの下向きのすべての要素のダウンロードを停止します。
5. スタイルシートがダウンロードされると、以前にダウンロードされたすべてのスタイルシートとともに解析され、解析が完了すると、以前のすべての要素（以前にレンダリングされた要素を含む）が再レンダリングされます。
6. JSやCSSで再定義があった場合、先に定義した関数が後から定義された関数で上書きされます。


ここでのポイントは2〜5の3点です。レンダリング効率は以下の3点に関係します:

1. CSSセレクターのクエリ位置決め効率

2. ブラウザのレンダリング

モード
とアルゴリズム 3. レンダリングされるコンテンツのサイズ

3. とはCSS そしてCSSの利点

CSSとは何ですか？

CSSとはCascading Style Sheetsの略称です。
CSS 言語は、コンパイルを必要とせず、ブラウザーによって直接解釈して実行できるマークアップ言語です (ブラウザー解釈言語です)。
標準的な Web デザインでは、CSS は Web コンテンツ (XHTML) のプレゼンテーションを担当します。
CSS ファイルは、いくつかの CSS タグを含むテキスト ファイルとも言えます。CSS ファイルでは、ファイル名のサフィックスとして css を使用する必要があります。
CSSファイルを変更するだけでWebページ全体の見栄えを変えることができ、作業負担を軽減できるため、すべてのWebデザイナーにとって必須の講座です。
CSS は、W3C の CSS Working Group によって作成および保守されています。
Web ページの再構築に CSS+p を使用すると、従来の TABLE Web ページ レイアウトと比較して、次の 3 つの大きな利点があります。

1. パフォーマンスとコンテンツを分離する。デザイン部分を分離して別のスタイルファイルに置き、HTMLファイルにはテキスト情報のみを格納します。このようなページは、検索 インデックス作成 エンジンにとってより使いやすいものです。


2. ページの閲覧速度を向上させます。同じページの視覚効果の場合、CSS+p を使用して再構成されたページの容量は、TABLE でエンコードされたページ ファイルの容量よりもはるかに小さくなります。通常、前者のサイズは後者のサイズのわずか 1/2 です。ブラウザーは多くの長いタグをコンパイルする必要はありません。


3. 保守と修正が簡単。いくつかの CSS ファイルを変更するだけで、Web サイト全体を再デザインできます。


4. ブラウザーの CSS マッチングの原則


ブラウザーの CSS マッチングは、左から右に検索するのではなく、右から左に検索します。たとえば、前に述べたように、p#pBox p span.red{color:red;} の場合、ブラウザの検索順序は次のとおりです。まず、html 内の class='red' を持つすべての span 要素を検索し、それらを見つけた後、親要素に p 要素があるかどうかを検索し、p の親要素に pBox という ID を持つ p 要素があるかどうかを判断します。両方が存在する場合、CSS は一致します。


ブラウザーで右から左に検索する利点は、無関係なスタイル ルールと要素をできるだけ早く除外できることです。 Firefox では、この検索メソッドをキーセレクター (キーワード クエリ) と呼びます。いわゆるキーワードは、スタイル ルールの最後 (右端) のルールです。上のキーは、span.red です。


5. CSS を最適化する


いわゆる効率的な CSS とは、スタイルに一致する要素を探すときにブラウザができるだけ検索を行わないことを意味します。CSS を記述するときによくある非効率的な間違いをいくつか紹介します。
1.

ID セレクター

の前にタグ名
を使用しないでください。 通常の書き方: p#pBox


。 より良い書き方: #pBox


説明: ID セレクターは一意であるため、p を加えます。代わりに、不要な CSS マッチングを追加します。


2.

class

セレクターの前にタグ名を使用しないでください
通常の書き方：span.red


より良い書き方：.red


説明：最初のものと同じですが、複数の .red を定義し、要素ごとにスタイルが異なる場合は、削除できません。たとえば、CSS ファイルで次のように定義されています。削除後は混乱しますが、このように書かないことをお勧めします


3. 階層関係はできるだけ使用しないでください


通常の書き方: #pBoxp.red{color:red;}


より良い書き方: .red{..}


4. 階層関係の代わりにクラスを使う


一般的な書き方: #pBox ul li a{display:block;}


より良い書き方: .block {display:block;}


5. CSSのレンダリング効率について idとclassの効率は基本的に同じです


クラスは最初の読み込みでは

キャッシュ

になり、カスケードでidを使用すると効果が高くなります。ルート要素の方が良い結果が得られます (ID には微妙な違いがあります)、速度上の利点があります)。読んでいただきありがとうございます。皆さんのお役に立てれば幸いです。このサイトへのサポートに感謝します。

以上がフロントエンド開発のための CSS 原則の詳細な説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。