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

W3C Recommendation,

This version:
https://www.w3.org/TR/2018/REC-css-ui-3-20180621/
Latest published version:
https://www.w3.org/TR/css-ui-3/
Editor's Draft:
https://drafts.csswg.org/css-ui/
Previous Versions:
Test Suite:
http://test.csswg.org/suites/css-ui-3_dev/nightly-unstable/
Editors:
Tantek Çelik (Mozilla)
Florian Rivoal (On behalf of Bloomberg)
Issue Tracking:
GitHub Issues

発行後に報告されたエラーや問題については、エラッタで確認されたい。


概要

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

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

この文書の位置付け

この節は、公開時点におけるこの文書のステータスについて説明する。他の文書がこの文書に取って代わるかもしれない。W3Cが現在公開しているリストとテクニカルレポートの最新版は、W3C technical reports index at https://www.w3.org/TR/で見つけることができる。

この文書はW3Cメンバー、ソフトウェア開発者、そしてその他のW3Cグループや関係者によって評価が行われ、ディレクターによってW3C勧告として承認された。この文書は安定しており、参考資料として用いたり、他の文書から引用してもよい。仕様の勧告においてW3Cの果たす役割とは、仕様に関心を集め、幅広く仕様の普及を促進することである。これにより、ウェブの機能と相互運用性の向上が期待できる。

この文書はCSS Working Groupによって作成された。

W3C Recommendationは、広く精査され、実装のための準備ができている文書である。W3Cは、誰もがこの仕様を実装し、 GitHubイシューへコメントを返すことを奨励する。

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

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

別個の実装レポートは、テストスイート内の各必須テストが少なくとも2つの独立した実装によってパスしたことを示している。

この文書の完全な変更点のリストが利用可能である。

1. 概論

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

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

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

1.1. 目的

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

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

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

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

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

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

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

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

注:長さとパーセンテージとは対照的に、(特に指定のない限り、以降の仕様によって導入される他のキーワード値だけでなく)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)

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

  1. 10.3.3において、次のフレーズで2番目のwidthコンテンツ幅として解釈されるものである:widthautoでなくかつ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の付録Eで定義されているアウトラインのスタックに取って代わる[CSS2]

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

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

4.1. アウトラインの略記:outlineプロパティ

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

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

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

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

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

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

