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] を置き換え、それ自体も以下を置き換えました：

• セクション18.1、セクション18.4、 そして CSS 2.1付録E に定義されているアウトラインの積み重ねに関する情報 [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 §4.1 Overflow Ellipsis: the text-overflow property に移動されました。

2.1. 値の定義

この仕様は、CSS21 の [CSS21] におけるCSSプロパティ定義規則に従い、[CSS-VALUES-3] の値定義構文を用いています。 この仕様で定義されていない値型はCSS Values & Units [CSS-VALUES-3] で定義されています。 他のCSSモジュールとの組み合わせで、これらの値型の定義が拡張される場合があります。

各プロパティ定義で示されている値に加えて、 この仕様で定義される全てのプロパティは CSS全体キーワードも値として受け付けます。 可読性のため、明示的には繰り返しません。

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

スタイルシート作成者は、ボタンやアクティブなフォームフィールド、イメージマップなどの視覚的オブジェクトを強調表示するためにアウトラインを作成したい場合があります。アウトラインは、以下の点でボーダーと異なります：

1. アウトラインは空間を占有しません。
2. アウトラインは非矩形の場合があります。
3. UA（ユーザーエージェント）は、:focus 状態の要素にアウトラインを描画することがよくあります。

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

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

キーボードユーザー、特に障害のある方などページと他の方法で インタラクションできない方は、:focus 状態の要素にアウトラインが見えることに依存しています。 したがって、著者は代替のハイライト機構を提供しない限り、そうした要素のアウトラインを不可視にしてはなりません。

アウトラインにtransformを適用した場合の描画はCSS3-UIでは明示的に未定義です。

3.1. アウトラインショートハンド: outline プロパティ

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

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

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

outlineプロパティで作成されたアウトラインは、ボックスの「上」に描画されます。 つまり、アウトラインは常に最前面に表示され、 ボックスや他のボックスの位置やサイズには影響しません。 したがって、アウトラインの表示や非表示はリフローを引き起こしません。

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

アウトラインの各部分は、一部の辺が開いている（インライン要素のボーダーが行分割される場合のように）状態ではなく、 全てが完全に連結されているべきです。

アウトラインの部分は矩形である必要はありません。 アウトラインが border edge に沿う場合、 border-radius のカーブに従うべきです。

アウトラインの位置は、子孫ボックスによって影響される場合があります。

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

注: この仕様ではアウトラインの正確な位置や形状は定義していませんが、一般的にボーダーボックスのすぐ外側に描画されます。

outline-width プロパティは border-width（CSS Backgrounds 3 §3.3 Line Thickness: the border-width properties）と同じ値を受け付けます。

<outline-line-style> は <line-style> （CSS Backgrounds 3 §3.2 Line Patterns: the border-style properties）と同じ意味で同じ値を受け付けますが、 hidden はアウトラインスタイルとしては使用できません。 さらに、outline-style プロパティは auto の値も受け付けます。 auto の値を指定すると、ユーザーエージェントがカスタムアウトラインスタイルを描画できます。 通常はプラットフォームのユーザーインターフェイスのデフォルトや、CSSで詳細に記述できないリッチなスタイル （例えば、半透明の外側ピクセルで光って見える丸みのあるアウトラインなど）が描画されます。 したがって、この仕様では outline-color や outline-width が auto スタイルのアウトライン描画時に どのように反映・使用されるか（もし使用される場合）が定義されていません。 ユーザーエージェントは auto を solid として扱っても構いません。

outline-color プロパティは 全ての色と、キーワード invert を受け付けます。invert は画面上のピクセルの色反転を行うことが期待されています。 これは、背景色に関係なくフォーカス枠が見えるようにする一般的な手法です。

準拠したユーザーエージェントは、画面上のピクセルの色反転をサポートしないプラットフォームでは invert の値を無視しても構いません。

もしユーザーエージェントが invert の値をサポートしない場合、 その値をパース時に拒否しなければならず、 outline-color プロパティの初期値は currentColor キーワードになります。

outline プロパティはショートハンドプロパティであり、 outline-style, outline-width, outline-color の3つすべてを設定します。

注: アウトラインは全ての辺で同じになります。 ボーダーとは異なり、outline-top や outline-left などのプロパティはありません。

この仕様では、複数のアウトラインが重なって描画される場合や、他の要素の背後に部分的に隠れているボックスのアウトラインがどのように描画されるかは定義していません。

button { outline: thick solid }

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

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

注: アウトラインはレイアウトに影響しないため （つまり、ボックスモデルにスペースは確保されません）、 ページ上の他の要素と重なる場合があります。

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は ブロック軸 のみ調整できる 一方向リサイズ機構を表示し、 要素の block size のみ調整できます。

inline

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

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

注: リサイズ機構はスクロール機構とは異なり、UAのズーム機構とも関係ありません。 スクロール機構は、ユーザーが要素のコンテンツのどの部分を表示するか決定できるものです。 リサイズ機構は、ユーザーが要素のサイズ自体を決定できるものです。

resize プロパティは、 算出された overflow の値が visible 以外である要素に適用されます。 UAは、overflow プロパティの値に関係なく、次にも適用できます:

• 画像や動画などを表す置換要素 img, video, picture, svg, object, canvas など。
• iframe 要素。

resize プロパティの生成されたコンテンツへの効果は未定義です。 実装では resize プロパティを生成されたコンテンツに適用すべきではありません。

注: resize プロパティは、 将来的に Interface CSSPseudoElement の実装があれば生成されたコンテンツにも適用される場合があります。

ユーザーが要素をリサイズした場合、 ユーザーエージェントは width と height のプロパティを ユーザーが指定したサイズのpx単位長値に設定し、 要素の style属性DOMに既存の宣言があればそれを置き換えます。 !important があっても置き換えます。

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

リサイズの方向（要素の左上を変更するか右下を変更するかなど）は、 要素が絶対位置指定かどうか、right や bottom プロパティで位置指定されているか、要素の言語が右から左かなど、 多くのCSSレイアウト要因によって変わります。 UAは、リサイズの方向（CSSレイアウトで決定されるもの）と、プラットフォームの慣習・制約の両方を考慮して、 リサイズ機構をユーザーにどう伝えるか決定すべきです。

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

注: ユーザーが要素をリサイズしようとしても、!important のカスケード宣言により style属性の width や height のプロパティが DOM上で上書きされ、無視される場合があります。

要素の 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 カーブ半径: border-radius プロパティ に従い、border edge は border-radius の影響を受けます。

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

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

ユーザーエージェントは、スクロールバーやリサイズハンドルなどのネイティブUIコントロール、 またはフォーム要素のUA固有実装で使われるその他のネイティブUIウィジェット上では cursor プロパティを無視しても構いません。 また、UAは cursor プロパティを無視し、 ページが応答していないときのビジーカーソルや、テキスト選択中のテキストカーソルなど、 UAインターフェイスのさまざまな状態を示すカーソルを表示することができます。

注: [HTML] では イメージマップの特別な扱い が cursor プロパティに対して定義されています。

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

画像カーソル

<url>

ユーザーエージェントはURIで指定されたリソースからカーソル画像を取得します。 リスト内の最初のカーソルを処理できない場合、2番目以降を順次処理します。 すべてのユーザー定義カーソルを処理できない場合、リスト末尾のキーワードカーソルを使用します。 準拠UAは <url> の代わりに、 <image> （上位互換）をサポートしても構いません。

UAは以下の画像ファイル形式をサポートしなければなりません：

• PNG（[PNG]で定義）
• SVG（[SVG11]で定義）、 セキュア静的モード [SVG2]、 かつ natural size がある場合
• その他UAが他プロパティ（例えば background-image）でサポートする非アニメーション画像形式

加えて、UAは以下の画像ファイル形式をサポートすべきです：

• SVG（[SVG11]で定義）、 セキュアアニメーションモード [SVG2]、 かつ natural size がある場合
• その他UAが他プロパティ（例えば background-image）でサポートするアニメーション画像形式

UAは追加のファイル形式（SVG含む）もサポートしても構いません。 [SVG11]で定義されるものや、 セキュア静的・アニメーションモード [SVG2] など、natural size がなくてもよいです。

注: CSSワーキンググループは元々すべてのSVG（natural size有無問わず）を必須とする意図でしたが、 実装が不足していたため必須からオプションに変更されました。

注: この仕様執筆時点（2015年春）で、一般的なデスクトップブラウザがカーソルでサポートするファイル形式は Microsoft設計の.icoと.curのみです。レガシーコンテンツとの互換性のため、 これらの形式をサポートすることが推奨されますが、オープンスペックがないため これらの形式について規範的要件は課せません。 詳細は Wikipedia を参照してください。

default object size（カーソル画像の既定サイズ）は UAのOS上の一般的なカーソルサイズに基づくべきUA定義サイズです。

concrete object size（実サイズ）は default sizing algorithm で決定されます。 OSが一定サイズ以上のカーソル描画に非対応の場合、 それ以上のサイズはOSの制約内に収まるよう縮小し、 可能なら画像の natural aspect ratio を維持します。

オプションの <x> と <y> 座標は、画像内のポインタ位置（ホットスポット）を特定します。

<x>

<y>

どちらも <number> です。 カーソルの座標系（左上基準）で指し示す位置のx座標とy座標です。

注: 画像型ごとの座標系の定義は本仕様では定めず、[CSS4-IMAGES] に委ねます。

値が指定されていなければ、画像リソース内で定義されたホットスポットが使われます。 両方未指定かつカーソル画像にホットスポット定義がなければ "0 0" が指定されたものとみなします。

座標が画像外になる場合、独立してクランプして収める必要があります。

汎用カーソル

auto

UAは状況に応じて表示するカーソルを決定します。 具体的には auto は、選択可能なテキストや編集可能要素上では text として、その他ではdefaultとして振る舞います。

注: 選択可能テキストや編集要素上では text同様、 要素の writing mode に応じて縦・横のテキストカーソルを使い、transformや他の効果も考慮してよいです。

default

プラットフォーム依存のデフォルトカーソル。 多くは矢印で描画されます。

none

その要素にはカーソルが表示されません。

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

context-menu

カーソル下のオブジェクトにコンテキストメニューが利用可能。 多くは小さなメニューアイコン付き矢印で描画されます。

help

カーソル下のオブジェクトにヘルプが利用可能。 多くはクエスチョンマークや吹き出しで描画されます。

pointer

カーソルはリンクを示すポインターです。 多くは人差し指を伸ばした手の甲で描かれます。

特に指定がない限り、 UAは全ての対応文書フォーマットのハイパーリンクに cursor: pointer を UAスタイルシートで 通常（!important なし）宣言で適用しなければなりません。

著者はリンクに pointer を使うべきで、他の対話要素にも使っても構いません。

progress

進行状況インジケーター。処理中だが wait とは違いユーザー操作可能。 多くはスピニングアイコンや時計付き矢印などで描画されます。

wait

プログラムがビジー状態でユーザーが待つ必要があることを示す。 多くは時計や砂時計で描画されます。

選択カーソル

cell

セルやセル集合が選択可能であることを示す。 多くは中央に点のある太いプラス記号で描画されます。

crosshair

単純な十字線（例: "+"記号のような短い線分）。 2次元ビットマップ選択モードなどで使われます。

text

選択可能なテキストを示す。多くはI字型（I-beam）で描画。 UAは横書き要素では縦I字カーソル、縦書き要素では横I字カーソル （vertical-text キーワードと同じ）を自動表示しなければならず、 transform（[CSS-TRANSFORMS-1]）やSVG2のパス上テキスト （SVG 2 §11.8 Text on a path）も考慮してよいです。 角度付きI字カーソルも任意で描画できます。

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 に対応します。

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

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

文書の キャンバス は、文書が描画される無限の表面です [CSS21]。 キャンバスに対応する要素は存在しないため、 どの要素上でもない時にカーソルをスタイリングできるよう、 キャンバスのカーソルはルート要素のカーソルを再利用します。 ただし、ルート要素にボックスが生成されない場合 （例: ルート要素が display: none の場合）、 キャンバスのカーソルはプラットフォーム依存のデフォルトカーソルになります。

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

5.2. 挿入カーソル

5.2.1. 挿入カーソルの色指定: caret-color プロパティ

auto

ユーザーエージェントは currentColor を使用するべきです。 周囲のコンテンツとの視認性やコントラストを確保するため、caretの色を自動的に調整しても構いません。 例えば currentColor、背景、影などを考慮する場合があります。

注: caret-shape が block の場合は、 より良い視認性・コントラストのために currentColor 以外のUAが決定した色が推奨されます。

<color>

挿入カーソルの色を指定した色にします。

caretは、ユーザーがテキスト（または他のコンテンツ）を挿入する際の挿入ポイントを示す可視インジケータです。このプロパティは、その可視インジケータの色を制御します。

注: UAによっては「カーソル」とみなされるものが他にもあります。 例えば、一部UAでは「ナビゲーションカーソル」を表示可能で、これは挿入カーソルに似ていますが、非編集テキスト内で移動でき、機能としてはカーソルです。 一方、cursor プロパティが auto のときや cursor プロパティが text や vertical-text の要素上で表示されるカーソル画像は caretに似ていてもカーソルであり、caretそのものではありません。

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

このプロパティでは、テキスト挿入カーソルの形状を指定できます。

この定義において、character は [UAX29] で定義される 拡張書記素クラスタ を指し、 visible character は非零のadvance measureを持つ文字を意味します。

auto

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

bar

UAは、テキスト挿入カーソルを挿入ポイントに細いバーとして描画しなければなりません。 これは character の間・前・後に現れますが、文字上には現れません。 インライン進行方向に垂直で描画すべきですが、イタリックや斜体テキストでは斜めに描画しても構いません。

block

UAは、テキスト挿入カーソルを挿入ポイントの次の visible character を重ねる矩形として描画しなければなりません。 挿入ポイントの後に visible character がなければ、最後の visible character の後にcaretを描画します。 イタリックや斜体テキストでは斜めの矩形でも構いません。

underscore

UAは、テキスト挿入カーソルを挿入ポイントの次の under（[CSS-WRITING-MODES-3] で定義）に細い線として描画しなければなりません。 挿入ポイントの後に visible character がなければ、最後の visible character の後にcaretを描画します。

block や underscore caretの幅は、挿入ポイントの次の visible character のadvance measureか、次の visible character がない・判定困難な場合は 1ch になります。

caretの向きや見た目を決定する際、UAは writing mode [CSS-WRITING-MODES-3] を考慮し、[CSS-TRANSFORMS-1] の変形も適用しなければなりません。 編集テキストがパス上にレイアウトされている場合（SVGの textPath 要素など）も考慮すべきです。

bar や underscore caret、および同様の描画となる auto caretの太さは、ユーザーエージェントが決定します。 可能であれば、transform [CSS-TRANSFORMS-1] などでスケールダウンされてもcaretが視認可能な太さを選ぶべきです。

caretの重なり順は以下の制約下で未定義とします：

• caretは要素の背景によって隠れてはなりません。
• UAは block caretを重ねた文字がcaretによって隠れないように描画しなければなりません。

.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.3. 挿入カーソルのショートハンド: caret

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

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が全ウィンドウをターゲットにすることを示します。

方向ナビゲーションキーを持つデバイス向けUAは、4つのnav-*方向ナビゲーションプロパティ（nav-up, nav-right, nav-down, nav-left）に従いフォーカスを移動します。 本仕様では、どのキーが方向ナビゲーションキーかは定義しません。

注: 一般的なPCのキーボードには4つの矢印キーがあります。 一つの実装例として、これら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 プロパティを使用してはなりません。

ユーザーは、悪質なサイトやレガシー実装への回避策が必要な場合のみ 修復目的で 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 や page-margin boxes にも適用すべきか？ auto の used value も 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 の編集可能な子孫要素で used value がどうなるか制約すべきか？ セマンティクスは明確でない。 例えば none を text にマッピングすべきか、 あるいは全ての値を text にすべきか？

auto

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

注: この非継承プロパティで初期値が auto で、used value が親要素によって決まるという特殊な組み合わせにより、 実質的な選択的継承が可能になります。 これは当初IEによって提案され、contain 値が継承されないという挙動を導入するためでした。

text

要素は選択に制約を加えません。

none

UAはこの要素で選択を開始できないようにしなければなりません。

この要素外で開始した選択は、この要素で終わってはならず、 そのような選択をユーザーが作ろうとした場合、UAは選択範囲を要素境界で終了させなければなりません。

注: 執筆時点では、実験的実装ごとに挙動が異なります。 Firefoxは本仕様通り。 ChromeとSafariはほぼ同様だが、要素の後から選択を始めてさかのぼって要素に入る場合のみ仕様通りで、 要素の前から始めて中に入る場合は all として要素全体が選択されます。 IEはこの要素外からの選択が要素内に入ることを制限しません。 また、ChromeとSafariでは user-select: none 内で選択を開始し、外で終わらせる場合、要素境界から終点まで選択が作られます。 FirefoxとInternet Explorerは本仕様通り選択自体が作られません。

ただし、この要素の子孫で used value が user-select で none 以外の場合、 それら子孫内で選択開始と終了があれば選択可能です。

UAはこの要素をまたぐ選択は許可し、要素自体は選択範囲から除外しなければなりません。 ただし複数範囲選択をサポートしないUAはこの要素を含めてもよいです。 子孫で used value が user-select で none 以外の場合、 それら子孫は選択範囲に含める必要があります。本仕様はクリップボードの挙動について規範的要求はありませんが、 UAはコピーする内容と視覚的選択範囲が一致するようにすることが推奨されます。 未選択のテキストがコピーされたり、逆に選択されているのにコピーされないとユーザーに混乱を招きます。

user-select が none の要素内で選択開始（クリックやドラッグ）しても、既存の選択解除や影響を与えてはなりません。

user-select はコピー保護ではなくUI利便性のための仕組みなので、 UAは user-select が none でも 明示的にテキスト選択できる代替手段を提供しても構いません。

注: none はコピー保護機構ではなく、著者がUI要素の選択を無効化してユーザーが必要なコンテンツを選びやすくするためのものです。 UAはこれを回避する手段を提供することが許され、非対応UAやユーザースタイルシートで無効化も容易です。 むしろ選択性を制約しすぎることでユーザーの利便性が損なわれるため、バリデータやデバッガ等は誤用や濫用を検出・警告すべきです。

著者はユーザーに不必要な制約をかけないよう注意すべきです。 例えば、ルート要素に user-select: none を設定し、選択可能な一部の要素だけ制限解除すると 以下のような不便が生じます：

• 空白部分をクリックして選択解除できなくなる

• 選択可能にすべき箇所の見落としが生じる

• 後から追加した要素が選択不可のままになる可能性

• ユーザーが辞書や翻訳ツール、検索等で主要コンテンツ以外のテキストを選択したい場合がある

むしろ誤選択が発生しやすい要素のみ user-select: none を適用し、 それ以外は選択可能なままにしておく方がユーザーの利便性を損ないません。

contain

UAはこの要素内で開始した選択が外に拡張されないようにしなければなりません。

この要素外で開始した選択は、この要素で終わってはならず、 そのような選択をユーザーが作ろうとした場合、UAは選択範囲を要素境界で終了させなければなりません。

UAはこの要素をまたぐ選択は許可し、その選択には要素の内容が含まれなければなりません。

注: 執筆時点では、実験的実装ごとに外からの選択や要素内への選択について挙動が異なります。 多くのブラウザーで contain を明示的にサポートしなくても textarea や contenteditable要素で挙動を観察できます。

注: この機能はIEで user-select: element として実験的に導入されたものです。

all

要素の内容は一括選択されなければなりません： 要素の一部が選択範囲に含まれる場合、要素全体（子孫含む）を選択範囲に含める必要があります。 要素が選択され、親要素の used value が user-select で all の場合、 再帰的に親も選択範囲に含めなければなりません。

子孫で used value が user-select で 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も存在し、 互換性には問題がないため、本仕様は柔軟性を認めます。

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

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

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

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

auto

UAが選択する色で、可能ならプラットフォームの アクセントカラー に合わせるべきです。

<color>

アクセントカラー として使う色を指定します。

UAは指定された accent-color で、コントロールのうちアクセントカラーが使われる部分を描画するべきです。 UAはコントラスト（可読性）を維持するために、色の輝度や明度を調整したり、 他の箇所の色を置換（例：重ねたグリフの 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		ダークモード背景に合わせてコントラスト調整したチェック状態の前景アクセントカラー。

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

文書中のほとんどの要素の外観はCSSで完全に制御できますが、ウィジェットは通常、UAがホストOSのネイティブUIコントロールを使って描画するため、CSSで再現・スタイリングできません。

この仕様での ウィジェット とは、ネイティブ外観 を持つ要素を指します。 これは、ホストOSやプラットフォームのネイティブウィジェットやコントロールのように描画されるか、CSSで表現できない外観や操作性を持つことを意味します。 どの要素が ネイティブ外観 を持つかは、ホスト言語（例: HTML [HTML]）が決定します。

この仕様は appearance プロパティを導入し、 この挙動の一部を制御できるようにします。 特に、appearance: none を使うことで ネイティブ外観 を持つ ウィジェットの外観を抑制し、 CSSで再スタイリングできるようにします。

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

none

要素は通常のCSSルールに従って描画されます。 ウィジェット以外の置換要素は影響を受けず、引き続き置換要素です。ウィジェットは ネイティブ外観 を持たないこと。 詳細は § 7.2.1 外観の装飾的側面への影響 および § 7.2.2 外観のセマンティック側面への影響 を参照。

auto

ウィジェットは ネイティブ外観 を持ってよい。

ウィジェット以外の要素は none を指定した場合と同じ描画になります。

textfield

input 要素で type 属性がSearch状態なら、 通常のテキスト入力ウィジェットとして描画されます（Text状態と同様）。

それ以外の要素では auto と同じ効果です。

menulist-button

ドロップダウンボックス select 要素では、ドロップダウンボックス（ドロップダウンボタン付き）として描画されますが、 必ずしもOSのネイティブコントロールを使う必要はありません。 こうした要素では、color、background-color、border（auto の場合は無視されることがある）などは無視されません。

それ以外の要素では auto と同じ効果です。

<compat-auto>

これらは以前の非標準版プロパティ用の互換性維持値です。 すべて auto と同じ効果です。

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

auto が広くサポートされたら、そちらの使用を推奨。

Web互換に不要な値はこのリストから除外、必要な値が漏れていれば追加すべき。

互換性のため、これらの値の一部を任意要素で有効にすべき場合や、ウィジェットに副作用を持たせるべき場合があるかもしれません。

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;
}

