CSS基本ユーザーインターフェイスモジュール レベル4

1. はじめに

このモジュールは、著者がユーザーインターフェース関連のプロパティや値をスタイル設定できるようにする CSS プロパティについて説明する。

CSS1 第2.1節 [CSS1] および CSS2 第18章 [CSS21] では、 複数のユーザーインターフェース関連のプロパティと値が導入された。CSS3 のユーザーインターフェース（2000年2月16日）では、さらに新しいユーザーインターフェース関連の機能が導入された。

[CSS-UI-3] は、これらを統合、拡張、置き換えるために後に導入された。 本仕様書はこの作業を継続し、[CSS-UI-3] を置き換える。

1.1. 目的

本仕様書の目的は以下の目標を達成することである：

• [CSS21] および [CSS-UI-3] のユーザーインターフェース機能を拡張する
• HTML の他の動的プレゼンテーション関連機能を補強または置き換える追加の CSS メカニズムを提供する
• 方向性ナビゲーションモデルを用いるユーザーインターフェース構築を支援するための方向性ナビゲーションプロパティを導入する

2. モジュール間の相互作用

本ドキュメントでは、以前の仕様には存在しなかった新機能を定義する。 また、これに加えて [CSS-UI-3] を置き換え、これを上書きする。 なお [CSS-UI-3] 自体は以下を置き換え、上書きしている：

• 第18.1節、第18.4節、 および 付録E に定義されるアウトラインの重なりに関する情報（Cascading Style Sheets, level 2, revision 1）[CSS21]
• CSS3 のユーザーインターフェース（2000年2月16日） [CSS-UI-3]

注： box-sizing プロパティは以前、この仕様書の本節で定義されていたが、 CSS Sizing 3 § 3.3 Box Edges for Sizing: the box-sizing property に移動された。

注： text-overflow プロパティは以前、この仕様書の本節で定義されていたが、 CSS Overflow 3 § 5.1 Overflow Ellipsis: the text-overflow property に移動された。

2.1. 値の定義

本仕様書では、CSS プロパティ定義規則（[CSS21]）に従い、 値定義構文（[CSS-VALUES-3]）を用いて記述している。 本仕様書で定義されていない値タイプは、CSS Values & Units [CSS-VALUES-3] にて定義されている。 他の CSS モジュールと組み合わせることで、これらの値タイプの定義が拡張される場合がある。

プロパティ固有の値の定義に加えて、本仕様書で定義されるすべてのプロパティは、 CSS-wide キーワード をプロパティ値として受け入れる。 可読性のため、ここでは明示的に繰り返していない。

3. アウトラインプロパティ

スタイルシートの作成者は、ボタンやアクティブなフォームフィールド、イメージマップなどの 視覚オブジェクトの周囲にアウトラインを作成して目立たせたい場合がある。 アウトラインはボーダーとは以下の点で異なる：

1. アウトラインはスペースを占有しない。
2. アウトラインは要素の インクオーバーフロー領域 に寄与する。
3. アウトラインは非矩形でもよい。
4. ユーザーエージェントは、:focus-visible 状態の要素に対してアウトラインを描画することが多い。

アウトラインプロパティは、これらの動的アウトラインのスタイルを制御する。

アウトラインの描画の重なり順は、プラットフォームごとにより良いユーザー体験を提供できるよう、 実装に委ねられている。 これは CSS 2.1 付録E [CSS21] に定義された アウトラインの重なり順に代わる。

キーボードユーザー、特にページを他の方法で操作できない可能性のある障害者は、 :focus-visible 状態の要素で アウトラインが表示されることに依存している。 したがって、代替のハイライト機構を提供せずにアウトラインを非表示にしてはいけない。

アウトラインに変形を適用した場合の描画については明示的に未定義である。

3.1. アウトライン短縮表記：outline プロパティ

outline プロパティは短縮表記プロパティであり、 outline-style、outline-width、 および outline-color の3つをまとめて設定する。 auto のみが指定された場合、 または auto が <'outline-width'> とともに指定され、 明示的な <'outline-style'> や <'outline-color'> がない場合、 outline-style と outline-color は両方とも auto に設定される。

注： 短縮表記では意図的に outline-offset プロパティを省略している。 このプロパティはアウトラインの位置を決定するものであり、見た目ではないため、 独立して継承させることができ、かつ互換性維持の理由もある。

アウトラインプロパティで作成されるアウトラインはボックスの「上」に描画される。 すなわち、アウトラインは常に最前面にあり、 ボックスや他のボックスの位置やサイズには影響しない。 したがって、アウトラインの表示や非表示によってリフローは発生しない。

アウトラインは非矩形でもよい。 例えば、要素が複数行に分割される場合、 アウトラインは要素のすべてのボックスを囲むアウトラインまたは最小セットのアウトラインとなる。

アウトラインの各部分は完全に接続されているべきであり、 一部の辺が開いた状態であってはならない （インライン要素のボーダーは行が分割されると開く場合がある）。

アウトラインの部分は矩形である必要はない。 アウトラインが ボーダーエッジ に従う場合、 border-radius 曲線や、 corner-shape にも従うべきである。

アウトラインの位置は子孫ボックスによって影響を受けることがある。

描画されたアウトラインの寸法は、要素の インクオーバーフロー領域 に寄与する。

ユーザーエージェントは、ユーザーにフォーカスの概念を適切に伝えるための領域を囲むアウトラインを決定するアルゴリズムを使用すべきである。

注： 本仕様書ではアウトラインの正確な位置や形状は定義していないが、通常はボーダーボックスの直外に描画される。

注： アウトラインはすべての辺で同じである。 ボーダーとは異なり、 outline-top、outline-left などのプロパティは存在しない。

本仕様書では、複数の重なったアウトラインの描画方法や、 他の要素の背後で部分的に隠れたボックスのアウトライン描画方法は定義していない。

button { outline: thick solid }

グラフィカルユーザーインターフェースでは、要素の周囲にアウトラインを使用して ページ上でどの要素にフォーカスがあるかをユーザーに示すことがある。 これらのアウトラインはボーダーに加えて表示され、オン/オフ切り替えでも文書のリフローは発生しない。 フォーカスは文書内でのユーザー操作の対象である（例：テキスト入力やボタン選択）。

:focus-visible  { outline: thick solid black }
:active { outline: thick solid red }

注： アウトラインはフォーマットに影響しない （ボックスモデル上のスペースを占有しない）ため、 ページ上の他の要素と重なることがある。

3.2. アウトラインの太さ：outline-width プロパティ

outline-width プロパティは border-width と同じ値を受け入れ、 同じ意味を持つ（CSS Backgrounds 3 § 3.3 Line Thickness: the border-width properties）。

3.3. アウトラインのパターン: outline-style プロパティ

<outline-line-style> は <line-style> (CSS Backgrounds 3 § 3.2 線のパターン: border-style プロパティ) と同じ値を受け入れます。 hidden はアウトラインスタイルとしては使用できません。 さらに、outline-style プロパティは auto の値も受け入れます。

auto の値はユーザーエージェントが カスタムのアウトラインスタイルをレンダリングすることを許可します。 通常、このスタイルはプラットフォームのユーザーインターフェースのデフォルトであるか、 CSS では詳細に記述できない、リッチなスタイル（例えば、半透明の外側ピクセルで輝いて見える丸みを帯びたエッジのアウトライン）です。 ユーザーエージェントは、auto スタイルのアウトラインのレンダリングに対して outline-color プロパティで影響を与えることを可能にする場合がありますが、 この仕様ではレンダリングがどのように影響を受けるか（受けるとしても）を定義していません。 outline-width プロパティは outline-style が auto の場合は無視されます。 ユーザーエージェントは auto を solid として扱うことがあります。

3.4. アウトラインの色: outline-color プロパティ

outline-color プロパティは <'border-top-color'> の全ての値を受け入れます。 また、次のキーワードも使用可能です:

auto

outline-style が auto の場合、 outline-color: auto は auto と計算され、 アクセントカラー を表します。

それ以外の場合、outline-color: auto は currentColor と計算されます。

CSS Color 4 § 14. <color> 値の計算方法 を参照してください。 また、CSS Images 4 § 4 1D 画像値: <image-1D> 型および stripes() 記法 は <image-1D> 値に関する計算値を示します。

3.5. アウトラインのオフセット: outline-offset プロパティ

デフォルトでは、アウトラインは border edge のすぐ外側に描画されます。 しかし、アウトラインをオフセットして border edge より外側に描画することも可能です。

outline-offset の計算値が 0 以外の場合、 アウトラインはその分だけ border edge から外側に描画されます。

:focus,:active  { outline-offset: 2px }

負の値を指定した場合、アウトラインは ボーダーボックス内に縮小されます。 アウトラインで描画される形状の高さおよび幅は、 outline-width プロパティの計算値の 2 倍未満にならないようにします。 これにより、大きな負の値でもアウトラインを描画できます。 ユーザーエージェントはこの制約を各方向で独立して適用すべきです。 アウトラインが複数の分断された形状として描画される場合、 この制約は各形状に個別に適用されます。

