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

Editor’s Draft,

This version:
https://drafts.csswg.org/css-ui/
Latest published version:
https://www.w3.org/TR/css3-ui/
Previous Versions:
https://www.w3.org/TR/2015/WD-css3-ui-20150707/
Test Suite:
http://test.csswg.org/suites/css-ui-3_dev/nightly-unstable/
Issue Tracking:
GitHub
https://wiki.csswg.org/spec/css3-ui
Editors:
Tantek Çelik (Mozilla)
Florian Rivoal (On behalf of Bloomberg)

概要

この仕様は、HTMLおよびXML(XHTMLを含む)をスタイル付けするためにCSSレベル3に提案される、ユーザーインターフェイスに関連するプロパティおよび値を説明する。この仕様は、CSSレベル2リビジョン1のプロパティおよび値からユーザーインターフェイスの関連する機能を収録し、拡張する。この仕様は、文書における基本的なユーザーインターフェイス要素をスタイル付けするためにさまざまなプロパティおよび値を使用する。

CSSは、画面、紙、音声などで、(HTML文書やXML文書などの)構造化された文書のレンダリングを表現するための言語である。

この文書の位置付け

これはエディターズドラフトの公開コピーである。エディターズドラフトは議論のためにのみ提供されており、いつでも変更されうる。この出版物は、W3Cによってその内容の保証を意味するものではない。進行中の作業以外のものとしてこの文書を引用しないこと。

GitHubイシューは、この仕様の議論のために望ましい。issueを記入する際には、“css-ui”をsubjectに含めてもらいたい。できればこのように: “[css-ui]…コメントの要約…”すべてのイシューおよびコメントはアーカイブされ昔に使われたアーカイブも存在する。

この文書は(Style Activityの一部である)CSS Working Groupによって作成された。

この文章は2004年2月6日のW3C特許ポリシーの下で活動するグループによって作成された。W3Cは、グループの成果物に関するあらゆる開示特許の公開リストを管理する。ここには、特許開示にあたっての指示も含まれている。特許について十分に知識のある人物が、仕様にEssential Claim(s)が認められると判断した場合は、W3C特許ポリシーの第6章に従い情報を開示する必要がある。

この文書は、2015年9月1日のW3C Process Documentによって管理される。

次の機能は、不安定でありCR期間中に破棄される可能性がある:

“不安定(At-risk)”はW3Cプロセスの専門用語であり、必ずしも機能が削除または遅延される危険性があることを意味するものではない。それは、機能が時宜を得た方法で難しさの存在を相互運用可能に実装されるかもしれず、新しいCRを公開することなく、必要に応じてPR段階に移行する際にWGにドロップすることを可能にするようなマークをワーキンググループが考えていることを意味する。

1. 概論

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

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

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

1.1. 目的

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

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

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

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

3.1. box-sizingプロパティ

プロパティ名: box-sizing
値: content-box | border-box
初期値: content-box
適用要素: widthまたはheightを受け入れるすべての要素
継承: no
パーセンテージ: 利用不可
メディア: visual
算出値: 指定値
アニメーション型: discrete
content-box
これは、CSS2.1で指定されるような幅および高さの動作である。指定の幅および高さ(および、それぞれの最小値または最大値プロパティ)は、要素のコンテンツボックスの幅および高さにそれぞれ適用する。要素のパディングおよびボーダーはレイアウトされ、指定の幅および高さの外に描かれる。
border-box
この要素上の幅および高さ(および、それぞれの最小値または最大値プロパティ)に対する長さおよびパーセンテージは、要素のボーダーボックスを決定する。つまり、要素に指定される任意のパディングまたはボーダーはレイアウトされ、この指定幅と高さの内側に描かれる。コンテンツ幅および高さは、指定されるwidthheightプロパティから各辺のボーダーとパディング幅を差し引くことによって算出される。コンテンツ幅および高さは負になることができないため([CSS21] 10.2節)、この計算は0を下限にする。たとえばgetComputedStyle()を通して公開されるような使用値もまた、ボーダーボックスを参照する。

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

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

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

