W3C

CSS Values and Units Module Level 3 日本語訳

W3C Candidate Recommendation,

This version:
https://www.w3.org/TR/2016/CR-css-values-3-20160929/
Latest published version:
https://www.w3.org/TR/css-values-3/
Previous Versions:
https://www.w3.org/TR/2015/CR-css-values-3-20150611/
https://www.w3.org/TR/2013/CR-css3-values-20130730/
https://www.w3.org/TR/2013/CR-css3-values-20130404/
https://www.w3.org/TR/2012/CR-css3-values-20120828/
https://www.w3.org/TR/2012/WD-css3-values-20120308/
https://www.w3.org/TR/2011/WD-css3-values-20110906/
https://www.w3.org/TR/2006/WD-css3-values-20060919
https://www.w3.org/TR/2005/WD-css3-values-20050726
https://www.w3.org/TR/2001/WD-css3-values-20010713/
Editors draft:
https://drafts.csswg.org/css-values/
Test Suite:
http://test.csswg.org/suites/css-values-3_dev/nightly-unstable/
Editors:
Tab Atkins (Google)
fantasai
Former Editor:
(Opera Software)
Issue Tracking:
GitHub Issues

概要

このCSSモジュールは、CSSプロパティの共通の値と単位が受け入れる、またCSSプロパティの定義で値と単位を記述するために使用する構文について説明する。

CSSは、画面で、紙で、言葉でなど(HTMLやXMLなどの)構造化文書のレンダリングを記述するための言語である。

Status of This Document

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

Candidate Recommendationでの公開はW3Cメンバーの支持を意味するものではない。これは草案文書であり、いつでも更新、他の文書による置き換えや廃止扱いにされうる。進行中の作業以外のものとしてこの文書を引用することは不適切である。

この文書は(Style Activityの一部である)CSS Working GroupによってCandidate Recommendationとして作成された。この文書は、W3C Recommendationになることを意図する。この文書は、広範なレビューの機会を確保するために、少なくともまではCandidate Recommendationのままになる。

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

予備の実装レポートが利用可能である。

この文書は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プロパティの値の定義フィールドは、キーワード、データ型(これは<>の間に出現する)、およびこれらをどのように組み合わせることができるかの情報を含めることができる。より具体的なデータ型(たとえば、<spacing-limit>など)は対応するモジュールで記述される一方で、多くのプロパティで使用することができる汎用的なデータ型(最も広く使用されている<length>)は、この仕様で記述される。

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

このモジュールは、[CSS21]1.4.2.1節4.3節A.2節におけるデータ型定義を置換し、拡張する。

2. 値の定義構文

ここで説明する構文は、CSSプロパティの妥当な値の集合を定義するために使用される。プロパティ値は、1つ以上のコンポーネントを持つことができる。

2.1. コンポーネント値型

コンポーネント値の型は、複数の方法で指定される:

  1. (たとえば、autoなど)引用符なしで、リテラルに出現するキーワード値(autodiscなど)。
  2. <>の間に出現する基本データ型(たとえば、<length><percentage>など)。
  3. 同じ名前(たとえば<‘border-width’><‘background-attachment’>など)を持つプロパティと同じ値の範囲を持つ型。この場合、型名は山括弧の間に(引用符付きの完全な)プロパティ名となる。このような型は、inheritのようなCSS全域キーワードを含まない
  4. 非終端はプロパティと同じ名前を共有しない。この場合、非端末名は<spacing-limit>のように、<>の間に出現する。<border-width><‘border-width’>の間の区別に注意する。後者はborder-widthのプロパティの値として定義され、前者は他の明示的な拡張を必要とする。非終端の定義は、仕様で非終端が最初に出現した近くに典型的には位置する。

また、一部のプロパティ値の定義は、リテラルにスラッシュ(/)、カンマ(,)および/または丸括弧を含む。これらは、対応するトークンを表す。“+”のような、コンポーネント値で出現してもよいその他のキーワードは、一重引用符で囲まれて書かなければならない。

文法においてオプションの項を区切るために使用する場合、状況次第で文法で指定されるコンマは、暗黙的に省略可能である。プロパティまたは他のCSS値におけるトップレベルリスト、または関数の引数リストの中で、文法で指定されるコンマは次の場合に省略されなければならない:

たとえば、関数が順番に3つの引数を受け入れることができるが、そのすべてがオプションである場合、文法はこのように書くことができる:
example( first? , second? , third? )

文法によると、example(first, second, third)は妥当であり、example(first, second)example(first, third)example(second)も同様である。しかし、example(first, , third)は、コンマの1つがもはや2つのオプションを分けないので、無効である。同様に、example(,second)およびexample(first,)は無効である。コンマは依然としてオプションを実際に分けることを要求されるため、example(first second)もまた無効である。

コンマが暗黙的に省略可能でなかった場合、省略できる引数を厳密に表記するための文法はより複雑になり、その機能の単純性も損なわれることになるだろう。

すべてのCSSプロパティはまた、プロパティ値の単独コンポーネントとしてCSS全域キーワード値を受け入れる。読みやすさためにプロパティ値の構文定義で明示的に記載されない。たとえば、border-colorの完全な値の定義は、(<color>{1,4}と記載されるが)<color>{1,4} | inherit | initial | unsetである。

注:一般に、同一宣言中の他のコンポーネント値を持つこれらのキーワードを組み合わせは、無効な宣言を意味する。たとえば、background: url(corner.png) no-repeat, inherit;は無効である。

2.2. コンポーネント値の結合子

コンポーネント値は、次のようにプロパティ値に配置することができる:

並置は二重アンパサンドよりも強く、二重アンパサンドは二重縦線よりも強く、二重縦線は縦線よりも強い。したがって、次の2行は等価である:

  a b   |   c ||   d &&   e f
[ a b ] | [ c || [ d && [ e f ]]]

再並び替え可能な結合子(||, &&)に対して、文法の順序付けは重要でない。同じグループにおける成分は、任意の順序で配置されてもよい。したがって、次の2行は等価である:

a || b || c
b || a || c

2.3. コンポーネント値の量指定子

すべての型、キーワード、角括弧グループは、次の量指定子を付けてもよい:

繰り返しのコンポーネントの値(*+、または#で示される)の場合、ユーザーエージェントは、少なくとも20回の繰り返しのコンポーネントをサポートしなければならない。プロパティ値が繰り返しでサポートされている数よりも多く含まれる場合、それが無効であったかのように、宣言は無視されなければならない。

2.4. 結合子および量指定子のパターン

特定の数および順序で複数の独立な成分値を組み合わせるための共通の方法の小さな集合がある。具体的に、著者は、成分値の集合から、文法で指定される順序か任意の順序のいずれかで、0個以上、1つ以上、すべてを選択しなければならないことを表現したいことは、一般的である。

このすべては、結合子および量指定子の単純なパターンを利用して容易に表記することができる:

指定順 任意の順
0個以上
A? B? C?
 A? || B? || C?
1つ以上
 [ A? B? C? ]!
A || B || C
すべて
A B C 
A && B && C

"指定順"のものは、並記ですべての変形である一方で、"任意の順"のものは、結合子を用いて表記されることに注意する。

2.5. コンポーネント値と空白

別の方法で指定されない限り、空白および/またはコメントは、上記の結合子および量指定子を使用して結合されるコンポーネントの前、後および/または間に出現してもよい。

注:多くの場合、空白は実際にはトークン同士を区別するために、コンポーネント間に必要とされる。たとえば、値1em2emは、数字1と無効な単位識別子em2emとともに、単一の<dimension-token>として構文解析されるだろう。この場合、2つの長さ1em2emとして構文解析されるよう空白は2の前に要求される。

2.6. プロパティ値の例

以下の対応する値の定義のフィールドを持つプロパティの例をいくつか示す。

プロパティ 値の定義フィールド 値の例
orphans <integer> 3
text-align left | right | center | justify center
padding-top <length> | <percentage> 5%
outline-color <color> | invert #fefefe
text-decoration none | underline || overline || line-through || blink overline underline
font-family [ <family-name> | <generic-family> ]# "Gill Sans", Futura, sans-serif
border-width [ <length> | thick | medium | thin ]{1,4} 2px medium 4px
text-shadow [ inset? && [ <length>{2,4} && <color>? ] ]# | none 3px 3px rgba(50%, 50%, 50%, 50%), lemonchiffon 0 0 4px inset

3. テキストデータ型

一般的に<ident>で示される識別子は、<ident-token>文法に準拠する文字シーケンスで構成される。[CSS3SYN]識別子を引用符で囲むことはできない。そうでなければ、文字列として解釈される。

3.1. 定義済みキーワード

値の定義フィールドにおいて、事前に定義された意味を持つキーワードはリテラルに出現する。キーワードは、CSSの識別子であり、かつASCII大文字・小文字不区別で解釈される(すなわち、[a-z][A-Z]と等価である)。

たとえば、border-collapseプロパティ値の定義は次のとおり:
Value: collapse | separate

その使用例:

table { border-collapse: separate }

3.1.1. CSS全域キーワード:initialinheritおよびunset

上記で定義されるような、すべてのプロパティはすべてのCSSプロパティに共通の計算値を表すCSS全域キーワードを受け入れる。

initialキーワードは、プロパティの初期値として指定される値を表す。initialキーワードは、要素の親でプロパティの算出値を表す。unsetキーワードは、プロパティが継承されるかどうかに依存して、inheritまたはinitialのいずれかのように振る舞う。これらのキーワードのすべては、Cascade moduleで規範的に定義される。[CSS3CASCADE]

他の仕様は、追加でCSS全域キーワードを定義することができる。

3.2. 著者定義識別子:<custom-ident>

一部のプロパティはコンポーネント値として著者定義識別子を受け入れる。この汎用データ型は、<custom-ident>で示され、そのプロパティの値定義において事前定義されたキーワードとして表示されない、任意の妥当なCSS識別子を表す。そのような識別子もASCIIの範囲で、完全に大文字・小文字区別である(たとえば、exampleEXAMPLEは2つの異なる無関係なユーザー定義の識別子である)。

CSS全域キーワードは妥当な<custom-ident>ではない。defaultキーワードは予約され、これもまた妥当な<custom-ident>ではない。<custom-ident>を使用する仕様は、どの他のキーワードが<custom-ident>から除外されるかを明確に指定すべきである―たとえば、そのプロパティの値定義におけるどんな事前定義されたキーワードが除外されるかを言うことによって。除外されるキーワードは、すべてのASCIIケース順列で除外される。

プロパティ値で位置的に多義のキーワードを構文解析する場合、<custom-ident>生成規則は、実現されない生成規則がその生成規則を要求することができない場合にのみ、キーワードを要求することができる。

たとえば、略式宣言animation: ease-in ease-out;は、宣言animation-timing-function: ease-in; animation-name: ease-out;と等価である。ease-outanimation-nameに属する<custom-ident>生成規則で主張されるままにしておき、ease-inanimation-timing-functionに属する<single-timing-function>生成規則によって要求される。

注:<custom-ident>をもつ文法を設計する場合、プロパティにおける任意のキーワード値と競合することが不可能なように、<custom-ident>は常に、位置的に"曖昧でない"ようにすべきである。

3.3. 引用符付き文字列:<string>

文字列<string>で示され、一重引用符または二重引用符で区切られた文字シーケンスで構成される。これは、CSS Syntax Moduleにおける<string-token>生成物に対応する。[CSS3SYN]

二重引用符は、("\""または"\22"のように)エスケープされない限り、二重引用符の内部に出現することはできない。一重引用符も同様である('\''または'\27')。
content: "this is a 'string'.";
content: "this is a \"string\".";
content: 'this is a "string".';
content: 'this is a \'string\'.'

美的またはその他の理由で、複数行にわたって文字列を分割することは可能だが、そのような場合には改行文字自体をバックスラッシュ(\)でエスケープする必要がある。改行はその後文字列から削除される。たとえば、以下の2つのセレクタは厳密に等価である:

例:

a[title="a not s\
o very long title"] {/*...*/}
a[title="a not so very long title"] {/*...*/}

文字列は直接文字列に改行を表すことができないので、改行を含めるために"\A"エスケープを使用する。(16進数AはUnicodeでラインフィールド(U+000A)であるが、CSSでは"改行"の一般的な概念を表す。)

3.4. 資源位置表示:<url>

URLは、資源へのポインターであり、<url>によって示される関数表記である。<url>の構文は次のとおり:

<url> = url( <string> <url-modifier>* )
以下は背景画像として使用されるURLの例である:
body { background: url("http://www.example.com/pinkish.gif") }

上記で定義される構文に加えて、<url>は別の方法で記述することもできる:

レガシーな引用符なし<url>構文に対する特別な構文解析規則は、URLで出現する丸括弧、空白文字、単一引用符(')、二重引用符(")がバックスラッシュでエスケープされなければならないことをを意味する。たとえば、url(open\(parens)url(close\)parens)。URLの種類によって、[URL]で説明されるようにURLエスケープ(たとえば、url(open%28parens)またはurl(close%29parens))としてこれらの文字を書くことも可能であるかもしれない。互い違いに、文字列を引用符で囲むために使用される改行および文字のみ、エスケープする必要がある場合に、URLは文字列として引用符で囲むことができる。)

3.4.1. 相対URL

リソースの絶対位置に依存しないモジュラー・スタイルシートを作成するために、著者は、相対URLを使用すべきである。([URL]で定義されるように)相対URLは、基底URLを用いて完全なURLに解決される。RFC 3986の3章は、この処理に用いる標準的なアルゴリズムを定義する。CSSスタイルシートに対して、基底URLはスタイル付けされたソース文書のURIではなく、スタイルシート自身のURLである。文書中で埋め込まれるスタイルシートは、スタイルシートコンテナに関連付けられた基底URLを持つ。

前段落で説明したように、<url>がプロパティの算出値に出現する場合、絶対URLに解決される。ユーザーエージェントが絶対URLに解決できないURLの算出値は、指定値である。

たとえば、以下の規則を考える:
body { background: url("tile.png") }

URLで指定されたスタイルシート:

http://www.example.org/style/basic.css

ソース文書の<body>の背景は、URLで指定されたリソースによって記述される画像でタイル状に表示される:

http://www.example.org/style/tile.png

同じ画像は、<body>を含むソース文書のURLにかかわらず使用される。

3.4.2. 空URL

url()の値が(url("")またはurl()のような)空文字列である場合、urlは(url about:invalidが解決するものと同類な)無効なリソースに解決しなければならない。

注:これは、ウェブプラットフォームの他の場所で埋め込まれたリソースに対する空URLの動作と一致し、かつ、url()が現れるものは何でも無効なリソースであることがほぼ確実である、url()値を空のままにする製作中のミスによるスタイルシートまたはホスト文書を再要求する過剰なトラフィックを回避する。ウェブプラットフォーム上でのリンクは空のURLを許可、よってCSSはハイパーリンクを制御するためのいくつかの機能を獲得する場合、この制限はこれらのコンテキストで緩和することができる。

3.4.3. URL修飾子

url()関数は、URLの意味または解釈を変更する、追加の<url-modifier>指定をサポートする。<url-modifier>は、<ident>または関数のいずれかである。

この仕様は、<url-modifier>を定義しないが、他の仕様が定義してもよい。

注:<url>は、引用符で囲まれていないかurl()表記で包まれないいずれかが任意の<url-modifier>を受け入れることはできないものである。

4. 数値データ型

プロパティは、ある範囲に数値を制限してもよい。値が許容範囲外にある場合、宣言は無効であり、無視しなければならない。

理論的には、CSSはすべての値型の無限精度および無限大範囲をサポートしているが、現実の実装では有限のキャパシティを持つ。ユーザーエージェントは、合理的で有用な範囲と精度をサポートすべきである。

4.1. 整数:<integer>

整数値は<integer>で示される。

リテラルに記述される場合、整数は、1つ以上の10進数0から9であり、かつCSS Syntax Moduleにおける<number-token>生成物のサブセットに対応する。[CSS3SYN]整数の最初の桁は、符号を示す-または+を先行させてもよい。

4.2. 実数:<number>

数値は、<number>によって表記され、場合により分数成分をもつ実数を表す。

実数は<integer>または0個以上の数字の後にドット(.)が続き、1つ以上の10進数字が続き、そして任意で"e"または"E"および整数から構成される指数である。これは、CSS Syntax Moduleにおける<number-token>生成物に対応する。[CSS3SYN]整数と同様に、最初の桁は、符号を示す-または+を先行させてもよい。

4.3. パーセンテージ:<percentage>

パーセント値は、<percentage>で示され、別の基準値のある割合である値を示す。

リテラルに記述される場合、パーセントは、の直後のパーセント記号%から構成される。これは、CSS Syntax Module [CSS3SYN]における<percentage-token>生成物に対応する。

パーセント値は、たとえば長さなど、常に他の量に対する相対値となる。パーセント値を許可する各プロパティはまた、パーセンテージが参照する量を定義する。この量は、同じ要素の別のプロパティ、祖先要素に対するプロパティの値、整形文脈の測定物(たとえば、包含ブロックの幅)、または何か他のものとすることができる。

<percentage>が同じコンポーネント値次元またはと同じ数量を表すことができ、したがって、calc()式でそれらと組み合わせることが可能な場合に、次の便利な記法は、プロパティの文法で使用することができる:

<length-percentage>

<percentage><length>に解決される場合に、[ <length> | <percentage> ]と同等である。

<frequency-percentage>

<percentage><frequency>に解決される場合に、[ <frequency> | <percentage> ]と同等である。

<angle-percentage>

<percentage><angle>に解決される場合に、[ <length> | <angle> ]と同等である。

<time-percentage>

<percentage><time>に解決される場合に、[ <time> | <percentage> ]と同等である。

<number-percentage>

<percentage><number>に解決される場合に、[ <number> | <percentage> ]と同等である。

たとえば、widthプロパティは、距離の寸法を表す、<length>または<percentage>を受け入れることができる。これは、width: calc(500px + 50%);が許可されることを意味する―両方の値は絶対長さに変換して、加えられる。包含ブロックが1000pxの幅である場合、width: 50%;width: 500pxに等しく、よってwidth: calc(50% + 500px)は最後にはwidth: calc(500px + 500px)すなわちwidth: 1000pxに等しくなる。

一方、hsl()関数の第二および第三引数は、<percentage>としてのみ表すことができる。calc()生成物がその場所で許可されるが、生成物は、calc(10% + 20%)において見られるような、自分自身とパーセンテージのみを組み合わせることができる。

注:仕様は互換性がある限り、仕様は文法で次元の代わりに<percentage>を交互にすべきでない。

4.4. 単位をもつ数字:次元

一般的な用語"次元"は、数に付随する単位とその数を指し、<dimension>で表記される。

リテラルに記述される場合、次元は、識別子である、実数の直後に単位識別子が続くものである。これは、CSS Syntax Moduleにおける<dimension-token>生成物に対応する。[CSS3SYN] キーワードと同様に、単位識別子はASCII大文字・小文字不区別である。

CSSは、長さ(<length>)、継続時間(<time>)、周波数(<frequency>)、解像度(<resolution>)、および他の量を指定するために<dimension>を使用する。

4.5. 互換性のある単位

算出値シリアル化する場合[CSSOM]互換性のある単位pxin間の96:1の係数、またはempx間の計算されたfont-size係数のような、静的な倍数因子によって関連するもの)は、単一の規準的な単位に変換される。互換性のある単位の各グループは、単位間がシリアル化のために使用される規準的な単位であるものを定義する。

使用値である解決値をシリアル化する場合、長さを表すすべての値型(パーセンテージ、数、キーワードなど)は、長さとの互換性が考慮される。同様に、使用値を返す任意の将来のAPIは、距離/所要時間/周波数などを表す任意の値を関連する次元のクラスと互換性があるものと見なさなければならず、適切な方法で正規化しなければならない。

5. 長さの単位:<length>

長さは距離の大きさを参照し、プロパティ定義で<length>と示される。長さは次元である。しかし、0長さに対する単位識別子は任意である(すなわち、構文的に<number> 0として表現できる)。

プロパティは、ある範囲に長さを制限してもよい。値が許容範囲外にある場合、宣言は無効であり、無視しなければならない。

一部のプロパティは負の長さの値を許可する一方で、整形を複雑にしてもよく、実装特有の限界があってもよい。負の長さの値をサポートできない場合、値をサポート可能な最も近い値に変換しなければならない。

使用される長さがサポートできない場合、ユーザーエージェントは実効値で近似しなければならない。

長さの単位には相対絶対の2種類がある。

5.1. 相対長さ

相対長さの単位は別の長さに対して相対的な長さを指定する。相対単位を使用するスタイルシートは、より簡単に1つの出力環境から別のものに拡張できる。

相対単位は以下のものがある:

相対単位の参考情報の概要
単位 何と相対か
em 要素のフォントサイズ
ex 要素のフォントのx-height
ch 要素のフォントにおける"0"(0、U+0030)グリフの幅
rem ルート要素のフォントサイズ
vw ビューポートの幅の1%
vh ビューポートの高さの1%
vmin ビューポートの小さい方の幅の1%
vmax ビューポートの大きい方の幅の1%

子要素は特定の親の相対値を継承しない。算出値を継承するのである。

5.1.1. フォント相対長さ:emexchrem単位

(ルート要素のfont-sizeを指す)remを除いて、フォント相対長さは、使用される要素のフォントメトリックを参照する。例外は、フォント相対長さがfont-sizeプロパティ自身に出現する場合で、この場合は親要素の算出されるフォントメトリック(または要素が親を持たない場合、fontプロパティの初期値に対応する計算されたフォントメトリック)を参照する。

em単位
この単位が使用される要素のfont-sizeプロパティの算出値に等しい。
規則:
h1 { line-height: 1.2em }

これはh1要素の行の高さがh1要素のフォントサイズの20%増しであることを意味する。一方:

h1 { font-size: 1.2em }

これはh1要素によって継承される算出されるフォントサイズがh1要素のフォントサイズの20%増しであることを意味する。

ex単位
最初に使用可能なフォントの使用されるx-heightに等しい。[CSS3-FONTS]x-heightは、小文字の"x"の高さに等しくなることが多いことからこう呼ばれる。しかし、exは"x"を含まないフォントに対しても定義される。フォントのx-heightは、別の方法で見つけることができる。一部のフォントは、x-heightの信頼できる測定基準を含む。信頼できるフォント測定基準が利用できない場合、ユーザーエージェントは小文字グリフの高さからx-heightを決定してもよい。実行可能なヒューリスティックの1つは、小文字の"o"のグリフを下ベースラインまで広げ、境界ボックスの上ベースラインから値を減算し、その長さを調べることである。x-heightを測定することが不可能または非現実的な場合、0.5emの値を仮定しなければならない。
ch単位
レンダリングに使用されるフォントに見つけられる"0"(U +0030)のグリフの使用される事前測定に等しい。(グリフの事前測定は、要素のインライン軸であるいずれか、その事前の幅または高さである。)

注:グリフの事前測定は表記方向およびテキストの向きだけでなく、フォント設定、テキスト変換、およびグリフの選択や向きに影響を与える他の特性に依存する。

“0”グリフを測定することが不可能または非現実的な場合、この単位は1em高さで0.5emであると仮定しなければならない。したがって、ch単位は、一般的な場合において0.5emに後退し、直立に活字を組む(すなわち、writing-modevertical-rlまたはvertical-lrおよびtext-orientationuprightである)場合に1emに後退する。

rem単位
ルート要素のfont-sizeの算出値に等しい。ルート要素のfont-sizeプロパティに指定される場合、rem単位はプロパティの初期値を参照する。

5.1.2. ビューポート割合長さ:vwvhvminvmax単位

ビューポートのパーセンテージ長さ初期包含ブロックの大きさに対する相対的なものである。初期包含ブロックの高さまたは幅が変更されたとき、これらはビューポートに応じてスケーリングされる。しかし、ルート要素のoverflowの値がautoである場合、すべてのスクロールバーは存在しないものとして仮定される。初期包含ブロックの大きさは、ビューポートのスクロールバーの存在によって影響されないことに注意する。

ページメディアについて、ビューポート割合長さの厳密な定義は、[CSS3PAGE]を優先する。

vw単位
初期包含ブロックの幅の1%に等しい。
ビューポートの幅が200mmである場合、以下の例で、h1要素のフォントサイズは16mm(すなわち、(8×200mm)/100)になる。
h1 { font-size: 8vw }
vh単位
初期包含ブロックの高さの1%に等しい。
vmin単位
vwまたはvhの小さい方に等しい。
vmax単位
vwまたはvhの大きい方に等しい。

5.2. 絶対長さ:cmmmqinptpcpx単位

絶対長さの単位は、互いに関連して固定されており、物理的な測定に固定されている。これは、主に出力環境が既知の場合に有用である。絶対単位は物理単位incmmmptpcq)および視覚角度単位px)で構成される:

単位 名前 等値
cm センチメートル 1cm = 96px/2.54
mm ミリメートル 1mm = 1/10cm
Q 4分の1ミリメートル 1q = 1/40cm
in インチ 1in = 2.54cm = 96px
pc パイカ 1pc = 1/6 in
pt ポイント 1pt = 1/72 in
px ピクセル 1px = 1/96 in
h1 { margin: 0.5in }      /* インチ  */
h2 { line-height: 3cm }   /* センチメートル */
h3 { word-spacing: 4mm }  /* ミリメートル */
h3 { letter-spacing: 1Q } /* 4分の1ミリメートル */
h4 { font-size: 12pt }    /* ポイント */
h4 { font-size: 1pc }     /* パイカ */
p  { font-size: 12px }    /* ピクセル */

絶対長さ単位のすべては互換性があり、かつpx規準的な単位である。

CSSデバイスの場合、これらの大きさは、

  1. 物理的寸法に物理単位を関連付けること、または
  2. 参照ピクセルピクセル単位を関連付けること。

印刷媒体と同様の高解像度デバイスの場合、固定単位は標準的な物理単位の1つ(インチ、センチメートルなど)となるべきである。低解像度のデバイスおよび独自の視聴距離を伴うデバイスの場合、固定単位は代わりにピクセル単位が推奨される。そのようなデバイスの場合、画素単位で最適な参照画素を近似するデバイスピクセルの整数を参照することを推奨する。