算出値が ウィジェット で auto、textfield、menulist-button、 または <compat-auto> の値のいずれかの場合、 UAは本来の外観を維持するため、またはその外観で意味がない場合、 一部CSSプロパティを無視してもよいですが、以下のプロパティは無視してはなりません：

• appearance
• display（内部display型は無視してよい）
• visibility
• position
• top
• right
• bottom
• left
• float
• clear
• margin と関連ロングハンドプロパティ
• unicode-bidi
• direction
• cursor
• z-index

他に追加すべきプロパティはあるか？削除すべきか？無視してよいものをホワイトリスト化するべきか？いずれにせよ、UAは ウィジェット 描画時に一部プロパティを無視するため、本仕様で何らかの指針が必要。

レガシーコンテンツ互換のため、UAは -webkit-appearance を レガシー名エイリアス として appearance のエイリアスとしてもサポートしなければなりません。

7.2.1. appearance が要素の装飾的側面に与える影響

ウィジェット のCSSスタイルルールによらない全ての装飾的視覚要素は、 appearance によって外観が変更された場合、抑制されなければなりません。 これはUAの内部表現が複数要素や疑似要素の組み合わせで構成されている場合でも同様です。

UAは、ウィジェット に appearance が none の場合、 認識しやすい形状を与えるようにUAスタイルシートでスタイルルールを付与すべきです。