box-sizing: content-box box-sizing: border-box
min inner width min-width max(0, min-widthpadding-leftpadding-rightborder-left-widthborder-right-width)
max inner width max-width max(0, max-widthpadding-leftpadding-rightborder-left-widthborder-right-width)
min inner height min-height max(0, min-heightpadding-toppadding-bottomborder-top-widthborder-bottom-width)
max inner height max-height max(0, max-heightpadding-toppadding-bottomborder-top-widthborder-bottom-width)

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

  1. 10.3.3において、次のフレーズで2番目のwidthコンテンツ幅として解釈されるものである:If width is not auto and border-left-width + padding-left + width + [...]
  2. 10.3.7において、widthは次の等式においてコンテンツ幅として解釈されるものである:left + margin-left + border-left-width + padding-left + width + [...]
  3. 10.4において、widthheightmin-widthmax-widthmin-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において、widthheightmin-heightおよびmax-heightは、次のフレーズにおいてコンテンツ幅コンテンツ高さ最小内部高さおよび最大内部高さとしてそれぞれ解釈されるものである:
    1. 仮使用高さは計算される[...]
    2. 仮の使用高さがmax-heightより大きい場合、上記の規則が再び適用されるが、今回はheightの算出値としてmax-heightの算出値を用いる。
    3. 結果の高さがmin-heightより小さい場合、上記の規則を再度適用するが、今回はheightの算出値としてmin-heightを用いる。
    4. [...]使用幅と高さを見つけるために上記の最小値と最大値の幅のもとでアルゴリズムを使用する。その後、あたかも算出値であるかのように、結果の幅と高さを使用して、上記の"高さとマージンを計算"のもとに規則を適用する。

例:

均等にスペースを共有するbox-sizingの使用

この例は、divコンテナ内に固定サイズのボーダーをもつ、2つのdivを均等で水平に分割するためにbox-sizingを使用している。別の方法で、追加のマークアップを必要とする。

CSSの例:

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

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

HTMLの断片:

<div class="container">
<div class="split">This div occupies the left half.</div>
<div class="split">This div occupies the right half.</div>
</div>

サンプルCSSとHTMLのデモンストレーション:

This div should occupy the left half.
This div should occupy the right half.
The two divs above should appear side by side, each (including borders) 50% of the content width of their container. If instead they are stacked one on top of the other then your browser does not support box-sizing.

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

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

  1. アウトラインは、スペースを取らない。
  2. アウトラインは、矩形でなくてもよい。
  3. ユーザーエージェントは、多くの場合:focus状態で要素のアウトラインを描く。

アウトラインのプロパティは、動的なアウトラインの見栄えを制御する。

このアウトラインのレンダリングのスタックは、プラットフォームごとの優れたユーザーエクスペリエンスを提供するために、明示的に実装に任される。これは、CSS 2.1で定義されたとおりにアウトラインのスタックに優先する。

とりわけ他の方法でページと情報をやりとりすることができないかもしれない障害をもつ人々において、キーボードのユーザーは、:focus状態で要素上の可視であるアウトラインに依存し、よって著者は代替ハイライトメカニズムが提供されることを確認することなしに、そのような要素上のアウトラインを不可視にしてはならない。

アウトラインにtransformを適用するレンダリングは、CSS3-UIで明示的に未定義のままである。

4.1. outlineプロパティ

プロパティ名: outline
値: [ <outline-color> || <outline-style> || <outline-width> ]
初期値: 個々のプロパティを参照
適用要素: すべての要素
継承: no
パーセンテージ: 利用不可
メディア: visual
算出値: 個々のプロパティを参照
アニメーション型: 個々のプロパティを参照

4.2. outline-widthプロパティ

プロパティ名: outline-width
値: <border-width>
初期値: medium
適用要素: すべての要素
継承: no
パーセンテージ: 利用不可
メディア: visual
算出値: 絶対長さ、アウトラインスタイルがnoneである場合は0
アニメーション型: discrete
Amination type: length

4.3. outline-styleプロパティ

プロパティ名: outline-style
値: auto | <border-style>
初期値: none
適用要素: すべての要素
継承: no
パーセンテージ: 利用不可
メディア: visual
算出値: 指定値
アニメーション型: discrete

4.4. outline-colorプロパティ

プロパティ名: outline-color
値: <color> | invert
初期値: invert
適用要素: すべての要素
継承: no
パーセンテージ: 利用不可
メディア: visual
算出値: invertの算出値はinvertとなる。<color>値について、算出値は、[CSS3COLOR] colorに対して定義されるとおりである。
アニメーション型: color

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

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

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

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

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

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

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

outline-widthプロパティはborder-widthと同じ値を受け入れる([CSS3BG]4.3節)。

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

outline-colorプロパティは、すべての色と同様に、キーワードinvertを受け入れる。Invertは画面上のピクセルの色の反転を実行することを期待する。これは、背景色に関係なくフォーカスのボーダーが可視であることを保証するためのありふれたトリックである。

適合ユーザーエージェントは、画面上のピクセルの色の反転をサポートしないプラットフォーム上のinvert値を無視してもよい。

ユーザーエージェントがinvert値をサポートしない場合、解析時にその値を拒否しなければならず、outline-colorプロパティの初期値は、currentColor [CSS3COLOR]キーワードとなる。

outlineプロパティは略式プロパティであり、outline-styleoutline-widthoutline-colorの3つすべてを設定する。

注:アウトラインはすべての辺で同一である。ボーダーとは対照的に、outline-topoutline-leftプロパティなどは存在しない。

