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

1. はじめに

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

CSS1 の 2.1 節 [CSS1] と CSS2 の 18 章 [CSS2] では、いくつかのユーザーインターフェイス関連のプロパティや値が導入されました。 User Interface for CSS3 (16 February 2000) では、さらに新しいユーザーインターフェイス関連機能がいくつか導入されました。

本仕様は、それらを取り込み、拡張し、置き換えるものです。

1.1. 目的

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

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

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

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

• 18.1 節、 18.4 節、 および Cascading Style Sheets, level 2, revision 1 [CSS2] の 付録 E で定義されているアウトラインの積み重なりに関する情報
• User Interface for CSS3 (16 February 2000)

2.1. 値の定義

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

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

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 プロパティ）の長さ・百分率値は、 要素のボーダーボックスを決定します。 つまり、要素に指定された任意の padding や border は、 この指定された width および height の内側にレイアウト・描画されます。 コンテンツの幅と高さは、 指定された width および height プロパティから、それぞれの辺の border と padding の幅を差し引くことで計算されます。 コンテンツの幅と高さは 負の値にはなりえない ([CSS2] 10.2 節) ため、この計算結果は 0 で切り上げられます。 getComputedStyle() などを通じて公開される使用値も、ボーダーボックスを参照します。

注: これは、置換要素や input 要素に対して レガシーな HTML ユーザーエージェントが一般に実装している width および height の挙動です。

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

box-sizing の算出値に応じて定義が変化する、 次の用語を導入します。

CSS2 のビジュアル整形モデル詳細 [CSS2] は box-sizing: content-box を 前提として書かれています。 すべての box-sizing 値について挙動を明確にするため、 次のようなあいまいさの解消を行います。

1. 10.3.3 において、 次の一文中の 2 番目の width は コンテンツ幅 (content width) と解釈されなければなりません: もし width が auto ではなく、 かつ 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)、 最小内側幅 (min inner width)、 最大内側幅 (max inner width)、 最小内側高 (min inner height)、 および 最大内側高 (max inner height)。 対象となるのは次の文です。
   1. 仮の使用幅 (tentative used width) は […] により計算される。
   2. もし仮の使用幅が max-width より大きい場合、 上の規則を再度適用するが、 このときは max-width の算出値を width の算出値として扱う。
   3. 結果の幅が min-width より小さい場合、 上の規則を再度適用するが、 このときは min-width の値を width の算出値として扱う。
   4. 表から、適切な制約違反に対応する解決済みの高さと幅の値を選択する。 max-width および max-height は max(min, max) として扱い、 min ≤ max が常に成り立つようにする。この表では w と h は 幅および高さの計算結果を表す […]
   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)、 最小内側高 (min inner height)、 および 最大内側高 (max inner height) とし、それぞれ解釈されなければなりません。 対象となるのは次の文です。
   1. 仮の使用高 (tentative used height) は […] により計算される。
   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">This div occupies the left half.</div>
<div class="split">This div occupies the right half.</div>
</div>

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

スタイルシートの著者は、ボタン、アクティブなフォームフィールド、イメージマップなどの ビジュアルオブジェクトの周りにアウトラインを描いて、目立たせたいことがあります。 アウトラインは、次の点で border と異なります。

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 プロパティ

outline プロパティ群で作成されるアウトラインはボックスの「上」に描画されます。 すなわち、アウトラインは常に最前面にあり、 ボックス自身や他のどのボックスの位置や大きさにも影響を与えません。 したがって、アウトラインを表示したり非表示にしたりしても reflow は発生しません。

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

アウトラインの各部分は、いくつかの辺が開いたままであるのではなく （行が分割されるときにインライン要素の border がそうなるように）、 完全につながっているべきです。

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

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

ユーザーエージェントは、ユーザーに「フォーカス」という概念が適切に伝わるような領域を 包含するアウトラインを決定するアルゴリズムを使用すべきです。

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

outline-width プロパティは、 border-width と同じ値を受け付けます (CSS Backgrounds 3 § 3.3 線の太さ: border-width プロパティ)。