注: 著者は意図したスタイリングを実現するため、これらUAスタイルルールを上書きする必要がある場合があります。

7.2.2. appearance が要素のセマンティック側面に与える影響

UAは、ウィジェット の元のセマンティクスで操作に必要な側面は保持しなければなりません。 見た目が変わっても、ウィジェット の操作が可能な限り許容されます。 ウィジェット の状態を観察するために必要なだけで、操作には不要な側面は、 同じ情報が通常のCSSで伝えられるなら抑制すべきです。 ドキュメント言語は、それぞれが定義する ウィジェット について、 保持すべき内容を指定するものとします。

要素の挙動やセマンティクスはドキュメント言語で定義されており、このプロパティによって影響されません。

逆に、要素の appearance を変更しても、 そのappearanceで典型的なセマンティクス・疑似クラス・イベントハンドラ等を獲得してはなりません。

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

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

一部の要素では、特定プロパティを設定すると appearance: auto が阻害されます。 例えば appearance が auto の場合でも、 ボタンに border を設定するとネイティブ外観が失われます。 これは auto の定義と矛盾しませんが、 appearance: auto はUAがネイティブ外観を使うことが「できる」だけであり、 より高い相互運用性のためには、 どの要素のどのプロパティにこの効果があるか文書化すべきです。

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

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

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

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

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

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