この仕様は、複数の重複するアウトラインが描画される方法、またはどのようにアウトラインが他の要素の後ろに隠れているボックスの一部に描かれるかを定義しない。

例:

BUTTON要素の周囲に太いアウトラインを描画する例は次のとおり:

button { outline: thick solid }

グラフィカルユーザーインターフェイスは、ページ上の要素がフォーカスを持つことをユーザーに伝えるために要素の周囲にアウトラインを使用してもよい。このアウトラインは任意のボーダーに加えて、アウトラインの切り替えは、文書にリフローをもたらすべきでない。フォーカスは、文書でユーザー対話の主体となる(たとえば、テキストを入力する、ボタンを選択する、など)。

例:

たとえば、フォーカス時に要素の周囲に太い黒線を、そしてアクティブ時に太い赤線を描画するために、以下の規則が使用可能である:

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

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

4.5. outline-offsetプロパティ

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

プロパティ名: outline-offset
値: <length>
初期値: 0
適用要素: すべての要素
継承: no
パーセンテージ: 利用不可
メディア: visual
算出値: 絶対単位(pxまたは物理)の<length>
アニメーション型: length

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

例:

たとえば、フォーカス持つまたはアクティブである、アウトラインとフォーカスと要素との間のスペースを2px残すために、次の規則を使用することができる:

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

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

注:負の値の制約は、相互運用性の問題のために不安定な機能であり、したがって必須なものから義務的なものまで下りるだろう。

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

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

5.1. resizeプロパティ

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

プロパティ名: resize
値: none | both | horizontal | vertical
初期値: none
適用要素: visible以外のoverflowをもつ要素、およびオプションで画像、映像、インラインフレームのような置換要素
継承: no
パーセンテージ: 利用不可
メディア: visual
算出値: 指定値
アニメーション型: discrete
none
ユーザーエージェントは、要素でリサイズするメカニズムを提供せず、ユーザーが要素をリサイズする直接的な操作メカニズムを与えない。
both
ユーザーエージェントは、ユーザーが要素の高さと幅の両方の調整を可能にする双方向のリサイズメカニズムを提供する。
horizontal
ユーザーエージェントは、ユーザーに要素の幅のみの調整を可能にする水平方向のリサイズメカニズムを提供する。
vertical
ユーザーエージェントは、ユーザーに要素の高さのみの調整を可能にする垂直方向のリサイズメカニズムを提供する。

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

注:リサイズメカニズムは、スクロールメカニズムと同じではない。スクロールメカニズムは、ユーザーにどの要素のコンテンツの一部を表示するかの決定を可能にする。リサイズメカニズムは、ユーザーに要素のサイズの決定を可能にする。

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

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

注:Interface CSSPseudoElementの実装が存在する場合、resizeプロパティは、生成されるコンテンツに将来適用してもよい。

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

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

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

ユーザーエージェントは、ユーザーにmin-widthmax-widthmin-heightおよびmax-heightによって課されるものを超えない他の制約をもつ要素のリサイズを可能にしなければならない。(現在Firefoxのみがこれをサポートするので、"must"は不安定であり、"should"に格下げされるかもしれない)。

注:たとえば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プロパティ

プロパティ名: text-overflow
値: [ clip | ellipsis | <string> ]{1,2}
初期値: clip
適用要素: ブロックコンテナ
継承: no
パーセンテージ: 利用不可
メディア: visual
算出値: 指定値
アニメーション型: discrete

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

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

clip
ブロックコンテナ要素をオーバーフローするインラインコンテンツを切り取る。文字は部分的にのみレンダリングされてもよい。
ellipsis
切り抜かれたインラインコンテンツを表現するための省略記号文字(U+2026)をレンダリングする。省略文字が使用不能である場合、実装は、より多くの言語、スクリプトまたはwriting-modeに適切な省略記号、すなわち3つのドット"..."で代用してもよい。
<string>
切り抜かれたインラインコンテンツを表現するために与えられた文字列をレンダリングする。与えられた文字列は双方向目的のために独立した段落として扱われる。

注:<string>値、2値構文"{1,2}"、および機能性はすべて不安定である。

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

1つの値が存在する場合、値は終端行ボックス辺にのみ適用される。2つの値が存在する場合、最初の値は行左端に適用され、2番目の値は行右端に適用される。用語終端行左端および行右端は、[CSS3-WRITING-MODES]で定義される。

注:矢印のような指向文字の使用を容易にするために、2つの値が存在する場合に始端および終端よりも行左端および行右端の使用は意図的である。

省略記号および文字列値について、実装は、省略記号/文字列に合わせるために必要に応じて行の適用可能な端で文字および分割不能なインラインレベル要素を非表示にしなければならない。省略記号/文字列は残りのインラインコンテンツの適用可能な端にすぐに隣接よう配置する。行の最初の文字または分割不能なインラインレベル要素は省略でなく、切り取られなければならない。

