CSS Basic User Interface Module Level 3 (CSS3 UI) 日本語訳

1. 概論

このモジュールは、ユーザーインターフェイス関連のプロパティおよび値のスタイル付けを著者に可能にさせるCSSプロパティについて説明する。

CSS1の2.1節 [CSS1]およびCSS2の18章 [CSS2]は、複数のユーザーインターフェイスに関連するプロパティおよび値を導入した。User Interface for CSS3（2000年2月16日)は、複数の新しいユーザーインターフェイス関連機能を導入した。

このワーキングドラフトは、プロパティ、値およびユーザーインターフェイス関連を組み入れ、拡張し、取って代わる。

1.1. 目的

この仕様の目的は、次の目標を達成するために：

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

2. モジュール間の相互関係

この文書は、以前の仕様に存在しない新しい機能を定義する。加えて、以下を置き換えて取って代わる：

• Cascading Style Sheets, level 2, revision 1 [CSS2]の18.1節、18.4節および付録Eで定義されるアウトラインのスタックに関する情報
• User Interface for CSS3（2000年2月16日）

注：プロパティ定義テーブルのセマンティクスは、Cascading Style Sheetsレベル2リビジョン1（CSS 2.1）仕様§プロパティ定義で初めて導入された。より最新の定義は、[css-transitions-1]、[css-values-3]、[css-cascade-4]で見られる。読者の便宜のために、この仕様は、関連する場合にこれらの用語に直接リンクしている。

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

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

content-box

これは、CSS2.1で指定されるような幅および高さの動作である。指定の幅および高さ（および、それぞれの最小値または最大値プロパティ）は、要素のコンテンツボックスの幅および高さにそれぞれ適用する。要素のパディングおよびボーダーはレイアウトされ、指定の幅および高さの外に描かれる。

border-box

この要素上の幅および高さ（および、それぞれの最小値または最大値プロパティ）に対する長さおよびパーセンテージは、要素のボーダーボックスを決定する。つまり、要素に指定される任意のパディングまたはボーダーはレイアウトされ、この指定幅と高さの内側に描かれる。コンテンツ幅および高さは、指定されるwidthとheightプロパティから各辺のボーダーとパディング幅を差し引くことによって算出される。コンテンツ幅および高さは負になることができないため（[CSS2] 10.2節）、この計算は0を下限にする。たとえばgetComputedStyle()を通して公開されるような使用値もまた、ボーダーボックスを参照する。

注：これは、置換要素と入力要素のために、一般的な従来のHTMLユーザーエージェントによって実装されたwidthとheightの動作である。

注：長さとパーセンテージとは対照的に、（特に指定のない限り、以降の仕様によって導入される他のキーワード値だけでなく）widthおよびheightプロパティのauto値は、box-sizingプロパティによる影響を受けず、常にコンテンツボックスのサイズを設定する。

異なる定義がbox-sizingの計算値に基づいて以下の用語は導入される：

[CSS2]の視覚整形モデル詳細は、box-sizing: content-boxを仮定して書かれている。次の曖昧性除去は、box-sizingのすべての値に対する振る舞いを明確にするために行われる：

1. 10.3.3において、次のフレーズで2番目のwidthはコンテンツ幅として解釈されるものである：widthがautoでなくかつborder-left-width + padding-left + width + [...]である場合
2. 10.3.7において、widthは次の等式においてコンテンツ幅として解釈されるものである：left + margin-left + border-left-width + padding-left + width + [...]
3. 10.4において、width、height、min-width、max-width、min-heightおよびmax-heightは、次のフレーズにおいてコンテンツ幅、コンテンツ高さ、最小内部幅、最大内部幅、最小内部高さおよび最大内部高さとしてそれぞれ解釈されるものである：
   1. 仮使用幅は計算される[...]
   2. 仮の使用値がmax-widthより大きい場合、上記の規則が再び適用されるが、今回はwidthの算出値としてmax-widthの算出値を用いる。
   3. 結果の幅がmin-widthより小さい場合、上記の規則を再度適用するが、今回はwidthの算出値としてmin-widthを用いる。
   4. 適切な制限違反に対して解決される高さと幅の値をテーブルから選択する。min ≤ maxが真となるために、max-widthとmax-heightをmax(min, max)として解釈する。このテーブルにおいてwとhは、[...]幅と高さの計算結果を表す。
   5. テーブルにおけるこの単語の全てのインスタンス
   6. あたかもwidthがこの値で計算されたかのように、上記の"幅とマージンの計算"のもとで規則を適用する。