• 内容は折り返されない

• text-overflow プロパティは overflow プロパティの値に関係なく適用される

付録A. 謝辞

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

この仕様は [CSS-UI-3] に基づいており、 編集・執筆の大部分は 1999年から現在までTantek Çelikによるもので、 当初は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. 変更点

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

2020年1月24日作業草案 からの変更点

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

• appearance: button をボタンのみに適用されるよう変更
• outline-style が auto の場合、outline-width を無視できるように
• transform適用時でもcaretの視認性を担保
• resize: block および resize: inline を css-logical-1 から本仕様へ移動
• accent-color プロパティ導入

2020年1月2日作業草案 からの変更点

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

• user-select が「非アニメーション」から「離散アニメーション可能」に
• appearance: button の適用範囲を制限し、 元々ボタンでないウィジェットにボタン風外観を与えられなくした
• transformでスケールダウンしてもcaretの視認性が保たれるよう説明追加

2017年12月22日作業草案 からの変更点

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

• フォームコントロール固有の描画ルールを詳細化
• text-overflow と匿名ブロックコンテナの関係を明確化
• 全ドキュメント形式のハイパーリンクに pointerカーソルを義務化
• box-sizing と text-overflow を [CSS-SIZING-3] と [CSS-OVERFLOW-4] にそれぞれ移動
• textカーソルのwriting-mode準拠性を MAY から MUST に変更
• appearanceプロパティの定義を大幅に再設計し、既存Webコンテンツとの互換性を確保
• appearance: auto の値が算出値時ではなくused value時に色々な値にマッピングされるよう変更
• cursor: pointer の著者要件明確化

