CSS 基本ユーザーインターフェイスモジュール レベル3 (CSS3 UI)

1. イントロダクション

このモジュールでは、ユーザーインターフェイス関連のプロパティと値をスタイル設定するためのCSSプロパティについて説明します。

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

この作業ドラフトは、それらを取り入れ、拡張し、置き換えます。

1.1. 目的

この仕様の目的は次の目標を達成することです:

• CSS2.1におけるユーザーインターフェイス機能を拡張する。
• HTMLの他の動的プレゼンテーション関連機能を補強または置き換える追加のCSSメカニズムを提供する。

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

この文書では、以前の仕様には存在しなかった新機能を定義します。 さらに、以下を置き換え、上書きします:

• セクション18.1、セクション18.4、 およびカスケーディングスタイルシートレベル2、改訂版1の付録Eで定義されたアウトラインの積み重ねに関する情報 [CSS2]
• CSS3のユーザーインターフェイス（2000年2月16日）

注: プロパティ定義テーブルのセマンティクスは、最初にカスケーディングスタイルシート レベル2 改訂版1 (CSS2.1) の仕様 §property-defsで導入されました。 より最新の定義は、[css-transitions-1]、[css-values-3]、 および[css-cascade-4]を参照してください。 読者の利便性のために、 この仕様では関連する箇所に直接リンクを提供しています。

3. ボックスモデルの追加

3.1. ボックスモデルの変更：box-sizing プロパティ

content-box

これはCSS2.1で指定されたwidthとheightの挙動です。 指定されたwidthおよびheight（とそれぞれのmin/maxプロパティ）は、 要素のコンテンツボックスの幅と高さにそれぞれ適用されます。 要素のpaddingとborderは、指定されたwidthとheightの外側にレイアウト・描画されます。

border-box

この要素のwidthおよびheight（およびそれぞれのmin/maxプロパティ）のlengthやpercentage値は、要素のボーダーボックスを決定します。 つまり、要素に指定されたpaddingやborderは、この指定されたwidthとheightの内側にレイアウト・描画されます。 コンテンツの幅と高さは、指定値から各辺のborderとpaddingの幅を引いて計算されます。 コンテンツの幅と高さは負になることはありません（[CSS2]、セクション10.2）ので、この計算結果は0未満になりません。 例えばgetComputedStyle()で取得できるused値も、ボーダーボックスを参照します。

注: これは、従来のHTMLユーザーエージェントがreplaced要素やinput要素に対して一般的に実装していたwidthとheightの挙動です。

注: lengthやpercentage値と異なり、 auto値のwidthや heightプロパティ （および後の仕様で導入された他のキーワード値も、特に指定がない限り） はbox-sizingプロパティの影響を受けず、 常にコンテンツボックスのサイズを設定します。

次の用語は、box-sizingの算出値に応じて定義が異なります：

[CSS2]のビジュアルフォーマットモデルの詳細は、box-sizing: content-boxを前提に記述されています。すべてのbox-sizing値に対する挙動を明確にするため、次の補足を行います：

1. 10.3.3の以下のフレーズ内、2つ目のwidthは、content widthとして解釈されます：If width is not auto and border-left-width + padding-left + width + [...]
2. 10.3.7では、以下の式内のwidthはcontent widthとして解釈されます：left + margin-left + border-left-width + padding-left + width + [...]
3. 10.4では、width、 height、min-width、max-width、min-heightおよびmax-heightはそれぞれ、以下の語として解釈されます： content width、content height、最小内側幅、最大内側幅、最小内側高さおよび最大内側高さ。
   1. 暫定使用幅は次のように計算される [...]
   2. 暫定使用幅がmax-widthより大きい場合、上記の規則を再度適用するが、今回はmax-widthの算出値をwidthの算出値として使用する。
   3. 結果の幅がmin-widthより小さい場合、上記の規則を再度適用するが、今回はmin-widthの値をwidthの算出値として使用する。
   4. 次の表から、適切な制約違反に対する解決済みのheightとwidth値を選択する。max-widthとmax-heightはmax(min, max)として選択し、min ≤ maxが成立するようにする。この表内のwとhはwidthとheightの計算結果を表す [...]
   5. 表内でこれらの語が使われている全ての場合
   6. 次に、上記「幅とマージンの算出」の規則を、widthがこの値として算出されたかのように適用する。