4. 10.6.4において、heightは次の等式においてコンテンツ高さとして解釈されるものである：top + margin-top + border-top-width + padding-top + height + [...]
5. 10.7において、width、height、min-heightおよびmax-heightは、次のフレーズにおいてコンテンツ幅、コンテンツ高さ、最小内部高さおよび最大内部高さとしてそれぞれ解釈されるものである：
   1. 仮使用高さは計算される[...]
   2. 仮の使用高さがmax-heightより大きい場合、上記の規則が再び適用されるが、今回はheightの算出値としてmax-heightの算出値を用いる。
   3. 結果の高さがmin-heightより小さい場合、上記の規則を再度適用するが、今回はheightの算出値としてmin-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">This div occupies the left half.</div>
<div class="split">This div occupies the right half.</div>
</div>

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

ときには、スタイルシートの著者は、ボタン、アクティブなフォームフィールド、イメージマップなどのビジュアルオブジェクトを目立たせるために、その周りにアウトラインを作成してもよい。アウトラインは、以下の点でボーダーと異なる。

1. アウトラインは、スペースを取らない。
2. アウトラインは、矩形でなくてもよい。
3. ユーザーエージェントは、多くの場合: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プロパティ

アウトラインのプロパティで作成されるアウトラインは、ボックスの"上"に描画される。すなわち、アウトラインは常に手前にあり、ボックスまたはその他のボックスの位置または大きさに影響を与えない。したがって、アウトラインの表示または抑制は、リフローを引き起こさない。

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

アウトラインの各部分は一部の側面で開く（改行時に、インライン要素のボーダーがあるように）よりはむしろ、完全に接続されるべきである。

アウトラインの部分が矩形である必要はない。アウトラインがボーダー辺に従う範囲で、アウトラインはborder-radius曲線に従うべきである。

アウトラインの位置は、子孫ボックスによって影響を及ぼされてもよい。

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

注：この仕様は、アウトラインの正確な位置や形状を定義しないが、一般にボーダーボックスのすぐ外側に描かれる。

outline-widthプロパティはborder-widthと同じ値を受け入れる（CSS Backgrounds 3 §4.3 Line Thickness: the border-width properties）。

outline-styleプロパティは、hiddenが正当なアウトラインスタイルでないことを除いて、border-styleと同じ値を受け入れる（CSS Backgrounds 3 §4.2 Line Patterns: the border-style properties）。さらに、CSS3において、outline-styleは値autoを受け入れる。auto値は、プラットフォームに対するユーザーインターフェイスのデフォルトまたは、おそらくCSSで詳細に説明できるよりもより豊かなスタイルかのいずれかである典型的なスタイル、たとえばグローに表示される半透明の外側のピクセルをもつ丸められた辺のアウトラインのような、カスタムアウトラインスタイルをレンダリングすることをユーザーエージェントに許可する。このように、この仕様はautoのスタイルのアウトラインを描画する際にどのように（たとえあったとしても）outline-colorが組み込まれるまたは使用されるかを定義しない。ユーザーエージェントは、solidとしてautoを扱ってもよい。

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 }

注： アウトラインの整形（すなわち、スペースはボックスモデルで除去されない）には影響しないため、ページ上の他の要素と重なってよい。

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

デフォルトで、アウトラインはボーダー辺のちょうど外側から描画される。しかし、アウトラインをオフセットし、ボーダー辺を越えてアウトラインを描画可能である。