2015年9月22日 初公開草案 からの変更点

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

• caret-animation プロパティを削除 必要性が証明されれば今後再導入される可能性あり
• resize プロパティが画像・動画等の置換要素やiframeにも適用されるように
• text-overflow プロパティの文字列値・二重値を本仕様に移動
• 方向フォーカスナビゲーションプロパティをlevel 3からlevel 4へ移動
• 安定した [CSS-UI-3] の内容を統合

付録C. セキュリティとプライバシーの考慮事項

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

W3C TAGでは仕様編集者向けの セキュリティ・プライバシー自己点検質問票 を作成中です。

検討すべき質問 に従い：

この仕様は個人識別情報を扱いますか？

いいえ。

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

いいえ。

この仕様はoriginごとにセッションをまたいで持続する新しい状態を導入しますか？

いいえ。

この仕様は永続的かつクロスオリジンな状態をWebに公開しますか？

いいえ。

この仕様はoriginが現在アクセスできない他のデータにアクセス可能にしますか？

いいえ。

この仕様は新しいスクリプト実行/ロード機構を導入しますか？

ロードについてははい、実行についてはいいえ。

cursor プロパティは <image> 値を受け付け、URLロードを伴う場合があります。 これにはスクリプトを含む可能性のあるSVG文書も含まれますが、本仕様ではスクリプトの実行を禁止しています。