4. リサイズ

CSS2.1は、ブロックコンテナ要素におけるスクロール機構（例：スクロールバー）の表示を制御する仕組みを提供します。 本仕様では、要素のユーザーによるリサイズ可能性を制御する仕組みや、テキストのオーバーフロー動作を指定する機能を追加します。

4.1. ボックスのリサイズ: resize プロパティ

resize プロパティは、要素をユーザーがリサイズ可能かどうか、また可能であればどの軸でリサイズできるかを指定できます。

none

UAは要素にリサイズ機構を表示せず、ユーザーは直接操作で要素をリサイズできません。

both

UAは双方向リサイズ機構を表示し、ユーザーが要素の高さと幅の両方を調整できます。

horizontal

UAは水平方向リサイズ機構を表示し、ユーザーは幅のみ調整可能です。

vertical

UAは垂直方向リサイズ機構を表示し、ユーザーは高さのみ調整可能です。

block

UAはブロック軸方向リサイズ機構を表示し、ユーザーは要素のブロックサイズのみを調整できます。

inline

UAはインライン軸方向リサイズ機構を表示し、ユーザーは要素のインラインサイズのみを調整できます。

現在、要素上のスクロール機構の表示は overflow プロパティを使用して制御可能です（例：overflow: scroll と overflow: hidden 等）。 resize プロパティの目的は、要素上のリサイズ機構（例：リサイズボックスやウィジェット）の表示と機能を制御できるようにすることです。

注: リサイズ機構はスクロール機構とは異なり、 ズーム用のUA機構とは関係ありません。 スクロール機構は要素の内容のどの部分を表示するかを決定するのに対し、 リサイズ機構は要素のサイズを決定します。

resize プロパティは、スクロールコンテナの要素に適用されます。 UAは、overflow プロパティの値に関係なく、以下の要素にも適用可能です：

• 画像や動画を表す置換要素（img、 video、 picture、 svg、 object、 canvas）
• iframe 要素

resize プロパティが生成コンテンツに及ぼす影響は未定義です。 実装では生成コンテンツに resize プロパティを適用すべきではありません。

注: 将来的に resize プロパティが CSSPseudoElementインターフェイスの実装により生成コンテンツに適用される可能性があります。

要素がユーザーによりリサイズされると、 UAは要素の width と height プロパティを、 要素の style属性 DOM 内で ユーザーが示したサイズの px 単位値に設定します。 既存のプロパティ宣言がある場合は置き換え、!important は使用されません。

要素が一方向のみリサイズされた場合、対応するプロパティのみが設定され、両方は設定されません。

リサイズの正確な方向（例：要素の左上を変更するか、右下を変更するか）は、 要素が絶対配置されているか、right および bottom プロパティの使用、 要素の言語が右から左かなど、多くのCSSレイアウト要因に依存します。 UAはリサイズ方向（CSSレイアウトによる決定）と、プラットフォームの慣習および制約を考慮して ユーザーへのリサイズ機構の提示方法を決定すべきです。

ユーザーエージェントは、min-width、 max-width、 min-height、 max-heightで課される制約以外の制限なしに、 ユーザーが要素をリサイズできるようにする必要があります。

注: ユーザーによる要素のリサイズが無視されたり上書きされるように見える場合があります。 例：!important のカスケード宣言により 要素の style属性 内の width と height が優先される場合など。

要素の resize プロパティの計算値の変更は、 ユーザーによるリサイズによって style属性 に加えられた変更をリセットしません。

iframe,object[type^="text/"], 
object[type$="+xml"],object[type="application/xml"] 
{ 
  overflow:auto; 
  resize:both; 
} 

5. ポインティングデバイスとキーボード

5.1. ポインターの相互作用

5.1.1. カーソルのスタイル指定: cursor プロパティ

このプロパティは、要素の border edge 内に カーソルのホットスポットがあるときに表示されるカーソルの種類を指定します。

注: CSS Backgrounds 3 § 4.1 Curve Radii: the border-radius properties に従い、border edge は border-radius の影響を受けます。

重なり合う要素の場合、どの要素がカーソルの種類を決定するかはヒットテストによります： カーソルを決定する要素は、この位置からクリックが発生した場合に クリックを受け取る要素です。

注: ヒットテストの詳細は本仕様の範囲外です。 ヒットテストは将来のCSSまたはHTMLの改訂で定義される予定です。

ユーザーエージェントは、スクロールバーやリサイズ用UI、その他のネイティブUIウィジェットの上では cursor プロパティを無視することがあります。 また、ページが応答していないときのビジー状態や、テキスト選択中のテキストカーソルなど、 UAのユーザーインターフェイス状態を示すために、独自のカーソルを表示する場合があります。

注: [HTML] は、イメージマップの特別扱いを cursor プロパティに定義しています。

値の意味は以下の通りです：

<cursor-image>

cursor プロパティの最初の（オプションの）構成要素は、画像ベースのカーソルのリストです。 UAがリストの最初のカーソルを扱えない場合、次のカーソルを試みます。 すべての作者指定カーソルが扱えない場合、リスト末尾のキーワードベースのカーソルを使用します。

<cursor-image> の構文は以下の通りです：

<cursor-image> = [ <url> | <url-set> ] <number>{2}?

UAは <url> または <url-set> で指定されたリソースからカーソルを取得します。 準拠するUAは、<url> および <url-set> の代わりに、 <image>（上位互換）をサポートすることがあります。

<url-set> は image-set() の制限版で、 <image> は <url> のみ使用可能です。

UAは以下の画像形式を必ずサポートする必要があります：

• PNG ([PNG]に準拠)
• SVG ([SVG11]に準拠)で、secure static mode [SVG2]。natural size がある場合
• その他、UAが他のプロパティ（例：background-image）でサポートする非アニメーション画像形式

さらに、UAは以下の形式をサポートすべきです：

• SVG ([SVG11]に準拠)、secure animated mode [SVG2]、natural size がある場合
• その他、UAが他のプロパティ（例：background-image）でサポートするアニメーション画像形式

UAは追加のファイル形式もサポート可能で、natural size がなくてもSVGを secure static mode または secure animated mode でサポートできます。

注: CSS WG は当初、すべてのSVGを必須サポートする予定でしたが、 実装不足のため、natural sizeなしのSVGは必須からオプションに変更されました。

注: 長年、デスクトップブラウザでは .ico と .cur ファイル形式のみがカーソルでサポートされていました。 現在はPNGやSVGが広くサポートされていますが、レガシー互換性のためUAはこれらもサポートすることが推奨されます。

デフォルトオブジェクトサイズ は UAのOS上の典型的なカーソルサイズに基づき定義されます。

具体的オブジェクトサイズ は デフォルトサイズ決定アルゴリズムで決定されます。 OSが指定サイズ以上のカーソルをレンダリングできない場合、 画像の 自然比率 を保持したまま縮小されます。

オプションの <number> のペアは、 画像内でポインタ位置（ホットスポット）の X, Y 座標を指定します。

注: さまざまな <image> の座標系の定義は [CSS4-IMAGES] に委ねられています。

値を省略すると、画像リソース自体の自然なホットスポットが使用されます。 自然なホットスポットがなければ左上隅 (0 0) が使用されます。

ホットスポットの座標が画像外の場合は、各座標を独立にクランプして画像内に収めます。

<cursor-predefined>

必須の <cursor-predefined> キーワードは、 事前定義されたカーソルまたは、指定されたURL画像が使用できない場合のフォールバックカーソルを示します。

完全なキーワードセットと意味については、§ 5.1.1.1 事前定義カーソルを参照してください。

:link,:visited {
  cursor: url(example.svg),
    url(hyper.cur),
    url(hyper.png) 2 3,
    pointer
}

5.1.1.1. 事前定義カーソル

<cursor-predefined> の生成規則は、ほとんどのオペレーティングシステムで利用可能な幅広い事前定義カーソルを含みます。 その構文は以下の通りです：

<cursor-predefined> = auto | default | none |
                context-menu | help | pointer | progress | wait |
                cell | crosshair | text | vertical-text |
                alias | copy | move | no-drop | not-allowed | grab | grabbing |
                e-resize | n-resize | ne-resize | nw-resize |
                s-resize | se-resize | sw-resize | w-resize |
                ew-resize | ns-resize | nesw-resize | nwse-resize |
                col-resize | row-resize |
                all-scroll |
                zoom-in | zoom-out

<cursor-predefined> のキーワードの意味と典型的な描画は以下の通りです：

汎用カーソル

auto

UAは現在の文脈に応じて表示するカーソルを決定します。auto は、選択可能なテキストや編集可能要素上では text と同様に振る舞い、 それ以外では default として振る舞います。

default

プラットフォーム依存のデフォルトカーソル。多くの場合、矢印として描画されます。

none

要素にカーソルを描画しません。

リンクとステータスカーソル