outline-offsetの算出値が0以外の場合、アウトラインはその分だけボーダー辺からずれる。

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

負の値は、アウトラインにボーダーボックスへ縮小させなければならない。アウトラインが大きな負の値をとともにレンダリングすることができることを確認するために、アウトラインによって描かれる形状の高さと幅の両方は、outline-widthプロパティの2倍の計算値よりも小さくすべきではない。ユーザーエージェントは、各次元で独立してこの制約を適用すべきである。アウトラインが複数の切断された形状として描かれる場合、この制約は個別に各形状に適用される。

5. サイズ変更とオーバーフロー

CSS2.1は、ブロックコンテナ要素のスクロールメカニズム（たとえば、スクロールバー）の外観を制御するためのメカニズムを提供する。この仕様は、テキストのオーバーフロー動作を指定するための機能だけでなく、ユーザーの要素のサイズ変更性を制御するためのメカニズムを追加する。

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

resizeプロパティは、著者にユーザーによって要素がリサイズ可能にするかどうかの指定を可能にし、もしリサイズ可能ならば、どの軸に沿うかを指定する。

none

ユーザーエージェントは、要素でリサイズするメカニズムを提供せず、ユーザーが要素をリサイズする直接的な操作メカニズムを与えない。

both

ユーザーエージェントは、ユーザーが要素の高さと幅の両方の調整を可能にする双方向のリサイズメカニズムを提供する。

horizontal

ユーザーエージェントは、ユーザーに要素の幅のみの調整を可能にする水平方向のリサイズメカニズムを提供する。

vertical

ユーザーエージェントは、ユーザーに要素の高さのみの調整を可能にする垂直方向のリサイズメカニズムを提供する。

現時点では、overflowプロパティ（たとえば、overflow: scroll対overflow: hidden）を使用する要素でスクロールメカニズム（もしあれば）の外観を制御することが可能である。resizeプロパティの目的は、要素でリサイズメカニズム（たとえばリサイズボックスまたはウィジェット）の外観および機能の制御を可能にすることである。

注：リサイズメカニズムは、スクロールメカニズムと同じではなく、ズームに対するユーザーエージェントのメカニズムにも関係しない。スクロールメカニズムは、ユーザーにどの要素のコンテンツの一部を表示するかの決定を可能にする。リサイズメカニズムは、ユーザーに要素のサイズの決定を可能にする。

resizeプロパティは、算出されたoverflowの値がvisible以外である要素に適用する。ユーザーエージェントはまた、overflowプロパティの値にかかわらず、そのプロパティを適用してもよい：

• img、video、picture、svg、object、canvasのような、 画像または映像を表す置換要素。
• iframe要素。

生成されたコンテンツのresizeプロパティの効果は未定義である。実装は、resizeプロパティを生成されたコンテンツに適用すべきでない。

注：Interface CSSPseudoElementの実装が存在する場合、resizeプロパティは、生成されるコンテンツに将来適用してもよい（[css-pseudo-4]参照）。

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

要素が一次元のみでサイズ変更される場合、唯一の対応するプロパティは、bothではないものが設定される。

リサイズの正確な方向（すなわち、要素の左上を変更する、または右下を変更するか）は、要素が絶対配置されるかどうか、rightおよびbottomプロパティを使用して配置されるかどうか、要素の言語が右から左へであるかどうかなどを含めて多くのCSSレイアウトの要素に依存してもよい。ユーザーエージェントは、ユーザーにサイズ変更メカニズムを伝える方法を決定する際にプラットフォームの慣習および制約だけでなく、（CSSレイアウトによって決定されるような）サイズ変更の方向を考慮すべきである。

ユーザーエージェントは、ユーザーにmin-width、max-width、min-heightおよびmax-heightによって課されるものを超えない他の制約をもつ要素のリサイズを可能にしなければならない。