注:固定単位がピクセル単位である場合、物理単位は物理的な測定結果と一致するとは限らない。あるいは固定単位が物理単位の場合、ピクセル単位は、デバイスピクセルの整数に変換されないことがある。

注:このピクセル単位と物理単位の定義は、CSSの以前のバージョンとは異なる。特に、ピクセル単位と物理単位が固定比で関連しないとされた以前のCSSバージョンにおいて、ピクセル単位が最も近い基準画素と一致するように変化する一方で、物理単位は常に物理的な測定に結びつけられる。(この変更は、あまりにも多くの既存のコンテンツが96dpiの仮定に依存するために行われた。この前提を壊すことはコンテンツを壊すことになる。)

基準画素とは、腕の長さのデバイスからの距離と96dpiのピクセル密度におけるデバイス上の1ピクセルとの視角である。名目の腕の長さが28インチの場合、視角は約0.0213度である。距離をおいて読むために、1pxは約0.26mm(1/96インチ)に対応する。

下の画像は、参照ピクセルの大きさで距離を見ることの効果を示している:71cm(28インチ)の読み取り距離では基準画素が0.26mmで、3.5m(12フィート)では1.3mmの参照画素となる。

This diagram illustrates how the definition of a pixel
		             depends on the users distance from the viewing surface
		             (paper or screen).
		             The image depicts the user looking at two planes, one
		             28 inches (71 cm) from the user, the second 140 inches
		             (3.5 m) from the user. An expanding cone is projected
		             from the user’s eye onto each plane. Where the cone
		             strikes the first plane, the projected pixel is 0.26 mm
		             high. Where the cone strikes the second plane, the
		             projected pixel is 1.4 mm high.