4. 10.6.4では、height は次の式内でcontent heightとして解釈されます：top + margin-top + border-top-width + padding-top + height + [...]
5. 10.7では、width、 height、min-heightおよびmax-heightはそれぞれ、以下の語として解釈されます： content width、content height、最小内側高さおよび最大内側高さ。
   1. 暫定使用高さは次のように計算される [...]
   2. この暫定高さがmax-heightより大きい場合、上記の規則を再度適用するが、今回はmax-heightの値をheightの算出値として使用する。
   3. 結果の高さがmin-heightより小さい場合、上記の規則を再度適用するが、今回はmin-heightの値をheightの算出値として使用する。
   4. [...] 上記「最小幅と最大幅」のアルゴリズムを使って使用幅と使用高さを求め、さらに「高さとマージンの算出」の規則を、得られた幅と高さが算出値であるかのように適用する。

div.container {
  width:38em;
  border:1em solid black;
}

div.split {
  box-sizing:border-box;
  width:50%;
  border:1em silver ridge;
  float:left;
}

<div class="container">
<div class="split">このdivは左半分を占めます。</div>
<div class="split">このdivは右半分を占めます。</div>
</div>

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

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

1. アウトラインはスペースを占有しません。
2. アウトラインは非矩形である場合があります。
3. UAは、:focus状態の要素にアウトラインを表示することがよくあります。

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

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

キーボードユーザー、特に障害を持つ方などが他の方法でページ操作できない場合、 :focus状態の要素にアウトラインが表示されることに依存しています。 そのため、アウトラインを不可視にする場合は、代替のハイライト手段を必ず提供してください。

アウトラインへのtransform適用に関する描画は、CSS3-UIでは明示的に未定義です。

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

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

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

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

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

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

アウトラインの各部分は、いくつかの辺が開いている（インライン要素のborderのように行が分割された場合）状態ではなく、完全に接続されているべきです。

アウトラインの各部分は矩形である必要はありません。 アウトラインがborder edgeを追従する範囲で、 border-radiusの曲線に従うべきです。

アウトラインの位置は子孫ボックスの影響を受けることがあります。

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

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

outline-widthプロパティは、 border-widthと同じ値を受け付けます（CSS Backgrounds 3 §4.3 ラインの太さ: border-widthプロパティ）。

outline-styleプロパティは、 border-styleと同じ値を受け付けます（CSS Backgrounds 3 §4.2 ラインパターン: border-styleプロパティ）、 ただしhiddenはアウトラインスタイルとして合法ではありません。 さらに、CSS3ではoutline-styleはauto値も受け付けます。 auto値はユーザーエージェントがカスタムアウトラインスタイルを描画することを許可し、 通常はプラットフォームのユーザーインターフェースのデフォルトか、 CSSで詳細に記述できないよりリッチなスタイル（例：半透明の外側ピクセルで光って見える丸みを帯びた縁のアウトライン）を提供します。 このため、この仕様ではautoスタイルのアウトラインを描画する際にoutline-colorがどのように組み込まれたり使用されるか（もし使われる場合でも）を定義しません。 ユーザーエージェントはautoをsolidとして扱っても構いません。

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

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

UAが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 }

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

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

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

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

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

負の値ではアウトラインがborder boxの内側に縮小されます。 アウトラインで描画される形の外側の高さ・幅は、 outline-widthプロパティの算出値の2倍より小さくならないようにしてください。 これはアウトラインが大きな負の値でも描画可能であることを保証するためです。 ユーザーエージェントはこの制約を各次元ごとに独立して適用すべきです。 アウトラインが複数の分断された形として描画される場合も、この制約はそれぞれの形に個別に適用されます。

5. リサイズとオーバーフロー

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

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