注：たとえばDOMでその要素のstyle属性のwidthおよびheightのプロパティに取って代わる!importantカスケード宣言のために、ユーザーが上書きまたは無視されるように表示される要素のサイズを変更しようとするような状況があるかもしれない。

要素のresizeプロパティの算出値の変更は、その要素のユーザーリサイズのために作られるスタイル属性への変更をリセットしない。

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

5.2. オーバーフローの省略：text-overflowプロパティ

このプロパティは、visible以外のoverflowを持つブロックコンテナ要素（"ブロック"）のインライン進行方向で、インラインコンテンツがそのインランコンテンツの終端行ボックス辺をオーバーフローする場合のレンダリングを指定する。

テキストが折り返しを防ぐ場合に、テキストはオーバーフローすることができる（white-space: nowrapまたは1つの単語が長すぎて収まらないなど）。値が持つ意味は次のとおり：

clip

ブロックコンテナ要素をオーバーフローするインラインコンテンツを切り取る。文字は部分的にのみレンダリングされてもよい。

ellipsis

切り抜かれたインラインコンテンツを表現するための省略記号文字（U+2026）をレンダリングする。省略文字が使用不能である場合、実装は、より多くの言語、スクリプトまたはwriting-modeに適切な省略記号、すなわち3つのドット"..."で代用してもよい。

用語"文字列"は読みやすさのためにこのプロパティ定義で使用され、実装に対する書記素クラスタ"[UAX29]を意味する。

省略記号の実装では、省略記号に合わせるために、必要に応じて行の終端辺に文字や分割不能なインラインレベル要素を隠し、残りのインラインコンテンツの終端辺のすぐ隣に省略記号を配置しなければならない。行の最初の文字または分割不能なインラインレベル要素は省略でなく、切り取られなければならない。

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

省略詳細

• 省略はレンダリングにのみ影響し、レイアウトにもポインターイベントの発送にも影響を与えてはならない。ユーザーエージェントは、あたかもtext-overflowがnoneであったかのように、省略された要素へのポインターイベントを送出する。
• 省略記号は、ブロックに応じてベースラインに揃えられる。
• 省略は、相対的な位置および他のグラフィカルな変換後に出現する。
• 省略のための十分なスペースがない場合、省略記号自身のレンダリングを切り取る（そうでなければ行のニュートラル文字がtext-overflow:clipの値で切り取られているのと同じ側）。

省略記号をもつユーザーとの対話

• ユーザーがコンテンツと対話している場合（たとえば、編集、選択、スクロール）、ユーザーエージェントは、text-overflow: clipとしてtext-overflow: ellipsisを扱ってもよい。
• 省略記号の選択は、省略されたテキストを選択すべきである。省略されたテキストのすべてが選択される場合、ユーザーエージェントは、省略記号の選択を表示すべきである。部分的に選択される省略されたテキストの挙動は、ユーザーエージェント次第である。

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に依存する。たとえば、オーバーフロー非表示の右から左（direction:rtl）ブロックは左側にインラインコンテンツを切り取り、したがって、その切り取られたコンテンツを表すために左側にテキストのオーバーフロー省略記号を配置する。

スクロールインターフェイスをもつ省略の作用

この節は、text-overflow:clip（非クリップテキストオーバーフロー）およびoverflow:scroll以外のテキストのオーバーフローをもつ要素に適用する。

非クリップテキストオーバーフローをもつ要素が、テキストのインライン進行方向でスクロールのオーバーフローを持ち、かつブラウザーがスクロールするためのメカニズム（たとえば、要素のスクロールバー、またはタッチインターフェイスでスワイプスクロールなど）を提供する場合、優れたユーザーエクスペリエンスを提供する追加の実装の詳細がある。

要素がスクロールされる（たとえば、ユーザーによるDOM操作）場合、要素のコンテンツの詳細が表示される。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プロパティ

このプロパティは、カーソルのホットスポットが要素のボーダー辺内にある場合、ポインティングデバイスに対して表示されるカーソルの種類を指定する。

