CSSでオペレーティングシステムスタイルの使用方法

CSS2.1のあまり知られていない機能の1つは、基礎となるオペレーティングシステムのテーマで使用されているフォントと色を定義する機能です。これは、OSの統合がタイトである場合、状況で役立ちます。 HTMLは、ファイル、Adobe Air、またはおそらくオフラインのWebアプリケーションをヘルプします。 開始する前に、いくつかの注意事項があります。

• すべてのOS/ブラウザの組み合わせで動作するこれらのプロパティに依存しないでください。あなたのアプリケーションがBEOでオペラで動作する必要がある場合は、最初にテストすることをお勧めします！
• プロパティは、外観の値タイプを優先してCSS3で廃止されました（ただし、ブラウザのサポートは非​​常に限られています）。
OSの異常な、衝突、または醜い配色を定義するユーザーを妨げるものは何もありません。ページは、デザイナーのものではなく、選択肢を反映しています
.sys {font-size：1em; } .sys th {font-weight：bold;色：#fff;バックグラウンドカラー：＃888; } .sys、.sys td、.sys th {text-align：left;パディング：1px 3px;国境：1pxソリッド＃666;国境崩壊：崩壊; } .sys .prop {font-weight：bold; }

システムフォント

システムフォントは、「フォント」プロパティを使用して割り当てられます。家族、サイズ、スタイルはすべて適切に割り当てられていることに注意してください。

body
{
	font: caption;
}

次のフォント値が利用可能です。 「例」列は、OSによって設定された現在のフォントを示しています。 プロパティ 説明 の例 CaptionControlsフォント（ボタン、ドロップダウンなど）ABC ABC 123 象徴的なラベルFontABC ABC 123 Menumenu Fontabc ABC 123 Message-BoxDialogボックスFontABC ABC 123 Small-Captionsmall Control LabelsABC ABC 123 Status-Barstatus Bar fontabc ABC 123

システムの色

システムの色は、色の値を期待する任意のプロパティに割り当てることができます。

body
{
	color: WindowText;
	background-color: Window;
	border: 2px solid ActiveBorder;
}

次の色の値が利用可能です。それらは読みやすくするためにカメルケースで表示されますが、すべてのケーシングは有効です。 「例」列は、OSによって設定された色を示しています。 プロパティ 説明 の例 Activeborderactiveウィンドウの境界  ActiveCaptionActiveウィンドウキャプション  複数のドキュメントインターフェイスのAppWorkspacebackground色  BackgroundDesktopの背景  3Dディスプレイ要素のボタンフェイスカラー  3Dディスプレイ要素のボタンハイライトダークシャド  3Dディスプレイ要素のボタンシャドウシャドウカラー  プッシュボタンのButtontextText  CaptionTextText、キャプション、サイズボックス、およびスクロールバー矢印ボックスの[サイズ]ボックス  GrayTextGrayed（無効）テキスト（OSでサポートされていない場合は＃000）  コントロールで選択されたハイライトイメージ  コントロールで選択されたアイテムのHighlightTextText  非アクティブボーデンアクティブウィンドウの境界  inactivecaptionInactiveウィンドウキャプション  非アクティブなキャプションでのテキストのinactivecaptiontextcolor  ツールチップコントロール用のinfobackgroundbackground色  ツールチップコントロール用のinftextText色  Menumenuの背景  メニュー内のMenutextText  Scrollbarscroll Bar灰色のエリア  3Dディスプレイ要素のThreeddarkshadowdarkシャドウ  3Dディスプレイ要素の3Dディスプレイ要素のThreedfaceface色  3Dディスプレイ要素のThreedhighlightyhighlight色  3Dディスプレイ要素のThreedlightshadowlight色（光に向いて）  3Dディスプレイ要素のThreedshadowdarkシャドウ  WindowWindowの背景  WindowFrameWindowフレーム  WindowsのWindowTextText  これらのプロパティは次のプロジェクトで役立ちますか？

CSSシステムスタイルに関するよくある質問

CSSシステムスタイルとは何ですか？なぜそれが重要なのか？

CSSシステムスタイルは、オペレーティングシステムまたはブラウザのネイティブの定義済みスタイルのセットです。開発者がユーザーのシステム設定に適応できるWebページを作成し、よりパーソナライズされたアクセス可能なユーザーエクスペリエンスを提供できるため、重要です。たとえば、ユーザーがシステムをダークモードに設定している場合、CSSシステムスタイルでスタイルのWebページは、この設定に合わせて自動的に調整できます。

CSSシステムスタイルは、通常のCSSスタイルとどのように異なりますか？

通常のCSSスタイルは、開発者によって定義され、ユーザーのシステム設定に関係なく同じままです。一方、CSSシステムスタイルは動的であり、ユーザーのシステムの好みに基づいて変更できます。これにより、適応性のあるユーザーフレンドリーなWebデザインを作成するための強力なツールになります。

WebデザインでCSSシステムスタイルを使用するにはどうすればよいですか？主な違いは、固定値を指定する代わりに、システムカラーキーワードを使用することです。たとえば、ユーザーのシステムウィンドウの背景に一致するようにバックグラウンドカラーを設定するには、コードバックグラウンドカラー：ウィンドウ;。いくつかの例には、ボタンの顔の色のボタンフェイス、選択したテキストの色のハイライト、Windowsのテキストの色のウィンドウテキストが含まれます。ただし、複数のブラウザでWebデザインをテストして互換性を確保することをお勧めします。これにより、ブランドと一致するデザインを作成することができます。

CSSシステムスタイルはどのようにアクセシビリティを改善するのですか？これにより、視覚障害のあるユーザーがサイトをナビゲートできるようにすることができます。これは、システム設定を調整してニーズを満たすことができるためです。

CSSシステムスタイルをオーバーライドできますか？ただし、これにより、システムスタイルを使用することの適応性の利点が否定されることに留意してください。

CSSシステムスタイルを使用することに欠点はありますか？

CSSシステムスタイルを使用するための潜在的な欠点の1つは、異なるシステム全体で一貫性のない設計につながる可能性があることです。ただし、これは、システムスタイルと通常のCSSスタイルの組み合わせを使用することで軽減できます。

以上がCSSでオペレーティングシステムスタイルの使用方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。