resizeプロパティは、要素がユーザーによってリサイズ可能かどうか、そして可能な場合はどの軸方向でリサイズできるかを著者が指定することを可能にします。

none

UAは要素にリサイズ機構を表示せず、ユーザーは要素を直接操作してリサイズする手段を持ちません。

both

UAは高さ・幅の両方を調整できる双方向リサイズ機構を表示します。

horizontal

UAは幅のみ調整できる一方向（水平）リサイズ機構を表示します。

vertical

UAは高さのみ調整できる一方向（垂直）リサイズ機構を表示します。

現在、overflowプロパティ（例：overflow: scrollやoverflow: hiddenなど）で要素のスクロール機構の表示を制御できます。 resizeプロパティは、要素のリサイズ機構（例：リサイズボックスやウィジェット）の表示と機能を制御するためのものです。

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

resizeプロパティは、算出overflow値がvisible以外の要素に適用されます。 UAは、overflow値に関わらず、以下にも適用してよいです：

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

resizeプロパティの生成コンテンツへの効果は未定義です。実装は生成コンテンツにはresizeプロパティを適用しないでください。

注:将来的にresizeプロパティが生成コンテンツに適用される可能性があります。Interface CSSPseudoElement 実装による（[css-pseudo-4]参照）。

ユーザーが要素をリサイズした場合、 UAはwidthおよび heightプロパティを、 ユーザーが指定したサイズのpx単位長さで、要素のstyle属性DOMに設定し、 既存のプロパティ宣言（あれば）を置き換え、!importantは付けません。

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

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

UAは、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.2. オーバーフローの省略記号：text-overflow プロパティ

このプロパティは、インラインコンテンツがブロックコンテナ要素（「ブロック」）のインライン進行方向のendのラインボックス端をオーバーフローした場合の描画を指定します。 対象となるブロックコンテナは、overflowがvisible以外の場合です。

例えば、white-space: nowrapの指定や、単語が長すぎて折り返されない場合にテキストがオーバーフローします。 各値の意味は次の通りです：

clip

インラインコンテンツがブロックコンテナ要素の枠をオーバーフローした場合、その部分はクリップされます。文字が部分的に表示される場合があります。

ellipsis

切り詰められたインラインコンテンツを表すために省略記号（U+2026）を描画します。 実装は、より適切な言語・スクリプト・書字モード用の省略記号や、記号が利用できない場合は「...」などを代用してもかまいません。

このプロパティ定義で使われる「文字」は、可読性のためであり、実装上は「書記素クラスタ」 [UAX29]を意味します。

ellipsis値の場合、実装は省略記号を収めるため、行のend端にある文字や atomic inline-level要素を非表示にし、残ったインラインコンテンツのend端に省略記号を隣接して描画します。 行の最初の文字や atomic inline-level要素は省略せずにクリップされます。

div {
  font-family: monospace;
  white-space: pre;
  overflow: hidden;
  width: 9ch;
  text-overflow: ellipsis;
}

省略記号の詳細

• 省略記号による省略は描画だけに影響し、レイアウトやポインターイベントのディスパッチには影響しません。 UAは省略記号上のポインターイベントを、本来省略されている要素へイベントを送るべきです（text-overflowがnoneだった場合と同様）。
• 省略記号はブロックに従ってスタイルやベースライン調整されます。
• 省略は相対位置指定やその他のグラフィカル変形の後に行われます。
• 省略記号のためのスペースが足りない場合、省略記号自体の描画をクリップします （行の中立文字がtext-overflow:clipでクリップされる側と同じ側）。

省略記号とのユーザーインタラクション

• ユーザーがコンテンツ操作中（編集・選択・スクロールなど）は、 UAはtext-overflow: ellipsisをtext-overflow: clipとして扱ってもよい。
• 省略記号を選択すると、省略されたテキストが選択されるべきです。 省略されたテキスト全体が選択された場合は、UAは省略記号の選択表示もすべきです。 部分選択の場合の挙動はUA次第です。

div {  font-family:Helvetica,sans-serif; line-height:1.1;
  width:3.1em; padding:.2em; border:solid .1em black; margin:1em 0;
}