context-menu

カーソル下のオブジェクトにコンテキストメニューが利用可能であることを示します。 多くの場合、矢印と小さなメニュー風アイコンで描画されます。

help

カーソル下のオブジェクトにヘルプが利用可能であることを示します。 多くの場合、疑問符や吹き出しで描画されます。

pointer

リンクを示すポインターカーソルです。

progress

処理中であることを示しますが、ユーザーはまだ操作可能です。多くの場合、回転するビーチボールや矢印と時計・砂時計で描画されます。

wait

プログラムがビジー状態で、ユーザーが待つべきことを示します。 多くの場合、時計や砂時計で描画されます。

選択カーソル

cell

セルやセルのセットが選択可能であることを示します。多くの場合、中央に点のある太い十字で描画されます。

crosshair

単純な十字（"+" 形）を示します。2次元ビットマップ選択モードを示す場合があります。

text

選択可能なテキストを示します。多くの場合、縦向きの I ビームで描画されます。縦書きテキストでは UA は自動的に水平 I ビーム/カーソル（vertical-text と同様）を表示する場合があります。

vertical-text

選択可能な縦書きテキストを示します。多くの場合、水平 I ビームで描画されます。

ドラッグ＆ドロップカーソル

alias

エイリアスやショートカットの作成を示します。多くの場合、矢印と小さな曲がった矢印で描画されます。

copy

コピーを示します。多くの場合、矢印と小さなプラス記号で描画されます。

move

移動を示します。

no-drop

現在のカーソル位置にアイテムをドロップできないことを示します。多くの場合、手や矢印と小さな禁止マークで描画されます。

not-allowed

要求された操作が実行されないことを示します。多くの場合、禁止マーク（円に斜線）で描画されます。

grab

掴む（移動のためにドラッグ可能）ことを示します。多くの場合、開いた手の裏側で描画されます。

grabbing

掴んでいる（移動中）ことを示します。多くの場合、ほぼ閉じた手の裏側で描画されます。

サイズ変更・スクロールカーソル

e-resize

n-resize

ne-resize

nw-resize

s-resize

se-resize

sw-resize

w-resize

辺の移動を示します。例えば、se-resize は ボックスの南東の角からの移動に使用されます。

ew-resize

ns-resize

nesw-resize

nwse-resize

双方向のサイズ変更を示します。

col-resize

項目/列を水平方向にリサイズできることを示します。多くの場合、垂直バーで区切られた左右向きの矢印で描画されます。

row-resize

項目/行を垂直方向にリサイズできることを示します。多くの場合、水平バーで区切られた上下向きの矢印で描画されます。

all-scroll

任意方向にスクロール可能であることを示します。多くの場合、中央に点を置いた上下左右の矢印で描画されます。

ズーミングカーソル

zoom-in

zoom-out

拡大または縮小が可能であることを示します。多くの場合、虫眼鏡の中央に "+" または "-" が描かれたアイコンで表示されます。zoom-in と zoom-out に対応します。

5.1.1.2. キャンバスのカーソル

ドキュメントの キャンバス は、ドキュメントが描画される無限の表面です [CSS21]。 キャンバスに対応する要素が存在しないため、要素上にない場合のカーソルのスタイル指定を可能にするために、 キャンバスのカーソルはルート要素のカーソルを再利用します。 しかし、ルート要素のボックスが生成されない場合 （例えば、ルート要素に display: none が指定されている場合）、キャンバスのカーソルはプラットフォーム依存のデフォルトカーソルとなります。

注意: 要素が不可視でもボックスを生成する場合があります。例えば、 要素が visibility: hidden であっても、display: none でなければ、 その要素のボックスが生成され、キャンバスのカーソルとして使用されます。

5.2. 挿入キャレット

挿入キャレット（略して「キャレット」）は、 テキスト入力を受け付ける要素内の挿入ポイントを 視覚的に示すインジケータで、ユーザーがテキスト（および場合によってはその他のコンテンツ）を挿入できる場所を示します。 caret-color、caret-animation、および caret-shape プロパティは、 キャレットの見た目に関して著者がある程度制御できるようにします。

テキストまたは要素は、テキスト入力を受け付けると見なされます。これは、それが 編集可能要素 か、その子孫である場合に該当します。ただし、使用値 が user-select プロパティで none に設定されている要素や、 contentEditable 属性が false に設定されたHTML要素をルートとするサブツリーは除外されます。

一部のユーザーエージェントには、見た目が似た別のユーザーインターフェイス機構が存在し、時折「キャレット」と呼ばれることもあります。 例えば、一部のUAは「ナビゲーションキャレット」を表示でき、これは 挿入キャレット に似ていますが、編集不可テキスト内でも移動可能です。 caret-color、caret-animation、および caret-shape プロパティは、 これらの機構や 編集可能要素 以外には適用されることを意図していませんが、 UAが考慮することを選択する場合もあります。 適用の可否や範囲はユーザーエージェント次第です。

注意: cursor プロパティが auto の場合や、 cursor プロパティが text または vertical-text の要素上にカーソルを置いたときに表示されるカーソル画像は、 キャレットに似ていることがありますが、キャレットではありません（カーソルです）。

5.2.1. 挿入キャレットの色指定: caret-color プロパティ

このプロパティは 挿入キャレット の色を制御します。

auto

UAは currentColor を使用するべきです。 UAは キャレット の色を自動的に調整して、周囲のコンテンツとの視認性やコントラストを確保する場合があります。 これは currentColor、背景、影などに基づく場合があります。

注意: caret-shape が block の場合、 視認性とコントラストの確保は、UAが決定した currentColor 以外の色を用いるのが最適です。

<color>

指定された色で キャレット が着色されます。

5.2.2. 挿入キャレットのアニメーション: caret-animation

ほとんどのプラットフォームおよびUAでは、挿入キャレット は点滅します。 このプロパティは著者がキャレットのアニメーション方法を制御することを可能にします。

auto

UAがキャレットをどのようにアニメーションさせるか（必要であれば）、およびその速度を決定します。 プラットフォームの規約や設定に従い、文脈に応じて調整されることがあります。

注意: 通常、点滅するキャレットとしてレンダリングされます。 点滅ではなくフェードイン・アウトするバリエーションが一部の環境に存在します。

manual

UAはキャレットをアニメーションさせてはいけません。

注意: これはUAによるキャレットのアニメーションに関するもので、CSSアニメーションでキャレットの色を変化させる場合は通常通り適用されます。

注意: [CSS3-ANIMATIONS] を用いたカスタムアニメーションを適用する際に、 キャレット が点滅・フェードしないよう caret-animation: manual を使うことが推奨されます。

注意: 詳細は ガイドライン 2.3: 発作: 発作を引き起こす可能性のあるコンテンツ設計を避ける [WCAG20] を参照してください。

/* キャレットの点滅/フラッシュを防ぐ */
:read-write { caret-animation: manual !important; }

/* キャレットカラーの変化、アニメーションも含めて防ぐ */
:read-write { caret-color: auto !important; }

編集可能なユーザースタイルシートを持たないUAは、点滅、フラッシュ、およびアニメーションキャレットを無効化する設定を提供すべきです。 編集可能なユーザースタイルシートを持つUAも、この設定を提供することが望ましいです。 詳細は [WCAG] ガイドライン 2.2 および ガイドライン 2.3 を参照してください。

textarea {
  caret-animation: manual;
  caret-color: blue;
  animation: caret-alternate 2s step-end infinite;
}
@keyframes caret-alternate {
  50% { caret-color: red; }
}

5.2.3. 挿入カーソルの形状: caret-shape

このプロパティにより、作者は挿入カーソルの希望する形状を指定できます。

この定義の文脈では、characterは拡張グラフェムクラスタとして理解されます。 定義は[UAX29]に準拠しています。 また、visible characterは、非ゼロ幅を持つ文字を意味します。

auto

UAがカーソルの形状を決定します。 プラットフォームの慣習に一致させるべきで、文脈に応じて調整される場合があります。 例えば、ユーザーがキーボードのinsertキーを押した際にUAが挿入モードと上書きモードを切り替える場合、 挿入モードではbar カーソルを、 上書きモードではblock カーソルを表示することがあります。

bar

UAは挿入カーソルを細いバーとして挿入ポイントに表示しなければなりません。 これは文字の間、前、または後ろに配置され、文字の上に重なることはありません。 インラインの進行方向に垂直に配置すべきですが、 UAはイタリックや傾斜テキスト挿入時に傾けて表示することがあります。

block

UAは挿入カーソルを矩形として表示し、挿入ポイントの次の可視文字と重ねます。 挿入ポイントの後に可視文字がない場合、 最後の可視文字の後にカーソルを表示します。 UAはイタリックや傾斜テキスト挿入時に傾けた矩形で表示することがあります。

underscore

UAは挿入カーソルを細い線として次の下線に表示します（定義は[CSS-WRITING-MODES-3]参照）。 挿入ポイントの後に次の可視文字がない場合、 最後の可視文字の後にカーソルを表示します。