閲覧距離の増大に伴ってピクセルが大きくなる

次の図は、ピクセル単位でのデバイスの解像度の効果を示している:低解像度のデバイス(たとえば、典型的なコンピュータ画面)では1px平方の領域が単独の画素で覆われてしまうのに対し、高解像度のデバイス(レーザープリンタなど)では1pxの領域に16個もの画素が入ることがわかる。

This diagram illustrates the relationship between the
		             reference pixel and device pixels (called "dots" below).
		             The image depicts a high resolution (large dot density)
		             laser printer output on the left and a low resolution
		             monitor screen on the right. For the laser printer, one
		             square reference pixel is implemented by 16 dots. For
		             the monitor screen, one square reference pixel is
		             implemented by a single dot.
より多くのデバイスピクセル(ドット)が(ほぼ同じ視距離の)低解像度のデバイス上よりも高解像度のデバイス上の1px平方の面積をカバーするために必要とされることを示す

6. その他の単位

6.1. 角度:<angle>型およびdeggradradturn単位

角度の値はで示される<dimension>である。しかし、0角度に対する単位識別子は任意である(すなわち、構文的に 0として表現できる)。角度の単位識別子は次のとおり:

deg
度。円の1周は360度である。
grad
グラディアン。ゴンまたはグラードとしても知られる。円の1周は400グラディアンである。
rad
ラジアン。円の1周は2πラジアンである。
turn
回転円の1周は1回転である。

たとえば、直角は90degまたは100gradまたは0.25turnまたは約1.570796326794897radである。

すべての<angle>単位は、互換性があり、かつdeg規準的な単位である。

慣例により、CSSで角度が方向を示す場合、角度は方位角として通常解釈される。ここで、0degは画面上で「上」または「北」であり、そしてより大きな角度は時計回りに大きくなる(よって、90degは「右」または「東」となる)。

たとえば、linear-gradient()関数で、グラデーションの方向を決定する<angle>は、方位角として解釈される。

6.2. 時間:<time>型およびsms単位

時間の値は<time>で示される次元である。時間の単位識別子は次のとおり:

s
秒。
ms
ミリ秒。1秒は1000ミリ秒ある。

すべての<time>単位は、互換性があり、かつs規準的な単位である。

プロパティは、ある範囲に時間値を制限してもよい。値が許容範囲外にある場合、宣言は無効であり、無視しなければならない。

6.3. 周波数:<frequency>型およびHzkHz単位

周波数は<frequency>で示される次元である。周波数の単位識別子は次のとおり:

Hz
ヘルツ。これは1秒あたりの出現回数を表す。
kHz
キロヘルツ。1キロヘルツは1000ヘルツである。

たとえば、音の高低を表すときに、200Hzは低音域であり、6kHzは高音域である。

すべての<frequency>単位は、互換性があり、かつhz規準的な単位である。

6.4. 解像度:<resolution>型およびdpidpcmdppx単位

解像度の値は<resolution>で表される次元である。解像度の単位識別子は次のとおり:

dpi
インチあたりのドット。
dpcm
センチメートルあたりのドット。
dppx
Dots per px unit.

<resolution>単位は、多数のこれらの点がCSS incmまたはpxに収まる方法を示すことにより、グラフィカルな表現の単一の"ドット"の大きさを表す。用途については、たとえば[MEDIAQ]におけるresolutionメディアクエリーまたは[CSS3-IMAGES]で定義されるimage-resolutionプロパティを参照のこと。

すべての<resolution>単位は、互換性があり、かつdppx規準的な単位である。

次の@media規則は、一部の特別なスタイル規則を2 CSS px単位あたりデバイスピクセル以上を使用するデバイスに割り当てるためにメディアクエリ[MEDIAQ]を使用する。
@media (min-resolution: 2dppx) { ... }

7. 他の場所で定義されるデータ型

一部のデータ型は、独自のモジュールで定義されている。以下の例は、複数の仕様に渡って使用される最も一般的なデータ型の部について議論する。

7.1. 色:<color>

<color>データ型は[CSS3COLOR]で定義される。CSS Color Level 3またはその後継をサポートするユーザーエージェントは、その中で定義されているように<color>を解釈しなければならない。

7.2. 画像:<image>

<image>データ型は[CSS3-IMAGES]で定義される。CSS Image Values Level 3またはその後継をサポートするユーザーエージェントは、その中で定義されるように<image>を解釈しなければならない。

7.3. 2次元配置:<position>

<position>データ型は[CSS3BG]で定義される。CSS Backgrounds & Borders Level 3またはその後継をサポートするユーザーエージェントは、その中で定義されるように<position>を解釈しなければならない。

8. 関数表記

関数表記は、より複雑な型を表す、または特別な処理を呼び出すことができる、コンポーネント値の型である。構文は、関数名に始まり、直後に左丸括弧が続き(すなわち<function-token>)、続いて引数、直後に右丸括弧が続く。空白は丸括弧のすぐ内側に許可されるが、任意である。関数は、CSSプロパティ値と同様に整形される、複数の引数を取ることができる。