<div>
CSS IS AWESOME, YES
</div>

<div style="text-overflow:clip; overflow:hidden">
CSS IS AWESOME, YES
</div>

<div style="text-overflow:ellipsis; overflow:hidden">
CSS IS AWESOME, YES
</div>

<div style="text-overflow:ellipsis; overflow:hidden">
NESTED
 <p>PARAGRAPH</p>
WON’T ELLIPSE.
</div>

注:省略記号が描画される側は、ブロックのdirectionプロパティに依存します。 例：overflow:hiddenかつ右から左（direction: rtl）の場合、インラインコンテンツは左側でクリップされ、 そのためtext-overflowの省略記号は左側に描画されます。

省略記号とスクロールインターフェースのインタラクション

このセクションは、text-overflow:clip以外のtext-overflow（非clipのtext-overflow）かつoverflow:scrollを持つ要素に適用されます。

非clipのtext-overflowが設定されていて、テキストのインライン進行方向にscrollオーバーフローがあり、ブラウザがスクロール機構（例：要素上のスクロールバーや、スワイプスクロール可能なタッチインターフェース等）を提供する場合、より良いユーザー体験のために追加の実装詳細があります：

要素がスクロールされた場合（ユーザーやDOM操作による）、要素の内容のさらなる部分が表示されます。text-overflowの値は、要素の内容がさらに表示されるかどうかに影響してはいけません。非clipのtext-overflowが設定されている場合、スクロールによって追加の内容が表示できるなら、その内容も表示されるべきで、基本的にはクリップされる内容のみ（または省略記号/文字列のために必要なもののみ）を切り詰め、要素が内容の端までスクロールされた場合は、内容が省略記号/文字列の代わりに表示されるべきです。

div.crawlbar {
  text-overflow: ellipsis;
  height: 2em;
  overflow: scroll;
  white-space: nowrap;
  width: 15em;
  border:1em solid black;
}

<div class="crawlbar">
CSS is awesome, especially when you can scroll
to see extra text instead of just
having it overlap other text by default.
</div>

内容がスクロールされている間、実装は省略記号の描画（例：ボックス端に合わせる等）を調整する場合があります。

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

6.1. ポインターのインタラクション

6.1.1. カーソルのスタイリング：cursor プロパティ

このプロパティは、ポイントデバイスのカーソルのホットスポットが要素のborder edge内にある場合に表示するカーソルの種類を指定します。

注: CSS Backgrounds 3 §5.1 Curve Radii: border-radiusプロパティに従い、border edgeはborder-radiusの影響を受けます。

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

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

ユーザーエージェントは、ネイティブUIコントロール（スクロールバーやリサイズハンドル等）、またはフォーム要素のUA固有実装内で使用される他のネイティブUIウィジェット上ではcursorプロパティを無視してもよいです。また、ページが応答していない時のビジーカ―ソルや、テキスト選択時のテキストカーソルなど、UAのUI状態を示すためにcursorプロパティを無視して任意のカーソルを表示してもかまいません。

注: [HTML]ではイメージマップの特別なカーソル挙動をcursorプロパティ用に定義しています。

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

画像カーソル

<url>

UAはURIで指定されたリソースからカーソル画像を取得します。カーソルリストの最初の画像を扱えない場合、次の画像を扱い、いずれも扱えない場合はリストの最後のキーワードカーソルを使います。UAは<image>（superset）もサポートしてよいです。

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

• PNG（[PNG]参照）
• SVG（[SVG11]参照）、secure static mode [SVG2]、かつサイズが内在している場合
• UAが他プロパティ（例：background-image）でサポートしている他の非アニメーション画像ファイル形式

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

• SVG（[SVG11]参照）、secure animated mode [SVG2]、かつサイズが内在している場合
• UAが他プロパティ（例：background-image）でサポートしている他のアニメーション画像ファイル形式

UAはさらに、サイズが内在していなくてもsecure static/animated modeのSVG等の追加形式もサポートしてよいです。