blockおよびunderscore カーソルの幅は、 挿入ポイントの次の可視文字の進行幅にするべきです。 次の可視文字がない場合や、情報を取得するのが困難な場合は 1chに設定します。

カーソルの向きと外観を決定する際、 UAは書字モード [CSS-WRITING-MODES-3]を考慮し、[CSS-TRANSFORMS-1]の変形を適用する必要があります。 例えば、SVGのtextPath要素を使ってパス上にテキストが配置されている場合も考慮すべきです。

barおよびunderscore カーソルの太さは、 auto カーソルの類似表現と同様に、UAによって決定されます。 実用的な場合、UAは変形などで縮小されてもカーソルが視認できる太さを選択すべきです。

行末にカーソルを表示するのに十分なスペースがない場合でも、UAはカーソルを表示するべきです。 この場合、スクロール可能なオーバーフロー領域の境界を越えて描画される場合があります。 UAは必要に応じて制限し、クリップすることもできます。 また、見えなくなる場合にカーソルをスクロールポート内に表示するため、視覚的に再配置することもできます。

カーソルの重なり位置は以下の制約内で未定義です:

• カーソルが要素の背景で隠されないこと。
• UAはblock カーソルを、重なる文字が隠されないように描画すること。

.console {
  caret-shape: underscore;
  background: black;
  color: white;
  font-family: monospace;
  padding: 1ex;
}

user@host:css-ui-4 $ ls -a
. .. Overview.bs Overview.html
user@host:css-ui-4 $  

user@host:css-ui-4 $ ls -a
. .. Overview.bs Overview.html
user@host:css-ui-4 $ 

5.2.4. 挿入カーソルのショートハンド: caret

このプロパティは caret-color、caret-animation、および caret-shape を1つの宣言で設定するショートハンドです。 省略された値は初期値に設定されます。

#old-screen {
  caret: block manual;
  animation: old-caret 2s infinite;
  /* 画面のスタイルは省略 */
}
@keyframes old-caret {
  from, 50% { caret-color: green; }
  75%, to { caret-color: transparent; }
}

5.3. キーボード制御

5.3.1. 方向キーによるフォーカス移動: nav-up, nav-right, nav-down, nav-left プロパティ

auto

ユーザーエージェントは、方向キー入力に応じてフォーカスを移動させる要素を自動的に決定します。

<id>

<id> 値は ID セレクタです [SELECT]。 プロパティに対応する方向キー入力に応じて、 フォーカスはセレクタに一致するツリー順序上最初の要素に移動します。

現在フォーカスされている要素を指定した場合、 nav- プロパティに対応する方向キー入力は無視されます — 同じ要素に再フォーカスする必要はありません。

セレクタに一致する要素がない場合、 ユーザーエージェントはフォーカスを移動させる要素を自動的に決定します。

他にフォーカス可能でない要素にフォーカスが移動する場合、 その要素はこの方向キー操作によってのみフォーカス可能となり、 :focus 疑似クラスはフォーカスされている間に一致します。

注意: この「フォーカス可能でない要素」に対して、 ドキュメントツリー内の次のフォーカス可能な要素にフォーカスを移動させるなど、 他のオプションも検討されました。 実装経験や作者の使用経験に基づく意見が歓迎されます。

<target-name>

<target-name> パラメータはフォーカス移動の対象フレームを示します。 <string> であり、 "_" で始まる文字列は使用できません。 エラー処理: "_" で始まる場合、"_parent" は親フレームに移動、 "_root" は root として扱われ、 他の値はその名前のフレームが存在すれば移動します。 指定したフレームが存在しない場合、 パラメータは current と見なされ、 要素が存在するフレーム内を使用します。 キーワード root は UA が全ウィンドウを対象とすることを示します。

方向キーを持つデバイス向けユーザーエージェントは、 それぞれ nav-* プロパティ(nav-up, nav-right, nav-down, nav-left) に従ってフォーカスを移動させます。 本仕様では、どのキーが方向キーかは定義していません。

注意: 通常のパソコンには 4 方向の矢印キーがあります。 これらのキーを方向キーとして使用するのが一例です。 アクセシビリティとユーザー利便性のため、 UA はどのキーを方向キーとして使用するかを設定できるようにすべきです。

button { position:absolute }

button#b1 {
  top:0; left:50%;
  nav-right:#b2; nav-left:#b4;
  nav-down:#b2; nav-up:#b4;
}

button#b2 { 
  top:50%; left:100%;
  nav-right:#b3; nav-left:#b1;
  nav-down:#b3; nav-up:#b1;
}

button#b3 { 
  top:100%; left:50%;
  nav-right:#b4; nav-left:#b2;
  nav-down:#b4; nav-up:#b2;
}

button#b4 { 
  top:50%; left:0;
  nav-right:#b1; nav-left:#b3;
  nav-down:#b1; nav-up:#b3;
}

button#foo { nav-left: #bar "sidebar"; }

5.3.2. 廃止: ime-mode プロパティ

ime-mode は一部ブラウザで実装されている問題のあるプロパティで、 本仕様および前身の [CSS-UI-3] により正式に廃止されています。

ユーザーエージェントは ime-mode プロパティをサポートしてはいけません。

作者は ime-mode プロパティを使用してはいけません。

ユーザーは、悪質なサイトや古い実装に対応する場合にのみ 修正目的で使用できます。 例えば以下のユーザースタイルシートのルールなどです:

input[type=password] {  ime-mode: auto !important; }

この CSS はユーザースタイルシートに配置して、パスワード入力欄を標準動作に強制できます。

本仕様では意図的に、古い ime-mode 実装の動作やサポート内容を文書化していません。 そのような方法を推奨したり追求することは適切ではないためです。

6. ユーザーインタラクション

6.1. コンテンツ選択の制御

user-select プロパティは、文書内でユーザーがどの要素をどのように選択できるかを指定するためのものです。 これにより、すべての要素が等しく選択に適していない場合でも、操作を容易にし、 隣接するコンテンツの誤選択を避けることができます。

ユーザーエージェントは user-select プロパティを ::first-line および ::first-letter 疑似要素に適用してはなりません。

注: UA は、このプロパティを ::before および ::after 疑似要素に適用する場合があります。 その場合、auto 値はこれらの疑似要素では used value として none にマッピングされますが、他の値も指定可能です。 これにより、生成されたコンテンツが選択またはコピーできない従来の動作が保持されます。 ただし、このプロパティにより、内容の一部を生成するために使用される場合には 選択およびコピーが可能になります。 可能な限り、著者は生成コンテンツを装飾目的以外に使用することを避け、 コンテンツはすべて DOM に含めることを推奨します。 この機能はリスクがあります。

user-selectを none以外の値に変更できるようにする場合、 これがコピー可能性やDOM APIに何を意味するかを検討する必要があります。

擬似要素内の生成コンテンツがこの仕組みで選択可能になる場合、 UAはこのコンテンツを検索機能で見つけられるようにする必要があります。

これを::markerやページマージンボックスにも適用すべきでしょうか？ used valueとしてautoもnoneにするべきでしょうか、 それともtextの方が適切でしょうか？

used valueはcomputed valueと同じですが、次の場合を除きます:

1. editable elementの場合、 used valueは常にcontainとなり、 computed valueは関係ありません。
2. computed valueがautoの場合、 used valueは以下で定義された他の値のいずれかになります。

この仕様において、editable elementとは、 editing hostまたは テキストを持つmutableなフォームコントロールのいずれかであり、 例えば textareaのようなものです。

editing hostの子孫であるeditable elementにおけるused valueの取り扱いに 制約を設けるべきでしょうか？ セマンティクスは明確ではありません。 noneをtextにマップすべきか、 それとも全ての値をtextにマップすべきかもしれません。

auto

used valueは以下の通り決定されます：

• ::beforeおよび::after擬似要素では、used valueはnoneとなります。
• 要素がeditable elementの場合、 used valueはcontainです。
• その他の場合、親要素のuser-selectのused valueがallなら、used valueはallとなります。
• その他の場合、親要素のuser-selectのused valueがnoneなら、used valueはnoneとなります。
• それ以外の場合、used valueはtextとなります。

Note: この非継承プロパティで初期値がautoの組み合わせは、親要素に依存してused valueが決まるため、 事実上の選択的継承を作ることが可能です。 これはMicrosoftがIEで提案したもので、継承に似た動作を導入するためですが、contain値は継承されません。

text

要素は選択に制約を課しません。

none

UAはこの要素内で選択を開始できないようにする必要があります。

要素外で開始された選択は、この要素内で終了できません。 ユーザーがそのような選択を試みた場合、UAは代わりに要素境界で選択範囲を終了させる必要があります。