省略詳細

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

例:

テキストオーバーフローの例

この例は、次元をオーバーフローするテキストを持つブロックコンテナ要素のテキストのオーバーフローの設定を説明する。

divに対するCSS例:

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

サンプルHTML断片、レンダリング、ブラウザーの見え方:

HTML レンダリング例 ブラウザー表示
<div>
CSS IS AWESOME, YES
</div>
First, a box with text drawing outside of it.
CSS IS AWESOME, YES
<div style="text-overflow:clip; overflow:hidden">
CSS IS AWESOME, YES
</div>
Second, a similar box with the text clipped outside the box.
CSS IS AWESOME, YES
<div style="text-overflow:ellipsis; overflow:hidden">
CSS IS AWESOME, YES
</div>
Third, a similar box with an ellipsis representing the clipped text.
CSS IS AWESOME, YES
<div style="text-overflow:ellipsis; overflow:hidden">
NESTED
 <p>PARAGRAPH</p>
WON’T ELLIPSE.
</div>
Fourth, a box with a nested paragraph demonstrating anonymous block boxes equivalency and non-inheritance into a nested element.
NESTED

PARAGRAPH

WON’T ELLIPSE.

注:省略記号が配置されている行の辺は、ブロックのdirectionに依存する。たとえば、オーバーフロー非表示の右から左(direction: rtl)ブロックは側にインラインコンテンツを切り取り、したがって、その切り取られたコンテンツを表すために側にテキストのオーバーフロー省略記号を配置する。

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

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

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

要素がスクロールされる(たとえば、ユーザーによるDOM操作)場合、要素のコンテンツの詳細が表示される。text-overflowの値は、要素の内容の詳細が表示されるかどうかに影響すべきでない。非クリップのテキストオーバーフローが設定される場合、より多くのコンテンツがビューにスクロールされるので、実装は、要素が省略記号/文字列よりむしろ表示されるべきコンテンツを指すコンテンツの端を表示するために十分にスクロールされるまで、追加の内容が適合するものを表示すべきであり、そうでなければ切り取られるコンテンツを切り詰める(または省略記号/文字列のためのスペースを確保する必要がある)。

例:

この例は、上記の動作を実証するために、オーバーフロースクロールをもつ要素のテキストオーバーフローを使用する。

CSSの例:

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

HTMLの断片:

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

サンプルCSSとHTMLのデモンストレーション:

CSS is awesome, especially when you can scroll to see extra text instead of just having it overlap other text by default.

一部のコンテンツはビューにスクロールされるので、他のコンテンツは、他の側のビューの外にスクロールするかもしれない。そのコンテンツのブロックコンテナ要素がスクロールしても同じであり、かつ非クリップ値である開始辺に適用する値とともに、text-overflowの算出値が2つの値を持つ場合、実装は、上記の値の定義で説明したものと同じ詳細をもつ、切り取ったコンテンツの代わりに省略記号/文字列をレンダリングしなければならない。ただしブロック方向(directionプロパティごと)の始端位置(終端ではなく)で描かれる場合を除く。

コンテンツがスクロールされている間、実装は、省略記号/文字列のレンダリングを調整してもよい(たとえば、行端よりむしろボックス端に配置する)。

例:

text-overflow: ellipsis ellipsisを除いて前の例と同じ実証:

CSS is awesome, especially when you can scroll to see extra text instead of just having it overlap other text by default.

開始と終了の省略記号/文字列の両方に十分なスペースが存在する場合、終端の省略記号/文字列のみは、レンダリングされるべきである。

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

6.1. ポインターの作用

6.1.1. cursorプロパティ

プロパティ名: cursor
値: [ [<url> [<x> <y>]?,]*
[ 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
] ]
初期値: auto
適用要素: すべての要素
継承: yes
パーセンテージ: 利用不可
メディア: visual, interactive
算出値: 指定値のとおり、ただし任意の相対URLは絶対URLに変換
アニメーション型: discrete

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

注:[CSS3BG]により、ボーダー辺border-radiusによって影響を受ける。

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

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

ユーザーエージェントは、たとえばフォーム要素の一部のユーザーエージェント固有の実装内で使用されてもよい、スクロールバー、リサイザー、またはその他のネイティヴUIウィジェットのようなネイティヴユーザーエージェントコントロール上でカーソルプロパティを無視してもよい。

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

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

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

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

ユーザーエージェントは、追加のファイル形式をサポートしてもよい。