rgba()のような一部のレガシーな関数表記は、コンマを余計に使用するが、一般にコンマはリストで項目を区切るため、または別の方法で明確にする文法の場所でのみ使用される。コンマが引数を区切るために使用される場合、空白文字はコンマの前後でオプションである。

background: url(http://www.example.org/image);
color: rgb(100, 200, 50 );
content: counter(list-item) ". ";
width: calc(50% - 2em);

8.1. 数学表現:calc()

calc()関数は、コンポーネントの値として使用される加算(+)、減算(-)、乗算(*)、および除算(/)の数式を許可する。calc()式は、標準の演算子の優先順位規則を使用して、式が含む数学計算の結果を表す。これは<length><frequency><angle><time><percentage><number>または<integer>の値が許可される場所ならどこにでも使用することができる。calc()式のコンポーネントは、リテラル値またはattr()もしくはcalc()式を使用することができる。

section {
  float: left;
  margin: 1em; border: solid 1px;
  width: calc(100%/3 - 2*1em - 2*1px);
}
p {
  margin: calc(1rem - 2px) calc(1rem - 1px);
}
ビューポート内で正確に40emが一致し、テキストのほぼ同じ量が常に画面に関係なく画面サイズいっぱいになることを確認できるように、次のfont-sizeを設定する。
:root {
  font-size: calc(100vw / 40);
}

デザインの残りの部分がrem単位を使用して指定される場合、全体のレイアウトはビューポートの幅に合わせて調整される。

次の例では、2つの中心に置く背景画像を並べ、他からわずかにずらされる。
.foo {
  background: url(top.png), url(bottom.png);
  background-repeat: no-repeat;
  background-position: calc(50% + 20px) calc(50% + 20px), 50% 50%;
}
この例では、グラデーションにどちらかの端から等しい距離にカラーストップを配置する方法を示す。
.foo {
  background-image: linear-gradient(to right, silver,
                                              white 50px,
                                              white calc(100% - 50px),
                                              silver);
}

8.1.1. 構文

calc()関数の構文は次のとおり:

<calc()> = calc( <calc-sum> )
<calc-sum> = <calc-product> [ [ '+' | '-' ] <calc-product> ]*
<calc-product> = <calc-value> [ '*' <calc-value> | '/' <number> ]*
<calc-value> = <number> | <dimension> | <percentage> | ( <calc-sum> )

さらに、空白文字+-演算子の両側に要求される。(*および/演算子は周りの空白なしで使用することができる。)

NUMBERDIMENSIONPERCENTAGEが項である場合、ユーザーエージェントは、少なくとも20項のcalc()式をサポートしなければならない。calc()式がサポートされる項の数よりも多く含まれる場合、式が無効であったかのように扱わなければならない。

8.1.2. 型のチェック

演算式は、<length><frequency><angle><time><percentage><number>または<integer>のいずれか1つの解決型を持つ。解決型は式が置かれている場所で妥当でなければならない。そうでなければ、式は無効である。式の解決型は、式に含まれる値の型によって決定される。<number-token>は、<number>または<integer>型である。<dimension-token>の型はその単位によって与えられる(cm<length>deg<angle>など)。attr()式の型は、<type-or-unit>引数によって指定される。

パーセンテージは式が配置されるコンテキストで受け入れられる場合、<percentage-token>は、パーセンテージが相対的であるような値の型を持つ。たとえば、widthプロパティにおいて、パーセンテージは<length>型を持ち、opacityにおいて、パーセンテージは<number>型を持つ。パーセンテージは、<percentage>値が他の型と使用値の互換性がない場合に、<percentage>型のみを持つ。パーセンテージが通常calc()の代わりに許可されない場合、パーセンテージを含むcalc()式は、そのコンテキストで無効となる。

演算子は、利得の型がその引数に基づいて、部分式を形成する。式を簡単にするため、演算子は、受け入れる型に制限がある。各演算子で、左右の引数の型は制限が検査される。互換性のある場合、型は以下で説明するように解決される(以下は、簡単にするために演算子の優先順位規則を無視する):

演算子は上記の検査に合格しない場合、式は無効である。また、0による除算は無効である。これは、リテラルに実数0で割るだけでなく、0に評価される任意の数値式(純粋に数値式は、解析時に追加情報なしで評価することができるものとして)の両方を含む。

注:代数による単純化は、calc()式またはその解決型の妥当性に影響を与えない。たとえば、calc(5px - 5px + 10s)およびcalc(0 * 5px + 10s)は、長さに時間を加えようとするためにどちらも無効である。

8.1.3. 算出値

calc()表現の算出値は、算出されたすべてのコンポーネントをもつ表現である。

パーセンテージが算出値に解決されない場合、パーセンテージはcalc()式の中で解決されない。たとえば、calc(100% - 100% + 1em)は、1emでなくcalc(1em)に解決される。値におけるパーセンテージを算出するための特別な規則(たとえばheightプロパティ)が存在する場合、calc()式がパーセンテージを含むならばいつでも、特別な規則が適用される。

たとえば、background-positionはパーセンテージ値に対して長さとは異なる特別な振る舞いを持つ:
.foo {
  width: 200px;
  background-image: url(bg.png);
  background-position: left 50%;
  /* different than: */
  background-position: left 100px;
  /* despite 50% of 200px being 100px */
}

これによると、background-positionは長さを直接解決するよりもむしろ、calc()におけるパーセンテージを保持し、その結果background-position: left calc(50% + 20px)プロパティのような式は、中央から左辺20pxオフに位置するよりむしろ、背景をセンタリングし、20px右にシフトする。

テーブルセルとテーブル要素において、幅と高さの計算の複雑さを与えることは、自動および固定レイアウトテーブルの両方で、テーブル列、テーブル列グループ、テーブル行、テーブル行グループ、およびテーブルセルに幅と高さのパーセンテージを含む数式はあたかもautoが指定されたかのように扱われてもよい。

8.1.4. 範囲のチェック

値の解析時間範囲チェックはcalc()内で実行されず、したがって範囲外の値は宣言に無効にさせない。しかし、式から得られた値は、対象コンテキストで許可された範囲にとどめなければならない。

注:これは、閉じた(開いていない)の間隔として許容値を定義するためにcalc()を受け入れるすべてのコンテキストを要求する。

0pxより小さい幅は許可されないので、これら3つの宣言は等価である:
width: calc(5px - 10px);
width: calc(-5px);
width: 0px;

しかし幅に注目すると、width: -5pxwidth: calc(-5px)と等価ではありません!calc()外の範囲外の値は、構文的に無効であり、宣言全体をドロップさせる。

8.1.5. シリアライゼーション

calc()値のシリアライゼーションは、このレベルにおいて未定義である。

8.2. 属性参照:attr()

attr()関数は、要素または疑似要素に適用されるプロパティにコンポーネントの値として許可される。これは要素の属性の値を返す。擬似要素で使用する場合、擬似要素の元の要素の属性の値を返す。

attr()式の算出値は下記の規則に従って、要素上で指定の名前を持つ属性の値となる。

注:CSS2.1 [CSS21]において、attr()式は常に文字列を返す。CSS3において、attr()式はさまざまな型を返すことができる。attr()式は、すべてを返すことはできない。たとえば、カウンター、文字列名、引用符、またはautonowrapbaselineのようなキーワード値を返せない。これは意図的である。attr()式の意図として、意図的である式は、それが可能なCSSを使って見栄え用の言語の書式を記述できるようにするためでなく、CSSにセマンティックデータを考慮できるようにするためである。

attr()式の新しい構文は次のとおり:

attr( <attr-name> <type-or-unit>? [ , <attr-fallback> ]? )

ここで、<attr-name>は、属性名を表すCSS修飾名[CSS3NAMESPACE]におけるqname生成物)である。(名前空間が存在しない場合に、これは単なるCSS識別子となる。)属性セレクタと同様に、<attr-name>の大文字・小文字区別は文書言語に依存する。