注：CSS Backgrounds 3 §5.1 Curve Radii: the border-radius propertiesにより、ボーダー辺はborder-radiusによって影響を受ける。

重複要素の場合、いずれかの要素はカーソルの種類がヒットテストに基づいて決定する：カーソルを決定する要素は、この位置から開始されたクリックを受け取ることになるものである。

注：ヒットテストの詳細はこの仕様の範囲外である。ヒットテストはうまくいけば、CSSまたはHTMLの将来の改訂版で定義される。

ユーザーエージェントは、たとえばフォーム要素の一部のユーザーエージェント固有の実装内で使用されてもよい、スクロールバー、リサイザー、またはその他のネイティヴUIウィジェットのようなネイティヴユーザーエージェントコントロール上でカーソルプロパティを無視してもよい。ユーザーエージェントは、ページが応答していないときのビジーカーソルや、ユーザーがテキスト選択を行っているときのテキストカーソルなど、カーソルのプロパティを無視し、ユーザーエージェントのユーザーインターフェイスの様々な状態を示すようにカーソルを表示してもよい。

注：[HTML]は、cursorプロパティのイメージマップの特別な処理を定義する。

値が持つ意味は次のとおり：

画像カーソル

<url>

ユーザーエージェントは、URIで指定されるリソースからカーソルを取得する。ユーザーエージェントがカーソルのリストの最初のカーソルを処理できない場合、ユーザーエージェントは2番目の処理を試みなければならない（以降も同様）。ユーザーエージェントが任意のユーザー定義のカーソルを処理できない場合、ユーザーエージェントはリストの最後のカーソルキーワードを使用しなければならない。適合ユーザーエージェントは、<uri>の代わりに、スーパーセットである<image>をサポートしてもよい。

ユーザーエージェントは、次の画像ファイル形式をサポートしなければならない：

• [PNG]で定義されるPNG
• 内在サイズを持つ場合に、[SVG11]で定義されるように、secure static mode [SVG2]におけるSVG
• background-imageプロパティのような、他のプロパティで<image>に対してサポートする、その他の非アニメーション画像ファイル形式

加えて、ユーザーエージェントは、次の画像ファイル形式をサポートすべきである：

• 内在サイズを持つ場合に、[SVG11]で定義されるように、secure animated mode [SVG2]におけるSVG
• background-imageプロパティのような、他のプロパティで<image>に対してサポートする、その他のアニメーション画像ファイル形式

ユーザーエージェントはまた、たとえ内在サイズを持たなくても、[SVG11]で定義されるように、secure static modeまたはsecure animated mode [SVG2]で、SVGを含む追加のファイル形式をサポートしてもよい。

注：CSSワーキンググループは当初、内在サイズにかかわらず、すべてのSVGのサポートを意図した。内在サイズのないSVGののサポートは、実装が不十分なため必須からオプションにダウングレードされた。

注：この仕様を書いている時点（2015年春）で、一般的なデスクトップブラウザーにおけるカーソルに対してサポートされる唯一のファイル形式は、Microsoftによって設計された、.icoと.curファイル形式である。レガシーコンテンツとの互換性のために、ユーザーエージェントは、たとえオープン仕様の欠如がこの形式に関する規範的な要件を持つことを不可能にするにしても、この形式をサポートすることが推奨される。この形式に関する一部の情報は、Wikipediaで見つけることができる。

カーソル画像に対するデフォルトオブジェクトサイズは、ユーザーエージェントのオペレーティングシステム上で典型的なカーソルのサイズに基づくべきユーザーエージェント定義のサイズとなる。

具象オブジェクトサイズは、デフォルトサイズアルゴリズムを使用して決定される。オペレーティングシステムが与えられたサイズより上のカーソルをレンダリングすることができない場合、もしあれば、カーソル画像の固有の比率を維持しながら、そのサイズよりも大きいカーソルは、OSがサポートするサイズの範囲内にまで縮小されなければならない。

オプション<x>および<y>座標は、ポインタの位置（すなわち、ホットスポット）の画像内の正確な位置を識別する。