注:この仕様を書いている時点(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-resizen-resizene-resizenw-resizes-resizese-resizesw-resizew-resize
端を移動させることを示す。たとえば、se-resizeのカーソルは、動作がボックスの右下隅から開始する場合に使用される。
ew-resizens-resizenesw-resizenwse-resize
双方向のリサイズカーソルを示す。
col-resize
項目/列が水平方向にリサイズ可能であることを示す。多くの場合、項目/列を分離する縦線をもつ左右を指す矢印としてレンダリングされる。
row-resize
項目/行が垂直方向にリサイズ可能であることを示す。多くの場合、項目/行を分離する縦線をもつ上下を指す矢印としてレンダリングされる。
all-scroll
任意の方向にスクロール可能であることを示す。多くの場合、中央の点を中心に上下左右の矢印としてレンダリングされる。
ズームカーソル
zoom-in zoom-out
ズームインまたはズームアウト(拡大または縮小)できることを示す。多くの場合、zoom-inzoom-outそれぞれに、中心に"+"または"-"をもつ虫眼鏡としてレンダリングされる。

例:カーソルのフォールバック

これは、複数のカーソル値を使う例である。

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

この例は、すべてのハイパーリンク(訪問したか否かに関係なく)上のカーソルに外部のSVGカーソルを設定する([SVG]、16.8.3節)。SVGカーソルをサポートしないユーザーエージェントは、単純に次の値へ飛び、"hyper.cur"カーソルの使用を試みる。そのカーソル形式もサポートされない場合、ユーザーエージェントは、明示的なホットスポットで"hyper.png"カーソルを使用することを試みるかもしれない。最終的に、ユーザーエージェントが画像のこれらカーソル形式のいずれもサポートしない場合、ユーザーエージェントは最後の値に飛び、pointerカーソルをレンダリングする。

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

文書のキャンバスは、文書がレンダリングされる無限の面である[CSS21]。どの要素もキャンバスに対応しないため、要素の上にない場合、カーソルのスタイル付けを可能にするために、キャンバスカーソルはルート要素のカーソルを再使用する。しかし、どのボックスもルート要素に対して生成されない(たとえば、ルート要素がdisplay: noneを持つ)場合、キャンバスカーソルは、プラットフォームに依存するデフォルトのカーソルである。

注:要素は不可視であるかもしれないが、依然としてボックスを生成する。たとえば、要素がvisibility: hiddenを持つがdisplay: noneでない場合、ボックスは要素に対して生成され、要素のカーソルはキャンバスに対して使用される。

6.2. 挿入キャレット

6.2.1. 挿入キャレットの色付け:caret-color

プロパティ名: caret-color
値: auto | <color>
初期値: auto
適用要素: 入力を受け入れる要素
継承: yes
パーセンテージ: 利用不可
メディア: interactive
算出値: autoの算出値はautoとなる。<color>値について、算出値は、[CSS3COLOR] colorに対して定義されるとおりである。
アニメーション型: color
auto
ユーザーエージェントは、currentColorを使用すべきである。ユーザエージェントは、おそらくcurrentColor、背景、影などに基づいて、良好な視認性および周囲のコンテンツと対比することを保証するために キャレットの色を自動的に調整してもよい。
<color>
挿入キャレットは、指定した色で着色される。

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

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

例:caret-color:#00aacc;をもつテキストエリア

注:caret-colorプロパティは不安定である。

6.3. キーボード制御

プロパティ名: nav-up, nav-right, nav-down, nav-left
値: auto | <id> [ current | root | <target-name> ]?
初期値: auto
適用要素: すべてのenabled要素
継承: no
パーセンテージ: 利用不可
メディア: interactive
算出値: 指定値
アニメーション型: discrete
auto
ユーザーエージェントは、方向ナビゲーション入力へに応答してフォーカスをナビゲートするために要素を自動的に決定する。
<id>

<id>値はIDセレクターである[SELECT]。プロパティに対応する方向ナビゲーション入力に応答して、フォーカスは、セレクターに一致するツリー順で最初の要素にナビゲートされる。

値が現在のフォーカスされる要素を指す場合、nav-プロパティへのそれぞれの方向ナビゲーション入力は無視される。同じ要素を再フォーカスする必要はない。

どの要素もセレクターに一致しない場合、ユーザーエージェントはフォーカスをナビゲーションする要素を自動的に決定する。

フォーカスが別の方法でフォーカス可能ではなかった要素にナビゲートされる場合、それだけでこの方向ナビゲーションの結果としてフォーカス可能になり、それ自体はフォーカスされる間に:focus擬似クラスは要素に一致する。

注:(別の方法でフォーカス可能でない要素のような子孫を含む)、文書ツリーで次の別の方法でフォーカス可能な要素にフォーカスを含む、「他の方法でフォーカス可能ではない」要素について検討中の他のオプションが存在した。そのような他のオプションの入力は歓迎であり、特にそのコンテンツにおける方向ナビゲーションプロパティを使用する実装経験および著者経験から、明示的に求められる。

<target-name>
<target-name>パラメーターは、フォーカスナビゲーションのターゲットフレームを示す。パラメーターは<string>であり、アンダースコア"_"文字で開始してはならない。エラーの扱い:パラメーターがアンダースコアで開始しない場合、"_parent"は親フレームにナビゲートし、"_root"はrootとして扱われ、そしてパラメーターが存在する場合に他の値はその名前まででフレームにナビゲートする。指定されたターゲットフレームが存在しない場合、パラメーターはキーワードcurrentとして扱われ、これは単に要素が属しているフレームを使用することを意味する。キーワードrootは、ユーザーエージェントがウィンドウ全体を対象とすべきであることを示す。

方向ナビゲーションキーを備えたデバイスのユーザーエージェントは、4つのそれぞれのnav-*方向のナビゲーションプロパティ(nav-up、nav-right、nav-down、nav-left)に従って、フォーカスをナビゲートすることにより応答する。この仕様は、どのデバイスのキーが方向ナビゲーションキーであるかを定義しない。

注:典型的なパーソナルコンピューターはキーボードに4つの矢印キーを持つ。1つの可能な実装は、方向ナビゲーションにこの4つの矢印キーを使用することである。アクセシビリティーとユーザーの利便性のために、ユーザーエージェントは、キーボード上のキーが方向ナビゲーションに使用される構成を許可すべきである。

6.3.1.1. 例:位置決めボタン

これはダイヤモンド型に配置されたボタンの例である。ユーザーが直接的にナビゲートを選択する際、方向フォーカスナビゲーションは、ダイヤモンド型に沿って時計回り(または反時計回り)にナビゲートするよう設定される。

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

どのようなマークアップ順序ボタンがあるのかは(この例で指定されない)、この場合無関係である。なぜなら、ボタンは位置決めされ、なおかつ、指定されるレイアウトに合理的に関連するフォーカスナビゲーションを保証することが依然として重要であるためである。

6.3.1.2. 例:フレーム内部にフォーカスを移動する

特定のフレームで要素にフォーカスを移動するには、要素のidとフレーム名の両方が必要である。

この例は、id "foo"をもつボタンから左にナビゲートできるようにする方法を示し、"sidebar"というフレーム名の中にid "bar"をもつ要素にフォーカスを移動する。

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

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

"ime-mode"は、問題がありこの仕様によって公式に廃止される、一部のブラウザーで多少実装されたプロパティである。

この実装の非相互運用性の文書が存在する。

ユーザーエージェントはime-modeプロパティをサポートすべきでない。

著者は、ime-modeプロパティを使用してはならない。

ユーザーが粗悪なサイトやレガシーな実装に対処する必要があるユースケースの修復に対してのみ、ユーザーはime-modeプロパティを使用してもよい。たとえば次のユーザースタイルシート規則のように:

例:ユーザー選択

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

このCSSの例は、デフォルトの方法で動作するようにパスワード入力フィールドを強制するユーザースタイルシートファイル内に配置されてもよい。

そのようなパスを追跡または推奨する意味がないので、この仕様は意図的に、レガシーなime-mode実装機能の一切も、ブラウザーが具体的にサポートするものも文書化を試みない。

注:より良い入力のユーザーエクスペリエンスの提供を可能にするユーザーエージェントへ情報を提供するために使用すべき複数の[HTML5]機能が存在する:

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

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

This appendix describes changes from the Candidate Recommendation (CR) of 7 Jul 2015.

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

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

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

考慮すべき質問ごとに

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

    いいえ。

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

    いいえ。

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

    いいえ。

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

    いいえ。

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

    いいえ。

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

    はい。cursorプロパティは、読み込まれたURLを含む<image>値を受け入れる。

  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 }