プロパティ名: outline-color
値: <color> | invert
初期値: invert
適用要素: すべての要素
継承: no
パーセンテージ: 利用不可
メディア: visual
算出値: invertの計算値はinvertである。currentColorの計算値はcurrentColorである(CSS Color Module Level 3 §#currentColorを参照のこと)。他の<color>値のcolorプロパティを参照のこと。
規範的な順序: per grammar
アニメーション型: 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-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>
規範的な順序: per grammar
アニメーション型: 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
算出値: 指定値
規範的な順序: per grammar
アニメーション型: discrete
none
ユーザーエージェントは、要素でリサイズするメカニズムを提供せず、ユーザーが要素をリサイズする直接的な操作メカニズムを与えない。
both
ユーザーエージェントは、ユーザーが要素の高さと幅の両方の調整を可能にする双方向のリサイズメカニズムを提供する。
horizontal
ユーザーエージェントは、ユーザーに要素の幅のみの調整を可能にする水平方向のリサイズメカニズムを提供する。
vertical
ユーザーエージェントは、ユーザーに要素の高さのみの調整を可能にする垂直方向のリサイズメカニズムを提供する。

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

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

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

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

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

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

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

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

ユーザーエージェントは、ユーザーにmin-widthmax-widthmin-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プロパティ

プロパティ名: text-overflow
値: clip | ellipsis
初期値: clip
適用要素: ブロックコンテナ
継承: no
パーセンテージ: 利用不可
メディア: visual
算出値: 指定値
規範的な順序: per grammar
アニメーション型: discrete

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

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

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

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

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

双方向省略記号の例

この例は、双方向の状況の省略記号に対して空間を作るために隠されている文字を示している。

CSSの例:

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

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

HTML Reference rendering Your Browser
<div>שלום 123456</div>
123456 ם…
שלום 123456
<div dir=rtl>שלום 123456</div>
…456 שלום
שלום 123456

省略詳細

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

例:

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

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

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.

コンテンツがスクロールされている間、実装は、省略記号のレンダリングを調整することができる(例えば、行端ではなくボックス端に合わせる)。

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に変換
規範的な順序: per grammar
アニメーション型: discrete

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

注: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として動作する。
デフォルトは0である。
プラットフォーム依存のデフォルトのカーソル。多くの場合、矢印のようにレンダリングされる。
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カーソルを設定する([SVG11]、16.8.3節)。SVGカーソルをサポートしないユーザーエージェントは、単純に次の値へ飛び、"hyper.cur"カーソルの使用を試みる。そのカーソル形式もサポートされない場合、ユーザーエージェントは、明示的なホットスポットで"hyper.png"カーソルを使用することを試みるかもしれない。最終的に、ユーザーエージェントが画像のこれらカーソル形式のいずれもサポートしない場合、ユーザーエージェントは最後の値に飛び、pointerカーソルをレンダリングする。

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

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

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

6.2. 挿入キャレット

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

プロパティ名: caret-color
値: auto | <color>
初期値: auto
適用要素: すべての要素
継承: yes
パーセンテージ: 利用不可
メディア: interactive
算出値: autoの計算値はautoである。currentColorの計算値はcurrentColorである(CSS Color Module Level 3 §#currentColorを参照のこと)。他の<color>値のcolorプロパティを参照のこと。
規範的な順序: per grammar
アニメーション型: color
auto
ユーザーエージェントは、currentColorを使用すべきである。ユーザエージェントは、おそらくcurrentColor、背景、影などに基づいて、良好な視認性および周囲のコンテンツと対比することを保証するために キャレットの色を自動的に調整してもよい。
<color>
挿入キャレットは、指定した色で着色される。

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

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

注:ユーザーエージェントは、「キャレット」として数えられる追加のものがあるかもしれない。たとえば、いくつかのユーザーエージェントは、挿入キャレットと同様に動作するが、編集不可能なテキスト内を移動することができ、機能的にはキャレットである「ナビゲーションキャレット」を示すことができる。一方、cursorプロパティがautoの場合にテキスト上にカーソルを置いた際、またはcursorプロパティがtextもしくはvertical-textの要素の上にカーソルを置いた際に表示されるカーソル画像は、キャレットに似ていることもあるが、キャレットではない(カーソルである)。

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

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実装機能の一切も、ブラウザーが具体的にサポートするものも文書化を試みない。

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

付録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.

Since Candidate Recommendation

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

付録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 }

*/

適合性

文書規約

適合性要件は、説明的な表現と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つが定義される:

スタイルシート
CSSスタイルシート
レンダラー
スタイルシートの意味を解釈し、かつスタイルシートを使って文書を表現するユーザーエージェント
オーサリングツール
スタイルシートを記述するユーザーエージェント

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

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

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

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

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

部分的実装

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

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

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

CRレベル機能の実装

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

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

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

索引

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

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

参考文献

標準情報

[CSS-BACKGROUNDS-3]
Bert Bos; Elika Etemad; Brad Kemper. CSS Backgrounds and Borders Module Level 3. 17 October 2017. CR. URL: https://www.w3.org/TR/css-backgrounds-3/
[CSS-COLOR-3]
Tantek Çelik; Chris Lilley; David Baron. CSS Color Module Level 3. 15 March 2018. PR. URL: https://www.w3.org/TR/css-color-3/
[CSS-VALUES-3]
Tab Atkins Jr.; Elika Etemad. CSS Values and Units Module Level 3. 29 September 2016. CR. URL: https://www.w3.org/TR/css-values-3/
[CSS-WRITING-MODES-3]
Elika Etemad; Koji Ishii. CSS Writing Modes Level 3. 24 May 2018. CR. URL: https://www.w3.org/TR/css-writing-modes-3/
[CSS2]
Bert Bos; et al. Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification. 7 June 2011. REC. URL: https://www.w3.org/TR/CSS2/
[CSS3-IMAGES]
Elika Etemad; Tab Atkins Jr.. CSS Image Values and Replaced Content Module Level 3. 17 April 2012. CR. URL: https://www.w3.org/TR/css3-images/
[HTML]
Anne van Kesteren; et al. 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: https://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
[SVG11]
Erik Dahlström; et al. Scalable Vector Graphics (SVG) 1.1 (Second Edition). 16 August 2011. REC. URL: https://www.w3.org/TR/SVG11/
[SVG2]
Nikos Andronikos; et al. Scalable Vector Graphics (SVG) 2. 15 September 2016. CR. URL: https://www.w3.org/TR/SVG2/
[UAX29]
Mark Davis; Laurențiu Iancu. Unicode Text Segmentation. 13 June 2017. Unicode Standard Annex #29. URL: https://www.unicode.org/reports/tr29/tr29-31.html

参考情報

[CSS-CASCADE-4]
Elika Etemad; Tab Atkins Jr.. CSS Cascading and Inheritance Level 4. 14 January 2016. CR. URL: https://www.w3.org/TR/css-cascade-4/
[CSS-PSEUDO-4]
Daniel Glazman; Elika Etemad; Alan Stearns. CSS Pseudo-Elements Module Level 4. 7 June 2016. WD. URL: https://www.w3.org/TR/css-pseudo-4/
[CSS-TRANSITIONS-1]
David Baron; Dean Jackson; Brian Birtles. CSS Transitions. 30 November 2017. WD. URL: https://www.w3.org/TR/css-transitions-1/
[CSS1]
Håkon Wium Lie; Bert Bos. Cascading Style Sheets (CSS1) Level 1 Specification. 11 April 2008. REC. URL: https://www.w3.org/TR/REC-CSS1/
[CSS4-IMAGES]
Tab Atkins Jr.; Elika Etemad; Lea Verou. CSS Image Values and Replaced Content Module Level 4. 13 April 2017. WD. URL: https://www.w3.org/TR/css-images-4/

プロパティ索引

Name Value 初期値 Applies to 継承 パーセンテージ メディア アニメーション型 規範的な順序 算出値
box-sizing content-box | border-box content-box widthまたはheightを受け入れるすべての要素 no 利用不可 visual discrete per grammar 指定値
caret-color auto | <color> auto すべての要素 yes 利用不可 interactive color per grammar The computed value for auto is auto; the computed value of currentColor is currentColor (See ); see the color property for other <color> values.
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 per grammar 指定値のとおり、ただし任意の相対URLは絶対URLに変換
outline [ <outline-color> || <outline-style> || <outline-width> ] 個々のプロパティを参照 すべての要素 no 利用不可 visual 個々のプロパティを参照 per grammar 個々のプロパティを参照
outline-color <color> | invert invert すべての要素 no 利用不可 visual color per grammar The computed value for invert is invert; the computed value of currentColor is currentColor (See ); see the color property for other <color> values.
outline-offset <length> 0 すべての要素 no 利用不可 visual length per grammar 絶対単位(pxまたは物理)の<length>値
outline-style auto | <border-style> none すべての要素 no 利用不可 visual discrete per grammar 指定値
outline-width <line-width> medium すべての要素 no 利用不可 visual length per grammar 絶対長さ、アウトラインスタイルがnoneである場合は0。
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 per grammar 指定値
text-overflow clip | ellipsis clip ブロックコンテナ no 利用不可 visual discrete per grammar 指定値