Note: 現時点では実験的実装はすべてこの通りではありません。 Firefoxはこの通りです。 ChromeやSafariはほぼこの通りですが、要素後で開始された選択が逆方向に要素に入る場合はここで指定された通りに動作しますが、 要素前で開始され要素に入ろうとする場合、要素を全て選択するallのように動作します。 IEは要素外で開始された選択が要素内に入ることを制限しません。 また、ChromeとSafariでは、user-select: none内で選択を開始し、外で終了させようとした場合、 選択は要素境界からユーザー指定の終了点まで作成されます。 FirefoxとIEは仕様通り動作し、選択を作成しません。

ただし、この要素にused valueがnoneでない子孫がある場合、 これらの子孫内で開始・終了する選択は許可されます。

UAはこの要素をまたいだ選択を許可し、この要素自体は除外する必要があります。 複数範囲選択に対応していないUAはこの要素を含めても構いません。 もしこの要素にused valueがnoneでない子孫がある場合、 これらの子孫は要素をまたいだ選択に含まれる必要があります。この仕様はクリップボードの動作について規範的要求は行いません。 しかし、UAは視覚的な選択がコピーされる内容と一致するようにすることが推奨されます。 選択されていないように見えるテキストをコピーしたり、その逆はユーザーにとって非常に混乱します。

user-selectがnoneの要素内で選択を開始しようとしても、 既存の選択が解除されたり影響を受けたりしてはいけません。

user-selectはUIの利便性のための仕組みであり、コピー防止機能ではないため、 user-selectがnoneの場合でも、 UAはユーザーが明示的にテキストを選択できる別の方法を提供してよいです。

Note: noneはコピー防止機能ではなく、 コピー防止目的で使用しても効果はありません。 UAは回避手段を提供でき、サポートしていない旧式のUAには影響せず、 ユーザーはユーザースタイルシート等で無効化できます。 noneは、著者が選択に役立たないUI要素の選択を無効にすることで、 ユーザーが必要なコンテンツを選びやすくするためのものです。 CSSバリデータ、リンター、ブラウザ内開発者ツールなどは、誤用や悪用を検出し、 ユーザビリティを損なう使用や一般的な期待に反する使用に対して警告するヒューリスティックの使用が推奨されます。

著者はユーザーを不必要に制約しないよう注意する必要があります。 例えば、ルート要素にuser-select: noneを設定し、 一部の著者が選択可能と判断した要素だけで制限を緩和すると、ユーザーにとってストレスになります：

• 空白領域をクリックして現在の選択を解除できなくなる

• 選択可能にすべき領域を著者が見落としている場合がある

• 後からページに追加された領域が選択可能にされていない場合がある

• ユーザーはメインコンテンツ以外のテキストを辞書や翻訳ツールで調べたり、検索エンジンで警告やエラーを探したりしたい場合がある…

代わりに、著者はより意図された操作を妨げる可能性がある要素にのみ user-select: noneを選択 的に適用するのが良いでしょう。 選択される可能性の低い部分を選択可能なままにしておく方が、ユーザーのフラストレーションは少なくなります。

contain

UAはこの要素内で開始された選択が要素外に拡張されないようにする必要があります。

要素外で開始された選択は、この要素内で終了できません。 ユーザーがそのような選択を試みた場合、UAは代わりに要素境界で選択範囲を終了させる必要があります。

UAはこの要素をまたいだ選択を許可し、この要素の内容を含める必要があります。

Note: 現時点では、実験的実装は異なる挙動を示します。 textareaやcontenteditable要素で確認できます。

Note: これはInternet Explorerで実験的に導入され、 user-select: elementとして知られていました。

all

要素の内容は原子的に選択されなければなりません：部分的に選択される場合、要素全体とその子孫を含める必要があります。 要素が選択され、親のuser-selectのused valueがallの場合、親も再帰的に選択に含める必要があります。

この要素にused valueがallでない子孫があり、 選択が完全にその子孫内にある場合、選択はこの要素全体に拡張されません。

注: 選択範囲にはテキスト以外も含まれることがあり、画像、表、動画などにも拡張される場合があります。 このような選択範囲のコピーや貼り付け時の動作は、本仕様の対象外です。

HTML向けUAスタイルシートには以下の追加が行われます:

button, meter, progress, select { user-select: none; }

上記のリストは不完全であり、少なくとも inputのボタン類のバリアントも含める必要があります。

レガシーコンテンツとの互換性のため、user-selectをサポートするUAは、エイリアスとして -webkit-user-selectもサポートする必要があります。

注: エイリアス機構の詳細はUAに委ねられています。 -webkit-user-selectをuser-selectのショートハンドプロパティにする方法は効果的であることが知られており、新規実装者はこれを検討すべきです。 しかし、-webkit-user-selectを他の方法でuser-selectのエイリアスとしてサポートするUAも存在し、互換性に悪影響はありません。 したがって、本仕様では柔軟性が認められています。

6.2. ヒットテストからの除外: pointer-events プロパティ

このプロパティはヒットテストの通常の動作を変更しますが、 この通常のヒットテスト自体は現時点で仕様化されていません。 明白な部分については広く相互運用性が確認されていますが、無数の微妙なケースや隅のケースがあり、 詳細な仕様化により大きな恩恵が得られます。 CSS-WGは、このような仕様作成への協力を非常に歓迎します。

pointer-events プロパティは、要素のボックスがポイント型ポインターイベントのターゲットになれるかどうかを定義します。 値の意味は以下の通りです:

auto

ヒットテストは通常通り行われます。

none

ヒットテストは、要素によって生成されるボックス （[CSS-DISPLAY-3]参照）が存在しないかのように扱われます。 これにより、pointer-events: noneの背後にある要素が ヒットテスト対象として認識されます。

上記の記述には条件付けが必要です。 一部の操作においては、ヒットテストは引き続き要素を考慮します。 例えば、クリック＆ドラッグによるテキスト選択は通常通り動作します。 pointer-eventsによって影響を受ける対象は具体的に何か、明確化が必要です。

pointer-events: noneは 順次フォーカス移動を阻害しません。

注: この pointer-events: none は 要素自身のみをヒットテストから除外します。 サブツリー全体は除外されません。 このプロパティは継承により子孫に伝播しますが、 pointer-events: auto を pointer-events: noneの子孫に指定すると、 その要素は通常通りヒットテストに参加します。

注: pointer-events: autoの子孫をターゲットとしたイベントは、 バブリングまたはキャプチャリングフェーズ中に pointer-events: noneの祖先でも イベントハンドラでキャッチされることがあります （DOM § 2 Events参照）。

注: SVG 2 § 15.6 ‘pointer-events’ プロパティでは、 SVG要素向けのより多くの値を持つバリエーションが定義されています。 これらの値をSVG以外で使用した場合の効果は現時点で定義されていません。

6.3. すべての操作を防止: interactivity プロパティ

interactivity プロパティは、要素およびその フラットツリー の子孫 （テキストノードを含む）が inert かどうかを指定します。

auto

要素の inert性 は ホスト言語 によって決定されます。(通常は、この場合要素は inert ではないことを意味します。)

inert

要素は inert です。

注: このプロパティは、作者が要素を inert に強制できますが、 要素を *非* inert にすることはできません。inert性はホスト言語に委ねられます。 例えば、HTMLではモーダルダイアログが表示されている間、ページの残り部分は自動的に inert にされます。 このプロパティの値に関わらず適用されます。 一般に、ホスト言語はCSSが直接アクセスできる以上の情報を用いて、ユーザーにとって最適なinert性の動作を決定できます。

注: inert ノードは通常フォーカスできず、 ユーザーエージェントはinertノードをアクセシビリティAPIや支援技術に公開しません。 inertサブツリーには、ページの理解や操作に不可欠なコンテンツやコントロールを含めるべきではありません。 inertサブツリーのコンテンツはすべてのユーザーに認識されず、操作もできません。 作者は、表示される内容も視覚的に隠されている場合にのみ、要素をinertに指定すべきです。 ほとんどの場合、個別のフォームコントロールにinert属性を指定すべきではありません。 その場合、disabled 属性の方が適切です。

[inert] {
  interactivity: inert;
}
dialog:modal {
  interactivity: auto;
}

6.4. ユーザー関心遅延: interest-delay-* プロパティ

一部の ホスト言語 の機能は、ユーザーが要素に「関心」を示したときに有効化されることがあります。 具体的に何を意味するかは ホスト言語 および ユーザーエージェント に依存します（例: HTMLの interestfor 属性）。 しかし、こうした機能の共通点は、「関心」は即座に得たり失ったりしないことです。

例えば、「関心」はカーソルを要素にホバーさせることで示される場合、ページ上でカーソルを素早く通過させただけで「関心」が示されたとみなされないようにすべきです。 そうしないと、ユーザーが関係のない操作をしている間にUIが不意に表示されたり消えたりして混乱を招く可能性があります。

同様に、一度関心が示された場合も、少なくともデフォルトでは即座に「関心を失う」べきではありません。 例えば、ユーザーがリンクにホバーして子ポップアップリストが表示された場合、リンクからリストへカーソルを移動する際に一時的に両方の要素を離れることがありますが、その間にリストが「関心を失った」とみなされて閉じるべきではありません。