*/

付録E: テストスイート

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

CSSテストスイートのマニュアルに従っておよびCSS2.1テストケースオーサリングガイドラインを受けて記述された部分的なテストスイートが存在する。テストスイートは、ユーザーエージェントが仕様にユーザーエージェントの基本的な適合性を確認するのを可能にするものとする。このテストスイートはあえて徹底的なものであろうとせず、ユーザーインターフェイスの関連機能の可能な組み合わせの場合をカバーしていない。このテストは、CSSテストスイートのホームページから利用できる。

適合性

文書規約

適合性要件は、説明的な表現とRFC 2119用語の組み合わせで表現される。本文章での標準部分においてキーワード“MUST”、“MUST NOT”、“REQUIRED”、“SHALL”、“SHALL NOT”、“SHOULD”、“SHOULD NOT”、“RECOMMENDED”、“MAY”、“OPTIONAL”はRFC 2119で示されたとおりに解釈される。しかし、読みやすさのために、これらの単語は本仕様で大文字のみで出現しない。

この仕様のすべての本文は、明示的に非規範的、例、および注としてマークされた部分を除き、規範的である。[RFC2119]

この仕様の例は、"たとえば"という言葉で導入されるか、規範的な本文からclass="example"を設定し離される。このように:

これは参考情報の一例である。