注: CSSワーキンググループは当初、サイズが内在しているSVG・していないSVG両方を必須サポートと意図していましたが、実装不足により必須から任意へ変更されました。

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

カーソル画像の既定オブジェクトサイズは、UAのOSで一般的なカーソルサイズに基づくUA定義サイズです。

具体的なオブジェクトサイズは既定サイズ決定アルゴリズムで決まります。OSが指定サイズ以上のカーソル表示に非対応の場合は、画像比率を維持しつつOS対応サイズ内に縮小されます。

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

<x>

<y>

いずれも<number>です。カーソル座標系（左上基準）内のポイント位置を示します。

注: 本仕様は各種<image>型の座標系がどう決定されるか定義しません。[CSS4-IMAGES]に委ねます。

値を指定しない場合は画像リソース内定義のホットスポットが使われます。座標が未指定かつ参照カーソルにホットスポット定義がなければ、「0 0」とした場合と同じです。

ホットスポット座標が画像外にある場合は（独立して）範囲内にクランプしてください。

汎用カーソル

auto

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

default

プラットフォーム依存の既定カーソル。通常は矢印で表示されます。

none

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

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

context-menu

カーソル下のオブジェクトでコンテキストメニューが利用可能。通常は矢印＋小さいメニュー風グラフィックで表示。

help

カーソル下のオブジェクトでヘルプが利用可能。通常はクエスチョンマークや吹き出し型で表示。

pointer

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

progress

処理中を示すインジケータ。waitとは異なり、ユーザー操作が可能な場合。スピニングビーチボールや矢印＋時計・砂時計型など。

wait

プログラムがビジー状態で待機を示す。通常は時計や砂時計型。

選択カーソル

cell

セルやセル群の選択可能を示す。通常は中央に点のある太いプラス記号型。

crosshair

単純な十字カーソル（「+」型）。2次元ビットマップ選択モード等で使用。

text

選択可能なテキストを示す。通常は縦型Iビーム。UAは縦書き等の場合は水平Iビーム（vertical-textキーワードと同じ）や、任意角度の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
}

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

ドキュメントキャンバスは、ドキュメントが描画される無限の表面です[CSS2]。 キャンバスには対応する要素がないため、任意の要素上でない場所のカーソルをスタイリングできるよう、キャンバスカーソルはルート要素のカーソルを流用します。ただし、ルート要素にボックスが生成されない場合（例：ルート要素がdisplay: noneの場合）、キャンバスカーソルはプラットフォーム依存の既定カーソルです。

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

6.2. 挿入キャレット

6.2.1. 挿入キャレットの色付け：caret-color プロパティ

auto

ユーザーエージェントはcurrentColorを使うべきです。 ユーザーエージェントはキャレットの色を自動調整して、周囲コンテンツと十分な視認性・コントラストを確保するために、currentColorや背景、シャドウ等に基づき調整しても構いません。

<color>

挿入キャレットが指定色で表示されます。

キャレットは、ユーザーがテキスト（や他のコンテンツ）を挿入する位置を示す、要素内の目に見えるインジケータです。このプロパティはその目に見えるインジケータの色を制御します。

注: キャレットの形状や点滅はこの機能の範囲外であり、仕様外です。

注: UAによっては「キャレット」と見なされる追加の機能がある場合があります。例えば、一部UAは「ナビゲーションキャレット」を表示でき、それは挿入キャレットと似ていますが、編集不可テキスト内でも移動でき、機能的にはキャレットです。一方、cursorプロパティがautoのときにテキスト上に表示されるカーソル画像や、cursorプロパティがtextやvertical-textのときに表示される画像は、見た目はキャレットに似ていてもキャレットではありません（これはカーソルです）。

6.3. キーボード制御

6.3.1. 廃止済み：ime-modeプロパティ

"ime-mode"は一部ブラウザで部分的に実装されていますが、問題があり、本仕様で公式に廃止されています。

これらの実装の非互換性についてのドキュメントがあります。

ユーザーエージェントはime-modeプロパティをサポートすべきではありません。

著者はime-modeプロパティを使用してはなりません。