interest-delay ショートハンドおよび interest-delay-start、 interest-delay-end ロングハンドを使用すると、 指定された要素の機能に対して 関心開始遅延 および 関心終了遅延 を制御できます。 使用可能な値は次の通りです:

normal

関心開始遅延 および/または 関心終了遅延 はユーザーエージェント定義です。 プラットフォームの慣習に合わせて選択できます。

これらの遅延は ゼロにすべきではありません。 遅延は互いに異なる場合があり、ユーザーの関心の示し方によって変わることがあります。 （例えば、ホバーと長押しでは関心の示し方に応じて異なる遅延が用いられるかもしれません。）

<time>

関心開始遅延 および/または 関心終了遅延 を指定された期間に設定します。

interest-delay ショートハンドは、 interest-delay-start に最初の値を、 interest-delay-end に2番目の値を（値が1つしかない場合は最初の値を）設定します。

注: 将来的には、これらのプロパティの構文が拡張され、 機能やユーザーの関心の示し方に応じて遅延をカスタマイズできるようになる可能性があります。 （例えば、ホバーと長押しで異なる遅延を指定するなど。）

7. ウィジェットのスタイリング

7.1. ウィジェットのアクセントカラー: accent-color プロパティ

各プラットフォームのユーザーインターフェースコントロールは、通常、統一されたビジュアルスタイルの一部として設計されています。 多くのプラットフォームでは（すべてではありませんが）、そのビジュアルスタイルには アクセントカラー が含まれます。 アクセントカラーは通常明るく、背景や前景の実用的な色と強く対比します。 すべてのコントロールがすべての状態でアクセントカラーを使用するわけではありませんが、 それでもコントロールのカラースキームの中核部分です。

accent-color CSSプロパティを使用すると、 要素によって生成されるユーザーインターフェースコントロールの アクセントカラー を作者が指定できます。 値の意味は次の通りです:

auto

プラットフォームが選択した色を表します。可能であれば、プラットフォームの アクセントカラー と一致させるべきです。

<color>

指定された色を アクセントカラー として使用します。

ユーザーエージェントは、指定された accent-color を使用して、 本来アクセントカラーでスタイル指定されるはずだった要素の部分を描画する必要があります。 コントラストを保持して可読性を確保するため、 色の輝度や明るさを調整したり、コントロール内の他の部分で色を置き換えたりすることがあります （例: オーバーレイされたグリフの色を color から background-color に切り替えるなど）。 また、グラデーションなどのために色のバリエーションを生成し、 プラットフォームのアクセントカラー使用規約に合わせることもあります。

ラジオボタンは通常、円形で構成され、 チェック状態を表す「ドット」が重ねられることがあります。 一部のビジュアルスタイルでは、チェック状態に アクセントカラー を使用します: その中には円の背景に使用するものや、前景に使用するものがあります。

いずれの場合も、accent-color プロパティが コントロールの影響を受ける部分のスタイルを制御します。 ラジオボタンにアクセントカラーを使用しないビジュアルスタイルでは、 accent-color は効果を持ちません。

以下は、青色の accent-color で描画されたラジオボタンの例です:

プラットフォーム	サンプル	備考
Firefox 79 / Win		アクセントカラーは使用されていません。
Chrome 81 / Win		アクセントカラーは使用されていません。
Safari / Snow Leopard		チェック状態の背景グラデーションにアクセントカラーが使用されています。
Safari 13 / Mac / Light		チェック状態の前景にアクセントカラーが使用されています。
Safari 13 / Mac / Dark		チェック状態の前景にアクセントカラーが使用されています。
Chrome 83 / Win / Light		チェック状態の前景にアクセントカラーが使用されています。
Chrome 83 / Win / Dark		チェック状態の前景にアクセントカラーが使用され、ダークモード背景に合わせてコントラスト調整されています。

指定された色が部分的または完全に透明な場合、ユーザーエージェントはまずそれを Canvas システムカラーの上に合成し、 その結果得られた不透明色をアクセントカラーとして使用する必要があります。

注: ユーザー設定によって異なる場合がありますが、Canvas は、ライトカラースキームでは通常白、ダークカラースキームでは黒です。

7.2. 外観の切り替え: appearance プロパティ

ほとんどの文書内要素の見た目は CSS で完全に制御できますが、ウィジェットは通常、ユーザーエージェントがホスト OS のネイティブ UI コントロールを使用して描画するため、 CSS で再現したりスタイルを変更したりすることはできません。

この仕様書における ウィジェット という用語は、 置換要素 のうち ネイティブ表示 を持つものを指します。 つまり、これらはホスト OS やプラットフォームの類似するネイティブウィジェットやコントロールのように描画されるか、 CSS では表現できない見た目で描画されます。 どの要素が ネイティブ表示 を持つかは、 ホスト言語（例えば HTML [HTML]）が定義します。

この仕様書では、この振る舞いをある程度制御するための appearance プロパティを導入しています。 特に、appearance: none を使用すると、 ネイティブ表示 を抑制でき、 CSS で再スタイルできる プリミティブ表示 を持つようになります。

appearance: base を使用すると、ウィジェット に base appearance（基本外観） が与えられます。ウィジェット は base appearance の場合、 CSS で再スタイル可能な箇所では ネイティブ外観 が抑制され、 primitive appearance（プリミティブ外観） と同様ですが、 デフォルトスタイルも持ち、使用可能かつ互換性があります。これは、primitive appearance が 一部の ウィジェット を完全に消してしまう可能性がある点とは異なります。

ウィジェットにはスタイルシートが関連付けられている場合があり、基本表示 の有無によってスタイルが変化することがあります。ネイティブ表示 と プリミティブ表示 は同じスタイルを持つべきです。

appearance:base は、そのスタイルシートが HTML 仕様で完全に定義され、すべての HTML フォームコントロールに対して適切に実装されるまで、出荷準備が整っていません。

input { appearance: none; }
input[type=checkbox] { appearance: checkbox; }

none

要素は通常の CSS ルールに従ってレンダリングされます。 ウィジェット 以外の置換要素は影響を受けず、置換要素のままです。ウィジェット は ネイティブ表示 を持たず、 プリミティブ表示 を持つ必要があります。 詳細は § 7.2.2 要素の装飾的側面への appearance の影響 および § 7.2.3 要素の意味的側面への appearance の影響 を参照してください。

auto

要素のボックスは通常の置換要素と同様にレイアウトされます。

そのボックス内で、ウィジェット を表す要素は、そのウィジェットの ネイティブ表示 を持つべきです。

どの要素がどの ウィジェット を表すかはホスト言語が定義します。

ウィジェット 以外の要素は none と同様にレンダリングされなければなりません。

base

base の効果は適用される要素によります：

ウィジェット以外の要素

ウィジェット以外の要素は none と同様にレンダリングされます。

ウィジェット で 基本表示 をサポートするもの

none と同様に、要素は通常の CSS ルールに従ってレンダリングされます。ウィジェット は ネイティブ表示 を持たず、基本表示 を持つ必要があります。

基本表示をサポートしないウィジェット

基本表示を持たないウィジェット は auto と同様にレンダリングされます。どの ウィジェット が 基本表示 を持つかはホスト言語が定義します。

base-select

base-select の効果は適用される要素によります：

select 要素または ::picker(select)

要素は base と同様にレンダリングされます。

その他の要素

要素は auto と同様にレンダリングされます。

<compat-auto>

これらの値は、以前の非標準バージョンで作られたコンテンツとの互換性のために存在します。 すべて auto と同じ効果を持ちます。

<compat-auto> =  searchfield | textarea | checkbox | radio | menulist | listbox | meter | progress-bar | button 

auto が広くサポートされる場合は、それを使用することを推奨します。

これらの値のいずれかがウェブ互換性のために不要な場合は、このリストから削除すべきです。逆に、互換性のために必要な値でリストに含まれていないものは追加する必要があります。

互換性の理由で、これらの値の一部を任意の要素に効果を持つ正式な値に昇格させる必要がある場合や、 一部の ウィジェット に副作用を持たせる必要がある可能性があります。

<compat-special>

これらの値は、以前の非標準バージョンで作られたコンテンツとの互換性のために存在します。 この仕様書の目的では、すべて auto と同じ効果を持ちます。 ただし、ホスト言語は要素の ネイティブ表示 を定義する際に、これらの値を考慮する場合があります。

<compat-special> =  textfield | menulist-button 

例えば [HTML] では：

• input 要素で "search" type 属性を持つもののネイティブ表示は、 input 要素で "text" type 属性を持つものと一致するように変化します。 これは appearance が textfield の場合です。

• ドロップダウンボックスの select 要素のネイティブ表示は、 devolved 状態と一致するように変化します。 これは appearance が menulist-button の場合です。

