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 でソースを見てください。
リファレンス
プロパティ
accent-color
appearance
-
caret
、以下の一括指定 cursor
nav-down
Experimentalnav-left
Experimentalnav-right
Experimentalnav-up
Experimental-
outline
、以下の一括指定 outline-offset
pointer-events
resize
user-select
ガイド
- フォームの学習: フォームへの高度なスタイル設定
-
appearance
を使用してフォームコントロールをスタイル設定する方法を説明します。
関連概念
- CSS の
cursor
プロパティ - SVG の
cursor
属性 - CSS の
:focus
,:focus-within
,:focus-visible
擬似クラス CaretPosition
インターフェイス
仕様書
Specification |
---|
CSS Basic User Interface Module Level 4 |