outline-style プロパティは、 border-style と同じ値を受け付けます (CSS Backgrounds 3 § 3.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 つすべてを設定します。

注: アウトラインはすべての辺で同じです。 border とは対照的に、 outline-top や outline-left などのプロパティは存在しません。

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

button { outline: thick solid }

グラフィカルユーザーインターフェイスでは、要素の周りにアウトラインを描画して、 ページのどの要素にフォーカスがあるかをユーザーに伝えることがあります。 これらのアウトラインは border とは別のものであり、 アウトラインのオン・オフを切り替えても文書が再レイアウトされるべきではありません。 フォーカスとは、文書内でユーザー操作の対象となっているもの （例: テキストの入力やボタンの選択）を指します。

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

負の値を指定した場合、アウトラインは ボーダーボックス内側に向かって縮むようにしなければならない。 アウトラインが描く形状の外側の高さおよび幅の両方は、 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 プロパティの値に関わらず、 次のものにも適用してよいとされています。

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

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

注: resize プロパティは、 将来的に、CSSPseudoElement インターフェイス（[css-pseudo-4] 参照）の実装が行われた場合には、 生成コンテンツにも適用される可能性があります。

要素がユーザーによってリサイズされると、 ユーザーエージェントは 要素の width および height プロパティを、 ユーザーが示したサイズに対応する px 単位の長さ値に設定します。 これは、その要素の style 属性 DOM 内に設定され、 既存の宣言（もしあれば）を、!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.2. オーバーフローの省略記号: text-overflow プロパティ

このプロパティは、ブロックコンテナー要素（「ブロック」）の インライン進行方向にある 行ボックスの終端 をインラインコンテンツがオーバーフローするときのレンダリングを指定します。 ブロックの overflow が visible 以外である場合に適用されます。

テキストがオーバーフローするのは、 折り返しが禁止されている場合（例: white-space: nowrap） や、1 語がボックスに収まらないほど長い場合などです。 各値の意味は次のとおりです。

clip

ブロックコンテナー要素からはみ出したインラインコンテンツを切り詰めます。 文字は部分的にしかレンダリングされない場合があります。

ellipsis

切り詰められたインラインコンテンツを表すために、三点リーダ（U+2026）をレンダリングします。 実装では、言語・スクリプト・書字方向により適した 他の省略記号を代用してもよく、 省略記号が利用できない場合には 3 つのドット "..." を使用してもかまいません。

このプロパティ定義では可読性のため「文字 (character)」という用語を使用していますが、 実装上は「書記素クラスター」[UAX29] を意味します。

ellipsis 値に対しては、 実装は、行の 終端 端で ellipsis を収めるために必要な文字や 原子的インラインレベル要素 を非表示にしなければなりません。 そして、残ったインラインコンテンツの 終端 端に 直ちに隣接して ellipsis を配置します。 行の最初の文字または 原子的インラインレベル要素 は、 省略されるのではなく切り詰められなければなりません。

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

ellipsis の詳細

• ellipsis はレンダリングのみに影響し、レイアウトやポインターイベントの配送には影響してはなりません。 UA は、ellipsis 上でのポインターイベントを、 text-overflow が none であるかのように、 省略された要素に配送すべきです。
• ellipsis はブロックに従ってスタイルおよびベースライン整列されます。
• ellipsis は相対位置指定やその他のグラフィック変形の後に適用されます。
• ellipsis を描画するためのスペースが不足している場合は、 ellipsis 自体のレンダリングを切り詰めます （行の中立文字が text-overflow:clip で切り詰められる側と同じ側で）。

ellipsis とユーザーインタラクション

• ユーザーがコンテンツと対話しているとき （例: 編集、選択、スクロール中）は、 UA は text-overflow: ellipsis を text-overflow: clip として扱ってもかまいません。
• ellipsis を選択すると、省略されたテキストが選択されるべきです。 省略されたテキストがすべて選択されている場合、 UA は ellipsis にも選択表示を与えるべきです。 省略されたテキストの一部のみが選択されている場合の挙動は、 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>

注: ellipsis が配置される行の側は、 ブロックの direction に依存します。 例えば、overflow: hidden かつ右から左方向 （direction: rtl）のブロックでは、 インラインコンテンツは 左側 でクリップされるため、 text-overflow の ellipsis も 左側 に配置されて、 切り詰められたコンテンツを表すことになります。

ellipsis とスクロールインターフェイスの相互作用

この節は、text-overflow が text-overflow:clip 以外（クリップ以外の text-overflow） であり、かつ overflow が scroll である要素に適用されます。

要素の text-overflow がクリップ以外で、 そのテキストのインライン進行方向に対する overflow が scroll であり、 UA がスクロール機構（例: 要素にスクロールバーがある、タッチ操作でスクロールできる、など）を提供する場合、 より良いユーザー体験のために追加の実装上の詳細があります。

要素がスクロールされると（例: ユーザー操作や DOM 操作によって）、 その要素のコンテンツのより多くの部分が表示されます。 text-overflow の値は、その要素のコンテンツがより多く表示されるかどうかに影響すべきではありません。 クリップ以外の text-overflow が設定されている場合、 追加のコンテンツがビューにスクロールされるにつれて、 実装は収まる範囲であれば追加コンテンツを表示し、 クリップされるはずのコンテンツ（もしくは ellipsis／文字列を収めるために必要なコンテンツ）のみを 切り詰めるべきです。 そして要素がコンテンツの端を表示できるまで十分にスクロールされたときには、 省略記号／文字列ではなく、そのコンテンツを表示すべきです。

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>

スクロール中は、実装は ellipsis のレンダリングを調整してもかまいません （例えば、行端ではなくボックス端に揃えるなど）。

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

6.1. ポインター操作

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

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

注: CSS Backgrounds 3 § 4.1 曲線半径: border-radius プロパティ によれば、 border edge は border-radius の影響を受けます。

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

注: ヒットテストの詳細は 本仕様の対象外です。 ヒットテストは将来の CSS または HTML の改訂で定義されることが期待されます。

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

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

各値の意味は次のとおりです。

<cursor-image>

cursor プロパティの最初の（任意の）構成要素は、 画像ベースのカーソルのリストです。 ユーザーエージェントがあるカーソルを処理できない場合は、 2 番目のカーソルを試さなければなりません。以下同様です。 これらの著者定義カーソルをいずれも処理できない場合は、 リスト末尾のキーワードベースのカーソルを使用しなければなりません。

<cursor-image> の構文は次のとおりです。

<cursor-image> = <url> <number>{2}?

ユーザーエージェントは、URL で指定されたリソースからカーソルを取得します。 準拠したユーザーエージェントは、 <url> の代わりに、 そのスーパーセットである <image> をサポートしてもかまいません。

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

• [PNG] で定義されている PNG
• [SVG11] で定義されている SVG。 secure static mode [SVG2] において、 自然なサイズ (natural size) を持つもの。
• その他、他のプロパティにおける <image> としてサポートされている 任意の非アニメーション画像ファイル形式 （例: background-image プロパティ）

さらに UA は、次の画像ファイル形式をサポートすべきです。

• [SVG11] で定義されている SVG。 secure animated mode [SVG2] において、 自然なサイズ を持つもの。
• その他、他のプロパティにおける <image> としてサポートされている任意のアニメーション画像ファイル形式 （例: background-image プロパティ）

UA は、追加のファイル形式（SVG を含む）もサポートしてよく、 それらが 自然なサイズ を持たない場合でも、 secure static mode または secure animated mode ([SVG2]) であってよいとされています。

注: CSS ワーキンググループは当初、 自然なサイズを持つかどうかに関わらず すべての SVG をサポートする意図でした。 自然なサイズを持たない SVG のサポートは、 実装の欠如により必須から任意へと格下げされました。

注: 本仕様書執筆時点（2015 年春）では、 一般的なデスクトップブラウザーでカーソルにサポートされているファイル形式は、 Microsoft が設計した .ico および .cur ファイル形式のみです。 これらの形式についてはオープンな仕様が存在しないため、 規範的な要件にはできませんが、 レガシーコンテンツとの互換性のため、 UA はこれらをサポートすることが推奨されます。 これらの形式についての情報は Wikipedia に記載があります。

default object size（既定オブジェクトサイズ）は、 UA の OS 上で一般的なカーソルのサイズに基づいて決定される、 UA 定義のサイズです。

concrete object size は、 既定のサイズ決定アルゴリズム を用いて決定されます。 OS が、ある上限サイズを超えるカーソルを レンダリングできない場合には、 その上限サイズを超えるカーソルは その OS がサポートするサイズ範囲内に収まるように縮小されなければなりません。 その際、自然なアスペクト比 を持つ場合は、 それを維持しなければなりません。

任意の 2 つの <number> 値は、 画像の左上からのオフセットとして、 画像内の正確なカーソル位置（ホットスポット）の X および Y 座標を与えます。

注: 本仕様は、 各種 <image> 型の座標系の定義方法については扱わず、 [CSS4-IMAGES] に委ねます。

値が省略された場合は、 画像リソース内で定義された自然なホットスポットが使用されます。 自然なホットスポットがない場合は、 画像の左上隅が使用されます（0 0 が指定されたかのように扱われます）。

ホットスポットの X または Y 座標 （明示的に指定された場合でも画像から取得される場合でも）が カーソル画像の外に出ている場合は、 それぞれ独立にクランプして収まるようにしなければなりません。

<cursor-predefined>

必須の <cursor-predefined> キーワードは、 使用する事前定義カーソル、あるいは <url> が指定されていて いずれも正常に使用できない場合に用いるフォールバックカーソルを 指定します。

§ 6.1.1.1 Predefined Cursors に、 すべての <cursor-predefined> キーワードと その意味が記載されています。

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

6.1.1.1. 事前定義カーソル

<cursor-predefined> 生成規則は、 ほとんどの OS に存在する多くの事前定義カーソルを包含します。 その構文は次のとおりです。

<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 とは異なります。 多くの場合、回転するビーチボールや、 矢印に時計や砂時計が付いた形でレンダリングされます。

wait

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

選択用カーソル

cell

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

crosshair

単純な十字線（たとえば「+」記号に似た短い線分）です。 二次元ビットマップ選択モードを示すためによく使用されます。

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

列（item/column）が水平方向にリサイズ可能であることを示します。 多くの場合、左右を向いた矢印に、その間を区切る縦棒が描かれます。

row-resize

行（item/row）が垂直方向にリサイズ可能であることを示します。 多くの場合、上下を向いた矢印に、その間を区切る横棒が描かれます。

all-scroll

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

ズーム用カーソル

zoom-in

zoom-out

何かをズームイン／ズームアウト（拡大／縮小）できることを示します。 多くの場合、中央に「+」または「-」が描かれた虫眼鏡としてレンダリングされ、 それぞれ zoom-in と zoom-out を表します。

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

文書 キャンバス (canvas) は、 文書が描画される無限の面です [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 プロパティを使用してはなりません。

ユーザーは、悪いサイトやレガシー実装を回避するための修復ユースケースに限り、 user スタイルシートのルールのような形で ime-mode プロパティを使用してもかまいません。例:

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

この例の CSS を user スタイルシートファイルに置くことで、 パスワード入力フィールドが既定の挙動を取るよう強制することができます。

本仕様は、レガシー ime-mode 実装の機能や、 それらが具体的に何をサポートしているかを文書化しようとはしません。 そのような方向性を追求・推奨するのは妥当ではないと判断しているためです。

付録 A: 謝辞

この付録は 参考 です。

この仕様は 1999 年から現在に至るまで、主として Tantek Çelik によって編集・執筆されました。 当初は Microsoft を代表して、その後は招待専門家として、 そして最近では Mozilla を代表して作業しています。

Florian Rivoal（Bloomberg を代表して本仕様に取り組み）には、 www-style メールからの issue の記録、 解決案と変更提案、 特に box-sizing プロパティについての 大幅に改善された詳細の調査・執筆に対して感謝します。

以下の方々からのフィードバックおよび貢献にも感謝します。 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: 変更点

この付録は 参考 です。

2018 年 6 月 21 日の勧告 (REC) からの変更点

• 候補修正 1: スクロールコンテナー を参照するようにし、 overflow が visible 以外の値であることを条件とする 旧い記述を置き換えました。これにより clip も含まれるようになりました。
• 候補修正 2: outline-width の算出値を、 border 幅としてスナップ されるものとしました。
• 候補修正 3: 算出値とアニメーション型の定義を更新し、明確化しました。
• 候補修正 4: outline-style: none に基づき outline-width の算出値が 0 になる 特例を削除しました。
• 他の仕様との一貫性を保つため、 「intrinsic width/height/aspect ratio/size」という用語の関連する用法を 「natural」に置き換えました。
• プロパティ定義から "Media" 項目を削除しました。 その意味は適切に定義されたことがなく、有益な情報も追加していないためです。
• 他の CSS 仕様との一貫性のため、値の定義 セクションを追加しました。
• cursor プロパティの構文説明を、 可読性向上のために再構成しました。
• Web Platform Tests のカバレッジを追加しました。
• プライバシーとセキュリティの考慮事項を別々の節に分割しました。
• 他の CSS モジュールへの参照を、より新しいものに更新しました。
• その他、さまざまな編集上の改善を行いました。

2017 年 3 月 2 日の候補勧告 (CR) からの変更点

• 参照を最新バージョンに更新
• resize プロパティに関する編集上の明確化
• レベル 3 からレベル 4 へ、（at risk だった）方向付きフォーカスナビゲーションプロパティを移動
• HTML における cursor の イメージマップに関する特別な扱いについての参考リンクを追加
• 実装者のコンセンサスを反映するため、 text-overflow がポインターイベントに与える影響 （text-overflow: ellipsis を clip として扱うべき場面）を SHOULD として明確化 （対応するテスト）。
• UA の UI 状態を反映するため、 UA が cursor プロパティを無視できることを明確化
• 自然なサイズを持たない SVG 画像をカーソルに使用することについて、 サポートを必須から任意に変更しつつ、仕様を実装に合わせて調整 （対応するテスト更新）。
• 実装に合わせて仕様を調整し、 cursor: auto が 選択可能 なテキストおよび編集可能な要素上では text のように振る舞うように規定 （対応するテスト）。

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

W3C TAG は、 仕様編集者が参考として回答するための Self-Review Questionnaire: Security and Privacy を作成中です。

Questions to Consider に従い:

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

   いいえ。

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

   いいえ。

3. この仕様は、ブラウジングセッションをまたいで オリジン固有の新たな状態を導入しますか？

   いいえ。

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

   いいえ。

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

   いいえ。

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

   いいえ。

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

   いいえ。

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

   いいえ。

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

   いいえ。

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

    いいえ。

11. この仕様は、第一者コンテキストと第三者コンテキストで挙動を区別しますか？

    いいえ。

12. この仕様は、ユーザーエージェントの「シークレット（プライベート）モード」において どのように動作すべきですか？

    通常と変わりません。

13. この仕様は、ユーザーのローカルデバイスへデータを永続化しますか？

    いいえ。

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

この付録は 参考 です。

W3C TAG は、 仕様編集者が参考として回答するための Self-Review Questionnaire: Security and Privacy を作成中です。

Questions to Consider に従い:

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

   読み込みについては「はい」、実行については「いいえ」です。 cursor プロパティは <image> 値を受け付け、 それには読み込むべき URL が含まれることがあります。 これらはスクリプトを含む SVG 文書である場合もありますが、 本仕様はスクリプトを実行してはならないと定めています。

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

   はい。 cursor および caret-color プロパティにより、 ページは UA のネイティブ UI におけるカーソルやテキスト挿入キャレットの表示を変更できます。 さらに、outline-style プロパティの auto 値（および outline ショートハンド）により、 ページは任意の要素の周囲に、 ネイティブ UI によるフォーカスアウトライン表示に相当するものを表示できるようになります。

3. この仕様は、既定のセキュリティ特性を弱めることを許しますか？

   いいえ。

付録 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 無指定、または size=1 - ポップアップメニュー */
  display: inline-block;
  height: 1em;
  overflow: hidden;
}

select[size]:active {
/* size が 1 より大きい active な 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
}

*/