input[type=checkbox] {
  all: unset; /* この省略記法には appearance を none にリセットすることも含まれる */
  width: 1em; 
  height: 1em; 
  display: inline-block; 
  background: red; 
} 
input[type=checkbox]:checked { 
  border-radius: 50%; 
  background: green; 
} 
input[type=checkbox]:focus-visible { 
  outline: auto; 
} 

ユーザーエージェントは、一部の CSS プロパティを無視することがあります。これは、ウィジェット が ネイティブ表示 でレンダリングされる場合に、意図した外観を保持するため、 またはこれらのプロパティが選択された表示に対して意味を持たない場合があるためです。

無視（Disregarding） とは、ユーザーエージェントがそのプロパティを対象のウィジェットに 適用されていないかのように扱うことを意味します。 それでも、明示的な例外が指定されていない限り（互換性の理由で）、ユーザーエージェントは通常のルールに従って、計算済み値 を決定する必要があります。

詳細には、ネイティブレンダリングされたウィジェットのプロパティを無視するルールは以下の通りです：

• ウィジェットのボックスのサイズや位置に影響する CSS プロパティ（サイズ指定プロパティ など）や、 ボックス外での見た目に影響するプロパティ（transform、filter、 box-shadow など）は、 ウィジェット が ネイティブ表示 でレンダリングされる場合でも適用されます。ウィジェットのボックスは、他の置換要素と同様にレイアウトに参加します。
• ウィジェットの内部ボックスモデルのサイズに影響するプロパティ（box-sizing、padding、border、 margin など）は、必要に応じて無視されることがあります。
• 塗りに影響するその他のプロパティ（background-color など）も、必要に応じて無視されることがあります。
• ユーザーエージェントは、可能な場合はウィジェット内のテキスト描画において、書字方向やフォント関連の CSS プロパティを考慮すべきです。
• object-fit プロパティは適用されません。

ウィジェットのネイティブレンダリングは、その固有サイズがボックスサイズを超える場合、ボックスサイズをはみ出すことがあります。

古いコンテンツとの互換性のため、ユーザーエージェントは -webkit-appearance を 旧名称の別名 としてサポートし、appearance と同様に扱う必要があります。

7.2.1. ネイティブ表示を無効化するプロパティ

特定のプロパティは、Author Origin で宣言されると、 一部の ウィジェット の ネイティブ表示 を無効化します。 具体的には、その ウィジェット に関連する Author Origin のすべての宣言がカスケードされ、 かつ カスケード値 が存在する場合（任意の revert または revert-layer 値を巻き戻した後でも）、 ウィジェットのネイティブ表示を無効化するプロパティ のいずれかが適用される場合、 その ウィジェット は デボルブされたウィジェット としてレンダリングされます。 デボルブされたウィジェット のレンダリングは、ホスト言語で別途指定されない限り、 ウィジェット の プリミティブ表示 と同一です。

ホスト言語は、どの要素が デボルブ可能ウィジェット を表すかを定義します。 プロパティに関係なく表示がネイティブのまま残るウィジェットは 非デボルブウィジェット と呼ばれます。

ウィジェットのネイティブ表示を無効化するプロパティ は以下の通りです：

• background-color
• border-top-color
• border-top-style
• border-top-width
• border-right-color
• border-right-style
• border-right-width
• border-bottom-color
• border-bottom-style
• border-bottom-width
• border-left-color
• border-left-style
• border-left-width
• border-block-start-color
• border-block-end-color
• border-inline-start-color
• border-inline-end-color
• border-block-start-style
• border-block-end-style
• border-inline-start-style
• border-inline-end-style
• border-block-start-width
• border-block-end-width
• border-inline-start-width
• border-inline-end-width
• background-image
• background-attachment
• background-position
• background-clip
• background-origin
• background-size
• border-image-source
• border-image-slice
• border-image-width
• border-image-outset
• border-image-repeat
• border-top-left-radius
• border-top-right-radius
• border-bottom-right-radius
• border-bottom-left-radius
• border-start-start-radius
• border-start-end-radius
• border-end-start-radius
• border-end-end-radius

7.2.2. appearance が要素の装飾に与える影響

CSS スタイルルールによって発生していない、ウィジェット の装飾的視覚要素は、 appearance を使用して ネイティブ表示 から プリミティブ表示 に変更した場合、抑制されなければなりません。 これは、UA の内部表現が複数の要素や疑似要素を組み合わせて構成されていた場合でも同様です。

UA は、ウィジェット に appearance が none の場合に、認識可能な形状を与えるための スタイルルールを UA スタイルシートに含めるべきです。

Note: したがって、著者はこれらの UA スタイルルールを上書きして、 意図したスタイリングを適用する必要があります。

7.2.3. 要素のセマンティック側面に対する appearance の影響

ウィジェット の 原始的な外観 またはその 委譲された状態 を表示する際、ユーザーエージェントは元のセマンティクスで ウィジェット を操作するために必要な側面を保持する必要があります。 ただし、ウィジェット を操作可能である限り、異なる見た目を与えることは可能です。 ウィジェット の状態を観察するだけの側面で、操作に必要ないものは、 通常の CSS で同じ情報を伝えられる場合には抑制されるべきです。 ドキュメント言語は定義する各 ウィジェット に対して、 何を保持すべきかを指定する必要があります。

要素の振る舞いとセマンティクスはドキュメント言語によって定義されており、 このプロパティによって影響を受けることはありません。

逆に、要素の外観を変更しても、それによってその外観を持つ要素固有の セマンティクス、疑似クラス、イベントハンドラなどを取得することはありません。

7.3. コントロール固有のルール

このセクションの一部または全部は、 将来的に [HTML] 仕様に移動すべきかもしれません。

一部の要素では、特定のプロパティを設定すると appearance: auto が抑制されます。 例えば、appearance が auto であっても、 ボタンに border を設定すると ネイティブ外観が失われます。 これは auto の定義と矛盾するものではありません。 appearance: auto は UA がネイティブ外観を使用することを 許可する だけだからです。 相互運用性を高めるために、どの要素でどのプロパティがこの効果を持つか文書化すると良いでしょう。

UA スタイルシートに何を含める必要があるかを文書化すると良いでしょう。

7.3.1. 単一行テキスト入力コントロール

appearance が auto の場合、 単一行テキスト入力コントロールは [HTML] の <input type=text> のようにレンダリングされなければなりません：

• 内容はインライン方向で content edge までクリップされる

• 内容はブロック方向で padding edge までクリップされる

• 内容は垂直方向に中央揃えされる

• 内容は折り返されない

• text-overflow プロパティは、 overflow プロパティの値に関わらず適用される

付録 A. 謝辞

この付録は 参考情報 です。

この仕様は [CSS-UI-3] を基にしています。 この仕様は主に Tantek Çelik によって 1999 年から現在まで編集・執筆されました。 最初は Microsoft を代表して、次に招待専門家として、最近では Mozilla を代表して行われました。

以下の方々からのフィードバックと貢献に感謝します：Rossen Atanassov、Tab Atkins、L. David Baron、Bert Bos、Matthew Brealey、Rick Byers、Ada Chan、James Craig、Michael Cooper、Axel Dahmen、Michael Day、Micah Dubinko、Elika E.、Steve Falkenburg、Andrew Fedoniouk、Al Gilman、 Ian Hickson、Bjoern Hoehrmann、Alan Hogan、David Hyatt、Richard Ishida、Sho Kuwamoto、Yves Lafon、Stuart Langridge、Susan Lesch、Peter Linss、Kang-Hao Lu、Masayuki Nakano、Mats Palmgren、Brad Pettit、Chris Rebert、François Remy、Andrey Rybka、Simon Sapin、Alexander Savenkov、Sebastian Schnitzenbaumer、Lea Verou、Etan Wexler、David Woolley、Frank Yan、Boris Zbarsky、 および Domel に感謝します。

付録 B. 変更履歴

この付録は 参考情報 です。

2021年3月16日作業草案からの変更点 16 March 2021 Working Draft

いくつかの編集上の調整に加えて、以下の規範的な変更が行われました：

• pointer-events プロパティの定義を導入。
• cursor プロパティでサポートが必要な画像タイプを <url> だけでなく <url> および <url-set> に拡張。（より広範な <image> タイプのサポートも許可されますが任意です。）
• author origin にまだ値が存在する場合、revert-layer 後にネイティブ表示を無効化。
• スクロールコンテナ を参照し、overflow の visible 以外の値は含めず、clip も含むようにした。
• outline-width の計算済み値を ボーダー幅としてスナップ。
• slider-horizontal、square-button、push-button キーワードを <compat-auto> から削除。
• outline-color の invert 値を廃止。
• auto 値を outline-color に追加。
• outline-width が outline-style: auto のレンダリングに影響する可能性のある記述を削除。（Issue 9201 を参照）
• アウトラインが要素の ink overflow 領域 に寄与することを明確化。
• caret-animation プロパティを再導入。
• プロパティを無視する 意味を定義。
• （半）透明なアクセントカラーの動作を定義。
• outline-offset が outline ショートハンドに含まれないことを注記。
• base キーワードを appearance プロパティに追加。
• interactivity プロパティを追加。
• 行末のキャレットはオーバーフローしても表示されることを明確化。
• appearance: auto のボックスレンダリングを定義。
• アウトラインが角の形状に従うことを明確化。
• caret-* プロパティの適用範囲を明確化。
• cursor プロパティの構文を可読性向上のため整理。
• interest-delay プロパティとそのロングハンド interest-delay-start および interest-delay-end を追加。
• outline-color を <'border-top-color'> に関連付け、同プロパティへの値追加も適用されるように。
• outline-width が 0 の特別扱いを削除、 ただし outline-style が none または hidden の場合。(Issue 11494)

