CSS 基本ユーザーインターフェイス

CSS 基本ユーザーインターフェイス (CSS Basic User Interface) モジュールでは、輪郭線プロパティ、ポインティングデバイスやキーボードへの視覚的フィードバック、 UI ウィジェットの既定の外見の変更など、ユーザーインターフェイス関連の機能のレンダリングや機能を定義することができます。

基本ユーザーインターフェイスプロパティは、操作している要素に視覚的な手がかりを提供することで、使い勝手やアクセシビリティを向上させるために使用することができます。これには、マウスカーソルやキーボード方向のフォーカスナビゲーションのスタイル設定、編集可能な要素にフォーカスがあるときのキャレットカーソルのスタイル設定などがあります。このモジュールは、要素のボックスモデルの寸法とスタイル設定に影響を与えることなく、フォーカスされた（またはフォーカスされていない）要素に輪郭線を提供するために指定されました。この UI モジュールは、ユーザーインターフェイスコントロールのスタイル設定も可能にします。

基本ユーザーインターフェイスの操作

基本ユーザーインターフェイスプロパティが UI 機能の外観をどのように変化させるかを見るには、この例の要素を操作してください。なお、このサンプルの機能の中には、使い勝手を向上させるものもあれば、ユーザー体験を損なうものもあります。

CSS の outline と outline-offset プロパティは、どの要素が現在フォーカスを持っているかをユーザーにフィードバックするために使用されました。 accent-color は、すべてのフォームコントロールにテーマ色を提供します。テキスト編集時に現れるキャレットは、 caret-color プロパティのおかげで同じ色になっています。これらはすべて UI の改善と考えることができます。

いくつかの機能はユーザビリティを損ないます。 cursor プロパティは、ブラウザー既定値からカーソルを変更するために使用され、混乱を招きます。 resize プロパティは 2 つ目の <textarea> がリサイズ可能になるのを防ぎ、 pointer-events プロパティは 3 つ目の <textarea> がクリックイベントを受け取るのを防ぎます。キーボードを使用してフォーカスを移動することは可能です。

この基本ユーザーインターフェイスサンプルのコードを見るには、 GitHub でソースを見てください。

リファレンス

プロパティ

ガイド

フォームの学習: フォームへの高度なスタイル設定

appearance を使用してフォームコントロールをスタイル設定する方法を説明します。

関連概念

仕様書

Specification
CSS Basic User Interface Module Level 4

関連情報