ユーザーは、悪いサイトやレガシー実装を回避するために修正用途でのみime-modeプロパティを使ってもよいです。例えば以下のようなユーザースタイルシートルール：

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

このCSS例は、パスワード入力欄を既定の挙動にするために、ユーザースタイルシートファイルに記載できます。

本仕様は、レガシーime-mode実装の機能やサポート内容を文書化しようとはせず、そういった方針を追求・推奨する意味がないため意図的に記述しません。

付録A. 謝辞

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

この仕様はほとんどの部分をTantek Çelikが1999年から現在まで編集・執筆しました。最初はMicrosoftの代表として、その後招待専門家として、最近はMozillaの代表として活動しています。

この仕様で最近のwww-styleメールからの課題を文書化し、解決提案・変更、特にbox-sizingプロパティの改善された詳細の調査・執筆に貢献したFlorian Rivoal（Bloomberg代表）に感謝します。

また、以下の方々からのフィードバック・貢献にも感謝します：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. 変更点

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

勧告案（PR）以降の変更点

この付録では、2017年12月14日勧告案（PR）からの変更点を説明します。

• 最新バージョンへの参照を更新
• W3C勧告用の日付と定型文の変更
• エラッタ文書へのリンク追加
• この変更点セクションの更新

候補勧告（CR）以降の変更点

この付録では、2017年3月2日候補勧告（CR）からの変更点を説明します。

• 最新バージョンへの参照を更新
• resizeプロパティについての編集上の明確化
• （リスクあり）方向性フォーカスナビゲーションプロパティをレベル3からレベル4へ移動
• HTMLへのcursorの画像マップ上の特別な扱いについての情報リンク追加
• pointer eventsへのtext-overflowの影響について実装者合意を明確化（対応テスト）。
• UAがcursorプロパティを無視してUI状態を反映できることの明確化
• 固有サイズのないSVG画像についてカーソル用のサポートを必須から任意へ変更（対応テスト更新）。
• 仕様を実装に合わせ、cursor: autoが選択可能なテキストや編集可能要素上ではtextのように表示されるように変更（対応テスト）。

付録C. セキュリティ・プライバシー配慮

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

W3C TAGは、仕様編集者が参考として回答できるよう自己評価質問票：セキュリティ・プライバシーを開発しています。

検討すべき質問に従い：

1. この仕様は個人を識別可能な情報を扱いますか？

   いいえ。

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

   いいえ。

3. この仕様はオリジンにブラウジングセッション間で持続する新しい状態を導入しますか？

   いいえ。

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

   いいえ。

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

   いいえ。

6. この仕様は新しいスクリプト実行／ロード機構を可能にしますか？

   ロードははい、実行はいいえ。cursorプロパティは<image> 値を受け付け、これにはロードされるURLが含まれる場合があります。 それらはSVGドキュメントであり、スクリプトを含みうるが、本仕様ではスクリプトの実行は禁止されています。

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

   いいえ。

8. この仕様はユーザーのデバイスのセンサーへのアクセスを許可しますか？

   いいえ。

9. この仕様はユーザーのローカル計算環境の側面へのアクセスを許可しますか？

   いいえ。

10. この仕様は他のデバイスへのアクセスを許可しますか？

    いいえ。

11. この仕様はユーザーエージェントのネイティブUIの一部制御を可能にしますか？

    はい。cursorとcaret-colorプロパティは、ページがUAのカーソルやテキスト挿入キャレットの表示を変更できるようにします。また、outline-styleプロパティのauto値（およびoutlineショートハンド）は、ページが任意要素にUAのネイティブフォーカスアウトラインを表示できる可能性を持ちます。

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

    いいえ。

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

    いいえ。

14. この仕様はユーザーエージェントの「シークレット」モードでどのように動作すべきですか？

    通常通り。

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

    いいえ。

16. この仕様は「セキュリティ配慮」および「プライバシー配慮」セクションがありますか？

    はい。

17. この仕様は既定のセキュリティ特性をダウングレードしますか？

    いいえ。

付録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: "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未指定または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 }

*/