任意な<type-or-unit>引数は、属性値を解釈する方法をユーザーエージェントに指示する以下のリストから引き出されるキーワードであり、attr()式の型を定義する。省略した場合、stringは暗黙的に指定される。

任意な<attr-fallback>引数は、名前属性が欠落している、またはその値が指定された型に解析できない、またはプロパティに無効または範囲外である場合に使用されるフォールバック値を表す。引数が存在しない場合、(下記のリストから)与えられた<type-or-unit>のデフォルト値は暗黙的に指定される。

attr()式は、以下の場合にのみ妥当である:

attr()式が全体のプロパティ値である場合、デフォルト値は指定型である必要はないことに注意する。たとえば、著者によって属性の必要な型がpxである場合、デフォルトは依然として、width: attr(size px, auto);のような、autoであるかもしれない。

しかし、attr()式が完全なプロパティ値を形成するために他の値と一緒に使用される場合、デフォルト値はattr()の型と一致しなければならない。たとえば、px長さまたはinsetキーワードのいずれかをattr()式に代入する場合、妥当な宣言を作成するだろうが、box-shadow: attr(size px, inset) 5px 10px blue;は無効である。

指定された属性が要素上に存在する場合、(以下のリストで定義されるように)<type-or-unit>引数によって必要に応じて、属性の値を解析しなければならない。型がstringである場合を除き、最初に、先頭と末尾の空白が取り除かれなければならない。結果の値は、attr()式の値となる。必要に応じて値が解析されなかった場合、attr()式の値は、フォールバック値となる。

<type-or-unit>キーワードは次のとおり:

string
属性値は、CSS<string>のコンテンツとして取得される。デフォルトは空文字列である。

注:これはCSSパーサーを持つ属性値を再解析しないことに注意する。よって、たとえば、値が(エスケープが評価する文字)"Q"を含む文字列でなく、"\51"である属性がそれらの3文字を含む文字列を生成する。

color
属性値は、HASHまたはIDENT CSSトークンとして解析しなければならず、首尾よく<color>として解釈される。デフォルトはcurrentColorである。
url
属性値は、CSS<string>のコンテンツとして取得される。これはurl()内の引用符で囲まれた文字列表記として解釈される。デフォルトはabout:invalidであり、これは一般的なエラー状態で存在しない文書を指すように(付録Aで)定義されるURLである。相対URLは、要素から発信されたURLに適用されるような文書言語の規則に従って、絶対URLに解決されなければならない。スタイルシートへの相対ではない。
integer
属性値は、NUMBER CSSトークンとして解析しなければならず、正常の<integer>として解釈される。デフォルトは0であるか、あるいは0がプロパティに妥当でない場合、プロパティの最小値である。問題のプロパティが特定の範囲内の整数を受け取り、属性が範囲外である場合、デフォルトも使用しなければならない。
number
属性値は、NUMBER CSSトークンとして解析しなければならず、かつ<number>として解釈される。デフォルトは0であるか、あるいは0がプロパティに妥当でない場合、プロパティの最小値である。問題のプロパティが特定の範囲内の整数を受け取り、属性が範囲外である場合、デフォルトも使用しなければならない。
length
angle
time
frequency
属性値は、DIMENSION CSSトークンとして解析しなければならず、正常に指定型として解釈される。デフォルトは0であるか、あるいは0がプロパティに妥当でない場合、プロパティの最小値である。問題のプロパティが特定の範囲内(たとえば、正の長さ、または0度から90度までの角度)の値を受け入れ、属性が範囲外(たとえば、負の長さまたは180度)である場合、デフォルトも使用しなければならない。単位が相対長さの場合、絶対長さで算出しなければならない。
%
<length><angle><time>または<frequency>単位のいずれかにマッチするキーワード
属性値は、NUMBER CSSトークンとして構文解析しなければならず、指定された単位を持つ次元として解釈される。デフォルトは0であるか、あるいは0がプロパティに妥当でない場合、プロパティの最小値である。問題のプロパティが特定の範囲内(たとえば、正の長さ、または0度から90度までの角度)の値を受け入れ、属性が範囲外(たとえば、負の長さまたは180度)である場合、デフォルトも使用しなければならない。単位が相対長さの場合、絶対長さで算出しなければならない。
この例は、視覚的にXMLファイル内のデータを説明するためのattr()の使用方法を示す:
<stock>
  <wood length="12"/>
  <wood length="5"/>
  <metal length="19"/>
  <wood length="4"/>
</stock>

stock::before {
  display: block;
  content: "To scale, the lengths of materials in stock are:";
}
stock > * {
  display: block;
  width: attr(length em); /* default 0 */
  height: 1em;
  border: solid thin;
  margin: 0.5em;
}
wood {
  background: orange url(wood.png);
}
metal {
  background: silver url(metal.png);
}
以下の例のすべては無効であり、かつ解析時エラーが発生してしまい、その結果関連する宣言に―それらすべての場合で―無視させる:
content: attr(title color); /* 'content' doesn’t accept colors */

content: attr(end-of-quote string, inherit) close-quote;
/* the 'inherit' value is not allowed there, since the result would be
'inherit close-quote', which is invalid. */

margin: attr(vertical length) attr(horizontal deg);
/* deg units are not valid at that point */

color: attr(color); /* 'color' doesn’t accept strings */

注:現在、attr()式は、別の属性にフォールバックすることはできない。CSSの将来のバージョンでは、attr()拡張する方向になるだろう。