<x>

<y>

いずれも<number>である。指されている正確な位置を表すカーソルの座標系（左/上相対）の位置のx座標およびy座標。

注：この仕様は、どのように<image>の様々な種類の座標系が確立されるのかを定義せず、この定義を[CSS4-IMAGES]に委ねる。

値が未指定である場合、画像リソース自身の内部に定義される固有のホットスポットが使用される。両方の値が明確でなく、かつ参照カーソルが定義されるホットスポットを持たない場合、効果はあたかも"0 0"の値が指定されたかのようになる。

画像リソースの内部または<x>および<y>の値によってのいずれかで指定されるような、ホットスポットの座標がカーソル画像の外側になる場合、座標は収まるように（独立に）に固定されなければならない。

汎用カーソル

auto

ユーザーエージェントは、現在のコンテキストに基づいて表示するカーソルを決定する。具体的には、選択可能なテキストまたは編集可能な要素上のtext、そうでなければdefaultとして動作する。

default

プラットフォーム依存のデフォルトのカーソル。多くの場合、矢印のようにレンダリングされる。

none

カーソルは要素に対してレンダリングされない。

リンクおよび状態カーソル

context-menu

コンテキストメニューがカーソルの下のオブジェクトに対して利用できる。多くの場合、小さなメニューのようなグラフィックを隣にもつ矢印としてレンダリングされる。

help

ヘルプがカーソルの下のオブジェクトに対して利用できる。多くの場合、疑問符やバルーンとしてレンダリングされる。

pointer

カーソルはリンクを示すポインターとなる。

progress

進行状況インジケーター。プログラムは、いくつかの処理を実行し、ユーザーがまだプログラムと対話することができるという点でwaitとは異なる。多くの場合、回転するビーチボール、または時計や砂時計をもつ矢印のようにレンダリングされる。

wait

プログラムがビジー状態でユーザーが待機すべきことを示す。多くの場合、時計または砂時計のようにレンダリングされる。

選択カーソル

cell

セルまたはセルの集合が選択されることを示す。多くの場合、厚みをもつプラス記号としてレンダリングされる。

crosshair

単純な十字線（たとえば、"+"符号に似た短い線分）。多くの場合、2次元のビットマップ選択モードを示すために使用される。

text

選択されてもよいテキストを示す。多くの場合、垂直のI型のようにレンダリングされる。ユーザーエージェントは、縦書きテキストに対して自動的に水平の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>

挿入キャレットは、指定した色で着色される。

キャレットは、テキスト（および潜在的に他のコンテンツ）がユーザーによって挿入される要素における挿入ポイントの可視インジケーターである。このプロパティは、可視インジケーターの色を制御する。

注：キャレットの形状および点滅はこの機能の範囲外であり、したがって未指定である。

注：ユーザーエージェントは、「キャレット」として数えられる追加のものがあるかもしれない。たとえば、いくつかのユーザーエージェントは、挿入キャレットと同様に動作するが、編集不可能なテキスト内を移動することができ、機能的にはキャレットである「ナビゲーションキャレット」を示すことができる。一方、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. 謝辞

この付録は参考情報である。

この仕様は、1999年から現在まで、最初にMicrosoftを代表し、次に招待専門家として、そして最近ではMozillaを代表するTantek Celikによって、大部分が編集され記述された。

ブルームバーグの代わりにこの仕様への取り組み、www-styleの電子メールからのイシューを文書化し、解決および変更を提案しする最近の仕事に対して、特に大幅に改善されたbox-sizingプロパティの詳細を調査し記述に対して、Florian Rivoalに謝意を表す。

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. 変更点

この付録は参考情報である。

Since Proposed Recommendation

This portion of the appendix describes changes from the Proposed Recommendation (PR) of 14 December 2017.

• Updated references to latest versions
• Date and boilerplate changes for W3C Recommendation
• Link to errata document added
• Updated this changes section

Since Candidate Recommendation