2020年1月24日ワーキングドラフトからの変更

いくつかの編集上の調整に加えて、以下の規範的な変更が行われました：

• appearance: button はボタンにのみ適用されるように変更。
• outline-width は outline-style が auto の場合、無視されることがある。
• トランスフォーム後もキャレットの表示を確実にする。
• resize: block および resize: inline を css-logical-1 から本仕様に移動。
• accent-color プロパティを導入。

2020年1月2日ワーキングドラフトからの変更

いくつかの編集上の調整に加えて、以下の規範的な変更が行われました：

• user-select が離散的にアニメーション可能であることを定義（不可ではなく）。
• appearance: button の適用範囲を制限し、元々ボタンでないウィジェットにボタン風の外観を与えないようにした。
• トランスフォームで縮小してもキャレットの可視性を保持する条項を追加。

2017年12月22日ワーキングドラフトからの変更

いくつかの編集上の調整に加えて、以下の規範的な変更が行われました：

• フォームコントロール固有のレンダリングルールの詳細を追加。
• text-overflow と匿名ブロックコンテナの相互作用を明確化。
• 全ての文書形式におけるハイパーリンクに pointer カーソルを要求。
• box-sizing と text-overflow プロパティをそれぞれ [CSS-SIZING-3] と [CSS-OVERFLOW-4] に移動。
• text カーソルが書字方向に合うことの要求を MAY から MUST に変更。
• appearance プロパティの定義を大幅に再構築し、既存のWebコンテンツとの互換性を確保。
• user-select: auto の論理を、計算値時ではなく使用値時に変更。
• 著者が cursor: pointer を使用する際の要件を明確化。

2015年9月22日 初公開ワーキングドラフトからの変更

いくつかの編集上の調整に加えて、以下の規範的な変更が行われました：

• user-select プロパティを導入。
• caret-animation プロパティを削除（使用例が知られていなかったため）。
• resize プロパティは、画像や動画を表す置換要素や iframe にも適用。
• text-overflow プロパティの文字列値および二重値をレベル3から本仕様に移動。
• 方向性フォーカスナビゲーションプロパティをレベル3からレベル4に移動。
• 安定した [CSS-UI-3] の内容を統合。

CSS UI Level 3 からの変更

• user-select プロパティを導入。
• 方向性フォーカスナビゲーションプロパティ nav-up, nav-down, nav-left, nav-right を追加。
• appearance プロパティを追加。
• resize: block と resize: inline を [CSS-LOGICAL-1] から本仕様に移動。
• accent-color プロパティを追加。
• interest-delay プロパティおよびロングハンドの interest-delay-start、interest-delay-end を追加。
• pointer-events プロパティを追加。
• cursor プロパティのサポート画像タイプを <url> から <url> と <url-set> まで拡張。
• invert 値を outline-color から削除。
• auto 値を outline-color に追加。
• caret-animation プロパティを追加。
• interactivity プロパティを追加。
• interest-delay プロパティおよびロングハンドの interest-delay-start、interest-delay-end を追加。
• outline-color が <'border-top-color'> を参照するようにした。これにより、このプロパティの値に対する追加も適用される。

付録C: プライバシーに関する考慮事項

この付録は 参考情報 です。

W3C TAG は、仕様の編集者が参考情報として回答できる 自己評価アンケート：セキュリティとプライバシー を作成中です。

考慮すべき質問 に基づく：

この仕様は個人を特定できる情報を扱いますか？

いいえ。

この仕様は高価値データを扱いますか？

いいえ。

この仕様はブラウズセッションを越えて持続するオリジンの新しい状態を導入しますか？

いいえ。

この仕様はウェブに持続的なクロスオリジン状態を公開しますか？

いいえ。

この仕様はオリジンが現在アクセスできない他のデータを公開しますか？

いいえ。

この仕様はオリジンにユーザーの位置情報へのアクセスを許可しますか？

いいえ。

この仕様はオリジンにユーザーのデバイス上のセンサーへのアクセスを許可しますか？

はい。

方向性フォーカスナビゲーションプロパティは、矢印キーなどのデバイスのキーボードナビゲーション入力機構への間接的なアクセスを許可します。

この仕様はオリジンにユーザーのローカル計算環境へのアクセスを許可しますか？

いいえ。

この仕様はオリジンに他のデバイスへのアクセスを許可しますか？

いいえ。

この仕様は一時的な識別子をウェブに公開しますか？

いいえ。

この仕様はファーストパーティとサードパーティの文脈での挙動を区別しますか？

いいえ。

ユーザーエージェントの「シークレットモード」での動作は？

特に異ならない。

この仕様はユーザーのローカルデバイスにデータを保持しますか？

いいえ。

付録D: セキュリティに関する考慮事項

この付録は 参考情報 です。

W3C TAG は、仕様の編集者が参考情報として回答できる 自己評価アンケート：セキュリティとプライバシー を作成中です。

考慮すべき質問 に基づく：

この仕様は新しいスクリプト実行/読み込みメカニズムを可能にしますか？

読み込みは「はい」、実行は「いいえ」。

cursor プロパティは <image> 値を受け入れ、これには読み込むURLを含む可能性があります。 これらはスクリプトを含む可能性のあるSVG文書であることがありますが、本仕様ではスクリプトを実行してはなりません。

この仕様はオリジンにユーザーエージェントのネイティブUIを制御させますか？

はい。

cursor および caret プロパティと サブプロパティ は、ページがユーザーエージェントのネイティブUIのカーソルおよびテキスト挿入キャレットの表示を変更できるようにします。 また、outline-style プロパティの auto 値（および outline ショートハンド）により、ページは任意の要素のネイティブフォーカスアウトライン表示を潜在的に行うことができます。

appearance プロパティは、著者がネイティブスタイルをオフにしてCSSベースのスタイリングに置き換えることも可能にします。

この仕様はデフォルトのセキュリティ特性を低下させますか？

いいえ。

付録E: HTML向けデフォルトスタイルシート追加

この付録は 参考情報 です。

HTMLフォームコントロールやいくつかの動的プレゼンテーション属性を表現するための、基本スタイルシートへの追加例：

:enabled:focus {
  outline: 2px inset;
}

button,
input[type=button],
input[type=reset],
input[type=submit],
input[type=checkbox],
input[type=radio],
textarea,
input,
input[type=text],
input[type=password],
input[type=image] {
  display: inline-block;
}

input[type=button],
input[type=reset],
input[type=submit],
input[type=checkbox],
input[type=radio],
input,
input[type=text],
input[type=password],
input[type=image] {
  white-space: nowrap;
}

button {
  /* BUTTONタグ特有の空白処理 */
  white-space:normal;
}

input[type=reset]:lang(en) {
  /* HTML input type=resetボタンのデフォルト内容（言語ごと） */
  content: "Reset";
}

input[type=submit]:lang(en) {
  /* HTML input type=submitボタンのデフォルト内容（言語ごと） */
  content: "Submit";
}

/* 他の言語については、UAは言語固有のReset/Submitルールを使用すべき */

input[type=button],
input[type=reset][value],
input[type=submit][value] {
  /* HTML「input」ボタンのテキスト内容/ラベル */
  content: attr(value);
}

textarea {
  /* TEXTAREAタグ特有の空白処理 */
  white-space:pre-wrap;
  resize: both;
}

input[type=hidden] {
  /* HTML hiddenテキストフィールドの表示 */
  display: none !important;
}

input[type=image] {
  content: attr(src,url);
  border: none;
}

select[size] {
  /* HTML4/XHTML1 <select> sizeが1より大きい場合のリスト表示 */
  display: inline-block;
  height: attr(size,em);
}

select,select[size=1] {
  /* HTML4/XHTML1 <select> sizeが指定なし、または1の場合 - ポップアップメニュー */
  display: inline-block;
  height: 1em;
  overflow: hidden;
}

select[size]:active {
  /* sizeが1より大きいHTML <select> のアクティブ表示 */
  display: inline-block;
}

optgroup, option {
  display: block;
  white-space: nowrap;
}

optgroup[label],option[label] {
  content: attr(label);
}

option[selected]::before {
  display: inline;
  content: check;
}

/* FRAMEのリサイズは本仕様で直接扱われないが、以下は合理的な挙動の近似を提供する */
/*
frame { resize:both }
frame[noresize] { resize:none }
*/