参考情報の注は“注”で始まり、class="note"を設定し離される。このように:

注、これは参考情報の注である。

助言は、特別な注意を喚起するようにスタイル付けされる規範的なセクションであり、<strong class="advisement">とともに他の規範的なテキストとは別に設定される。このように:ユーザーエージェントは、アクセシブルな代替手段を提供しなければならない。

適合クラス

この仕様の適合クラスには次の3つが定義される:

style sheet
CSSスタイルシート
renderer
スタイルシートの意味を解釈し、かつスタイルシートを使って文書を表現するユーザーエージェント
authoring tool
スタイルシートを記述するユーザーエージェント

スタイルシートは、このモジュールで定義される構文プロパティを使用するスタイルシートの宣言のすべてが、このモジュールで定義される総称的なCSS文法および個々の文法に従って妥当である場合、この仕様に準拠する。

レンダラは、適切な仕様によって定義されるスタイルシートの解釈に加え、機能を正確にパースしかつ文書を適切な方法でレンダリングすることでこの仕様によって定義されるすべての機能をサポートする場合、この仕様に準拠する。しかし、デバイスの制限によってユーザーエージェントが文書を正確にレンダリングできないことは、ユーザーエージェントを非準拠にしない。(たとえば、ユーザーエージェントはモノクロのモニタで色のレンダリングを要求されない。)

オーサリングツールは、このモジュールにおける機能の総称的なCSS文法および個々の文法に従って構文的に正しいスタイルシートを既述し、かつこのモジュールで説明されるようにスタイルシートの他のすべての適合性要件を満たす場合、この仕様に準拠する。

CSSの責任ある実装に対する要求

以下の節は、現在と将来の相互運用性を促進するような方法で、責任を持ってCSSを実装するための複数の適合性要件を定義する。

部分的実装

著者がフォールバックの値を割り当てるための上位互換の解析規則を利用することができるようにするために、CSSレンダラは任意の@規則、プロパティ、プロパティの値、キーワード、その他レンダラが使用可能なサポートのレベルがない構文要素を、無効(そして必要に応じて無視)として扱わなければならない。特に、ユーザーエージェントはある1つの複数値プロパティ宣言において非サポートのプロパティの値を無視し、かつサポートされる値を選択的に履行してはならない。任意の値が無効と見なされる(サポートされない値はそうでなければならない)場合、CSSは宣言全体が無視される必要がある。

不安定な実装およびプロパティ機能

将来の安定したCSS機能との衝突を避けるために、CSSワーキンググループは、不安定な機能とCSSへの独自拡張の実装に対する次のベストプラクティスを推奨する。

CRレベル機能の実装

仕様が勧告候補の段階に達すると、実装者は、実装者が仕様に従って正しく実装されることを示すことができる任意の勧告候補レベルの機能の接頭辞のない実装を公開すべきであり、その機能の接頭辞変異形を公開すべきではない。

実装を問わずCSSの相互運用性を確立し維持するために、CSSワーキンググループは、非実験的なCSSレンダラが、任意のCSS機能の接頭辞なしの実装を公開する前に、実装レポート(そして、もし必要なら、実装レポートで使用したテストケース)をW3Cへ提出することを要請する。W3Cへ提出されたテストケースは、CSSワーキンググループによるレビューと修正の対象となる。