This portion of the appendix describes changes from the Candidate Recommendation (CR) of 2 March 2017.

• Updated references to latest versions
• Editorial Clarification about the resize property
• Move (at risk) directional focus navigation properties from level 3 to level 4
• Add informative link to HTML about special handling of cursor over image maps
• Clarify (as a SHOULD) the implications of text-overflow on pointer events to capture implementor consensus (corresponding test).
• Clarify that UAs may ignore the cursor property to reflect the UA’s UI state
• Allow, but stop requiring support for SVG images without intrinsic sizes for cursors (corresponding test update).
• Align the spec with implementations, and make cursor: auto look like text over selectable text, and over editable elements (corresponding tests).

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

この付録は参考情報である。

W3C TAGは、参考として答えるべき仕様の編集者に対する自己評価アンケート：セキュリティおよびプライバシーを開発している。

考慮すべき質問ごとに

1. この仕様は個人を特定できる情報を扱うか？

   いいえ。

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

   いいえ。

3. この仕様は、ブラウジングセッションを横断して存続する生成元に対して新しい状態を導入するか？

   いいえ。

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

   いいえ。

5. この仕様は、現在アクセス権を持たない生成元にその他のデータを公開するか？

   いいえ。

6. この仕様は、新しいスクリプトの実行/読み込みメカニズムを有効にするか？

   読み込みは可能だが、実行はできない。cursorプロパティは、読み込まれたURLを含む<image>値を受け入れる。これらの値はスクリプトを含むかもしれないSVG文書かもしれないが、この仕様はスクリプトを実行してはならないことを要求する。

7. この仕様は、生成元のアクセスにユーザーの場所を与えるか？

   いいえ。

8. この仕様は、生成元にユーザーのデバイス上のセンサーへアクセスを可能にするか？

   いいえ。

9. この仕様は、生成元にユーザーのローカルコンピューティング環境の側面へのアクセスを可能にするか？

   いいえ。

10. この仕様は、生成元に他のデバイス上へアクセスを可能にするか？

    いいえ。

11. この仕様は、ユーザーエージェントのネイティヴUI上のコントロールの生成元のいくつかの評価を可能にするか？

    はい。cursorおよびcaret-colorプロパティは、ページにカーソルとの表示およびユーザーエージェントのネイティヴUIのテキスト挿入キャレットを変更することを可能にさせる。また、outline-styleプロパティのauto値（outline略記）は、任意の要素の周りにネイティヴフォーカスされる要素アウトラインプレゼンテーションを潜在的に表示することをページに可能にさせる。

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
{
/* white space handling of BUTTON tags in particular */
 white-space:normal;
}

input[type=reset]:lang(en)
{
/* default content of HTML input type=reset button, per language */
 content: "Reset";
}

input[type=submit]:lang(en)
{
/* default content of HTML input type=submit button, per language */
 content: "Submit";
}

/* UAs should use language-specific Reset/Submit rules for others. */

input[type=button],
input[type=reset][value],
input[type=submit][value]
{
/* text content/labels of HTML "input" buttons */
 content: attr(value);
}

textarea
{
/* white space handling of TEXTAREA tags in particular */
 white-space:pre-wrap;
 resize: both;
}

input[type=hidden]
{
/* appearance of the HTML hidden text field in particular */
 display: none !important;
}

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

select[size]
{
/* HTML4/XHTML1 <select> w/ size more than 1 - appearance of list */
 display: inline-block;
 height: attr(size,em);
}

select,select[size=1]
{
/* HTML4/XHTML1 <select> without size, or size=1 - popup-menu */
 display: inline-block;
 height: 1em;
 overflow: hidden;
}

select[size]:active
{
/* active HTML <select> w/ size more than 1 - appearance of active list */
 display: inline-block;
}

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

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

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

/* Though FRAME resizing is not directly addressed by this specification,
   the following rules may provide an approximation of reasonable behavior. */

/*

frame { resize:both }
frame[noresize] { resize:none }

*/