この仕様はoriginがユーザーの位置情報にアクセスできるようにしますか？

いいえ。

この仕様はoriginがユーザーのデバイスのセンサーにアクセスできるようにしますか？

はい。

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

この仕様はoriginがユーザーのローカルコンピューティング環境の側面にアクセスできるようにしますか？

いいえ。

この仕様はoriginが他のデバイスにアクセスできるようにしますか？

いいえ。

この仕様はoriginがUAのネイティブUIの一部を制御できるようにしますか？

はい。

cursor、caret プロパティおよび サブプロパティによって、 UAのネイティブUI上のカーソルやテキスト挿入カーソルの表示をページで変更できます。 また outline-style プロパティの auto 値 （および outline のショートハンド）により、 任意の要素にネイティブ風のフォーカスアウトラインを表示することも可能です。

appearance プロパティも、ネイティブスタイルを無効化しCSSによるスタイリングに置き換えることができます。

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

いいえ。

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

いいえ。

この仕様はUAの「シークレット」モードでどのように動作すべきですか？

通常通りです。

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

いいえ。

この仕様は「セキュリティの考慮事項」および「プライバシーの考慮事項」セクションを持ちますか？

はい。

この仕様はデフォルトのセキュリティ特性をダウングレード可能としますか？

いいえ。

付録D. 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: "リセット";
}

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

/* 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 隠しテキストフィールドの外観 */
  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 未指定または size=1 - ポップアップメニュー */
  display: inline-block;
  height: 1em;
  overflow: hidden;
}

select[size]:active {
  /* アクティブな HTML <select>  size>1 - アクティブリスト外観 */
  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 }

*/