9. 付録 A:IANA 考慮事項

9.1. about:invalid URL スキームの登録

この節は、[RFC6694]で定義された登録手順に従って、about:invalidのURLを定義し、登録する。

この登録の公式記録はhttp://www.iana.org/assignments/about-uri-tokens/about-uri-tokens.xhtmlで見ることができる。

登録トークン invalid
使用目的 一般的なエラー条件をもつabout:invalid URL参照が存在しない文書。これはURL必要な場合に使用することができるが、デフォルト値は、文書の任意の型として解決可能であるべきでない。
連絡/変更管理者 CSS WG <www-style@w3.org> (W3Cの代理として)
仕様 CSS Values and Units Module Level 3 日本語訳

謝辞

Comments and suggestions from Giovanni Campagna, Christoph Päper, Keith Rarick, Alex Mogilevsky, Ian Hickson, David Baron, Edward Welbourne, Boris Zbarsky, Björn Höhrmann and Michael Day improved this module.

変更点

Changes since the 11 June 2015 Candidate Recomendation are:

Changes since the 30 July 2013 Candidate Recommendation are:

A Disposition of Comments is available.

Changes since the 28 August 2012 Candidate Recommendation are:

Changes since the 4 April 2013 Candidate Recommendation are:

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

この仕様は、CSSの仕様に共通であり、かつセキュリティ上の問題を提示しない単位のみを主に定義する。

注:URLの処理はセキュリティ上の問題を持つか?おそらく。

この仕様は、ユーザーの画面サイズおよびデフォルトのフォントサイズを公開する単位を定義するが、両者はJSから自明に観測可能であるので、新たなプライバシーリスクを構成するものではない。

適合性

文書規約

適合性要件は、説明的な表現と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ワーキンググループのウェブサイト(http://www.w3.org/Style/CSS/Test/)にある。質問は直接public-css-testsuite@w3.orgメーリングリストまで。

索引

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

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

参考文献

標準情報

[COMPOSITING-1]
Rik Cabanier; Nikos Andronikos. Compositing and Blending Level 1. 13 January 2015. CR. URL: https://dev.w3.org/fxtf/compositing-1/
[CSS-BACKGROUNDS-3]
CSS Backgrounds and Borders Module Level 3 URL: https://drafts.csswg.org/css-backgrounds-3/
[CSS-CASCADE-4]
Elika Etemad; Tab Atkins Jr.. CSS Cascading and Inheritance Level 4. 14 January 2016. CR. URL: https://dev.w3.org/csswg/css-cascade/
[CSS-COLOR-3]
CSS Color Module Level 3 URL: https://drafts.csswg.org/css-color-3/
[CSS-COLOR-4]
Tab Atkins Jr.; Chris Lilley. CSS Color Module Level 4. 5 July 2016. WD. URL: https://drafts.csswg.org/css-color/
[CSS-COUNTER-STYLES-3]
Tab Atkins Jr.. CSS Counter Styles Level 3. 11 June 2015. CR. URL: https://dev.w3.org/csswg/css-counter-styles/
[CSS-DISPLAY-3]
Tab Atkins Jr.; Elika Etemad. CSS Display Module Level 3. 15 October 2015. WD. URL: https://dev.w3.org/csswg/css-display/
[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-WRITING-MODES-3]
Elika Etemad; Koji Ishii. CSS Writing Modes Level 3. 15 December 2015. CR. URL: https://dev.w3.org/csswg/css-writing-modes-3/
[CSS21]
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-FONTS]
John Daggett. CSS Fonts Module Level 3. 3 October 2013. CR. URL: https://dev.w3.org/csswg/css-fonts/
[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/
[CSS3BG]
Bert Bos; Elika Etemad; Brad Kemper. CSS Backgrounds and Borders Module Level 3. 9 September 2014. CR. URL: https://dev.w3.org/csswg/css3-background/
[CSS3CASCADE]
Elika Etemad; Tab Atkins Jr.. CSS Cascading and Inheritance Level 3. 19 May 2016. CR. URL: https://drafts.csswg.org/css-cascade-3/
[CSS3COLOR]
Tantek Çelik; Chris Lilley; David Baron. CSS Color Module Level 3. 7 June 2011. REC. URL: https://www.w3.org/TR/css3-color
[CSS3NAMESPACE]
Elika Etemad. CSS Namespaces Module Level 3. 20 March 2014. REC. URL: https://dev.w3.org/csswg/css-namespaces/
[CSS3PAGE]
Melinda Grant; et al. CSS Paged Media Module Level 3. 14 March 2013. WD. URL: https://www.w3.org/TR/css3-page/
[CSS3SYN]
Tab Atkins Jr.; Simon Sapin. CSS Syntax Module Level 3. 20 February 2014. CR. URL: https://dev.w3.org/csswg/css-syntax/
[CSSOM]
Simon Pieters; Glenn Adams. CSS Object Model (CSSOM). 17 March 2016. WD. URL: https://drafts.csswg.org/cssom/
[HTML]
Ian Hickson. HTML Standard. Living Standard. URL: https://html.spec.whatwg.org/multipage/
[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
[SELECTORS-4]
Selectors Level 4 URL: https://drafts.csswg.org/selectors-4/
[URL]
Anne van Kesteren. URL Standard. Living Standard. URL: https://url.spec.whatwg.org/

参考情報

[CSS-ANIMATIONS-1]
CSS Animations Module Level 1 URL: https://drafts.csswg.org/css-animations-1/
[CSS-BREAK-3]
Rossen Atanassov; Elika Etemad. CSS Fragmentation Module Level 3. 14 January 2016. CR. URL: https://dev.w3.org/csswg/css-break/
[CSS-TEXT-3]
Elika Etemad; Koji Ishii. CSS Text Module Level 3. 10 October 2013. LCWD. URL: https://dev.w3.org/csswg/css-text-3/
[CSS-TEXT-DECOR-3]
Elika Etemad; Koji Ishii. CSS Text Decoration Module Level 3. 1 August 2013. CR. URL: https://dev.w3.org/csswg/css-text-decor-3/
[CSS-TRANSITIONS-1]
CSS Transitions Module Level 1 URL: https://drafts.csswg.org/css-transitions-1/
[CSS-UI-3]
Tantek Çelik; Florian Rivoal. CSS Basic User Interface Module Level 3 (CSS3 UI). 7 July 2015. CR. URL: https://dev.w3.org/csswg/css-ui/
[MEDIAQ]
Florian Rivoal; et al. Media Queries. 19 June 2012. REC. URL: https://www.w3.org/TR/css3-mediaqueries/
[RFC6694]
S. Moonesamy, Ed.. The "about" URI Scheme. August 2012. Informational. URL: https://tools.ietf.org/html/rfc6694