テストケースと実装レポートの提出に関する詳細情報は、CSSワーキンググループのウェブサイト(http://www.w3.org/Style/CSS/Test/)にある。質問は直接public-css-testsuite@w3.orgメーリングリストまで。

索引

この仕様によって定義される用語

参考文献によって定義される用語

参考文献

標準情報

[CSS-BACKGROUNDS-3]
CSS Backgrounds and Borders Module Level 3 URL: https://drafts.csswg.org/css-backgrounds-3/
[CSS-COLOR-3]
CSS Color Module Level 3 URL: https://drafts.csswg.org/css-color-3/
[CSS-IMAGES-3]
CSS Image Values and Replaced Content Module Level 3 URL: https://drafts.csswg.org/css-images-3/
[CSS-OVERFLOW-4]
CSS Overflow Module Level 4 URL: https://drafts.csswg.org/css-overflow-4/
[CSS-VALUES]
Tab Atkins Jr.; Elika Etemad. CSS Values and Units Module Level 3. 11 June 2015. CR. URL: http://dev.w3.org/csswg/css-values/
[CSS21]
Bert Bos; et al. Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification. 7 June 2011. REC. URL: http://www.w3.org/TR/CSS2
[CSS3-WRITING-MODES]
Elika Etemad; Koji Ishii. CSS Writing Modes Level 3. 15 December 2015. CR. URL: http://dev.w3.org/csswg/css-writing-modes-3/
[CSS3BG]
Bert Bos; Elika Etemad; Brad Kemper. CSS Backgrounds and Borders Module Level 3. 9 September 2014. CR. URL: http://dev.w3.org/csswg/css3-background/
[CSS3COLOR]
Tantek Çelik; Chris Lilley; David Baron. CSS Color Module Level 3. 7 June 2011. REC. URL: http://www.w3.org/TR/css3-color
[HTML]
Ian Hickson. HTML Standard. Living Standard. URL: https://html.spec.whatwg.org/multipage/
[PNG]
Tom Lane. Portable Network Graphics (PNG) Specification (Second Edition). 10 November 2003. REC. URL: http://www.w3.org/TR/PNG
[RFC2119]
S. Bradner. Key words for use in RFCs to Indicate Requirement Levels. March 1997. Best Current Practice. URL: https://tools.ietf.org/html/rfc2119
[SVG]
Jon Ferraiolo. Scalable Vector Graphics (SVG) 1.0 Specification. 4 September 2001. REC. URL: http://www.w3.org/TR/SVG/
[SVG-INTEGRATION]
Cameron McCormack; Doug Schepers; Dirk Schulze. SVG Integration. 17 April 2014. WD. URL: https://dvcs.w3.org/hg/svg2/specs/integration
[SVG2]
Nikos Andronikos; et al. Scalable Vector Graphics (SVG) 2. 15 September 2015. WD. URL: https://svgwg.org/svg2-draft/
[UAX29]
Mark Davis. Text Boundaries. 25 March 2005. Unicode Standard Annex #29. URL: http://www.unicode.org/unicode/reports/tr29/tr29-9.html

参考情報

[CSS1]
Håkon Wium Lie; Bert Bos. Cascading Style Sheets (CSS1) Level 1 Specification. 11 April 2008. REC. URL: http://www.w3.org/TR/CSS1/
[CSS4-IMAGES]
Elika Etemad; Tab Atkins Jr.. CSS Image Values and Replaced Content Module Level 4. 11 September 2012. WD. URL: http://www.w3.org/TR/css4-images/
[CSSUI]
Tantek Çelik. User Interface for CSS3. 2 August 2002. URL: http://www.w3.org/TR/css3-userint
[HTML5]
Ian Hickson; et al. HTML5. 28 October 2014. REC. URL: http://www.w3.org/html/wg/drafts/html/master/
[SELECT]
Tantek Çelik; et al. Selectors Level 3. 29 September 2011. REC. URL: http://www.w3.org/TR/css3-selectors/

プロパティ索引

Name Value 初期値 Applies to 継承 パーセンテージ メディア Amination type Anim­ation type Com­puted value
box-sizing content-box | border-box content-box widthまたはheightを受け入れるすべての要素 no 利用不可 visual discrete 指定値
outline [ <outline-color> || <outline-style> || <outline-width> ] 個々のプロパティを参照 すべての要素 no 利用不可 visual 個々のプロパティを参照 個々のプロパティを参照
outline-width <border-width> medium すべての要素 no 利用不可 visual length discrete 絶対長さ、アウトラインスタイルがnoneである場合は0。
outline-style auto | <border-style> none すべての要素 no 利用不可 visual discrete 指定値
outline-color <color> | invert invert すべての要素 no 利用不可 visual color invertの算出値はinvertとなる。<color>値について、算出値は、[CSS3COLOR] colorプロパティに対して定義されるとおりである。
outline-offset <length> 0 すべての要素 no 利用不可 visual length 絶対単位(pxまたは物理)の<length>値
resize none | both | horizontal | vertical none elements with overflow other than visible, and optionally replaced elements such as images, videos, and iframes no 利用不可 visual discrete 指定値
text-overflow [ clip | ellipsis | <string> ]{1,2} clip ブロックコンテナ no 利用不可 visual discrete 指定値
cursor [ [<url> [<x> <y>]?,]* [ 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 ] ] auto すべての要素 yes 利用不可 visual, interactive discrete 指定値のとおり、ただし任意の相対URLは絶対URLに変換
caret-color auto | <color> auto 入力を受け入れる要素 yes 利用不可 interactive color autoの算出値はautoとなる。<color>値について、算出値は、[CSS3COLOR] colorプロパティに対して定義されるとおりである。
nav-up auto | <id> [ current | root | <target-name> ]? auto すべてのenabled要素 no 利用不可 interactive discrete 指定値
nav-right auto | <id> [ current | root | <target-name> ]? auto すべてのenabled要素 no 利用不可 interactive discrete 指定値
nav-down auto | <id> [ current | root | <target-name> ]? auto すべてのenabled要素 no 利用不可 interactive discrete 指定値
nav-left auto | <id> [ current | root | <target-name> ]? auto すべてのenabled要素 no 利用不可 interactive discrete 指定値