CSS プロパティと標準

CSS は、単一のバージョン管理された言語ではなく、標準仕様のファミリーとして構成されています。仕様はレベルとモジュールに分かれて進化し、ブラウザーはそれらの文書のうち変化し続けるサブセットを実装します。

レベルとモジュール #

W3C は当初から、CSS をレベルベースのシステムとして標準化しました。CSS 1、CSS 2、およびそれ以降のレベルは、単なる小規模な改訂ではありません。各レベルでスコープと構造が大きく変更されたため、以前の文書の一部は古いものになりました。

現在の CSS は、次のようなモジュールを通じて記述されます。

• Colors;
• Backgrounds and Borders;
• Flexbox;
• Grid;
• Values and Units;
• Media Queries.

このモジュール化された設計により、仕様は独立して進化できます。そのため、ブラウザーは機能を段階的に提供できます。

プロパティ値 #

CSS プロパティの値は、複数の段階を経ます。

• specified value: スタイルシートに記述された値;
• computed value: 継承と相対単位の処理後に解決された値;
• used value: レイアウト制約が適用された後の値.

継承では computed value が使用されます。そのため、親がパーセンテージを絶対長に解決済みであれば、子要素は未解決のパーセンテージを継承しません。

例:

.box {
  width: 80%;
}

親の幅が 1000px の場合、computed width は 800px になります。

display #

display プロパティは、外側と内側の両方のレイアウト動作を制御します。

<display> = <display-outside> <display-inside> <display-listitem>

実際の意味は次のとおりです。

• outer display は、ボックスが通常フローに参加する方法を制御します;
• inner display は、子要素のレイアウト方法を制御します.

そのため、display は単なる装飾用プロパティではありません。フォーマッティングコンテキストを変更します。

長さの単位 #

絶対単位と相対単位は、それぞれ異なる問題を解決します。

一般的な絶対単位:

• px
• cm
• mm
• in
• pt
• pc

一般的な相対単位:

• em
• ex
• ch
• cap
• lh
• ic

相対単位は、フォントメトリクスや書字方向に応じて拡大・縮小されるため便利です。

標準仕様文書 #

主な参照文書は次のとおりです。

• CSS 仕様のインデックス;
• CSS snapshots。プラットフォームの現在の状態を要約します;
• 個々のモジュールのドラフト。機能ファミリーを定義します.

この構造が重要なのは、「CSS 標準」という語が通常、単一の一体化されたマニュアルではなく、継続的に更新される文書群を指すためです。

実践的なルール #

CSS を記述するときは、次の 3 つの層を分離してください。

1. プロパティ構文;
2. 計算後のレイアウト動作;
3. プロパティを定義する標準モジュール.

この分離により、ブラウザーの動作をデバッグしやすくなり、どの部分が安定版、実験的機能、または廃止済みなのかを追跡しやすくなります。