CSS 2.1は、誰もが知っているわけではない興味深い機能を導入しました。これは、オペレーティングシステムの現在のシステムテーマで使用されるWebページのフォントと色を設定する機能です。
これは、ページのインターフェイスをオペレーティングシステムのユーザーインターフェイスに近づけたい場合に役立ちます。 たとえば、Adobe AIRアプリケーションを作成するか、ネイティブchmヘルプのようなヘルプインターフェイスを作成します（ここではmanual.pohape.ruです ）。

実際、すべてが非常にシンプルで、魔法がありません。 わずかに非標準の値を持つ標準のcssプロパティを使用します。

システムフォント

システムフォントは、1つのパラメーター（フォントの種類）を持つ通常のフォントプロパティによって設定されます。 もちろん、描画の種類、サイズ、その他の属性はこのパラメーターに既に含まれています。

使用例：

.menu
{
font : menu;
}


利用可能なすべての値の完全な表：

価値	説明
キャプション	コントロールのフォント（ボタン、ラジオ、ドロップダウンリスト）
アイコン	アイコンのフォント
メニュー	システムメニューで使用されるフォント
メッセージボックス	ダイアログフォント
ステータスバー	ステータスバーのフォント

システムカラー

システムカラーは、 カラー値をサポートする任意のプロパティに割り当てることができます。

使用例：

.dialog
{
color: WindowText;
background-color: Window;
}

利用可能なすべての値の完全な表：

価値	説明
アクティブボーダー	アクティブウィンドウフレームの色
アクティブキャプション	アクティブなウィンドウのタイトルの色
Appworkspace	MDIアプリケーションの背景色
背景	デスクトップの背景
ButtonFace	3D要素の前面色（ボタンなど）
ボタンハイライト	「光に面している」位置の3D要素の影の色
ButtonShadow	3D要素の影の色
ButtonText	押されたボタンのテキスト
CaptionText	ラベルのテキストの色
グレーテキスト	非アクティブな（ロックされた）テキストの色
ハイライト	選択したメニュー項目の色
ハイライトテキスト	選択下の要素内のテキストの色
非アクティブなボーダー	非アクティブなウィンドウフレーム
非アクティブキャプション	非アクティブなウィンドウのタイトルの色
InactiveCaptionText	アクティブでないウィンドウタイトル内のテキスト
情報の背景	情報ツールチップの背景色（ツールチップ）
InfoText	ツールチップ内のテキスト
メニュー	メニュー項目の背景色
MenuText	メニューテキストの色
スクロールバー	スクロールバーの色
窓	ウィンドウの背景色
窓枠	xs;）（おそらくコメントでプロンプトが表示されるでしょう）
ウィンドウテキスト	ウィンドウ内のテキスト