CSS の値と単位 — CSS Values and Units Module Level 4

1.1. ~module間の相互作用

この~moduleは `CSS21$r の 1.4.2.1, 4.3, A.2 節にて定義される~data型を置き換え, 拡張する。 ◎ This module replaces and extends the data type definitions in [CSS21] sections 1.4.2.1, 4.3, and A.2.

2.2. 成分~値の結合子

~propの値~定義においては、各~成分~値が次の組み合せで配列される: ◎ Component values can be arranged into property values as follows:

（結合子を挟まずに）並記された成分

それらの成分すべてが，示された順序で現れ~MUSTことを意味する。 ◎ Juxtaposing components means that all of them must occur, in the given order.

二重~ampersand（ `~AMP~AMP^g ）

複数個の成分の区切り： それらの成分すべてが現れ~MUSTが，その順序は任意であることを意味する。 ◎ A double ampersand (~AMP~AMP) separates two or more components, all of which must occur, in any order.

二重~縦線（ `||^g ）

複数の選択肢の区切り： それらのうち 1 個以上が現れ~MUSTが，その順序は任意であることを意味する。 ◎ A double bar (||) separates two or more options: one or more of them must occur, in any order.

縦線（ `|^g ）

複数の選択肢の区切り： それらのうち，きっかり 1 個が現れ~MUSTことを意味する。 ◎ A bar (|) separates two or more alternatives: exactly one of them must occur.

角括弧（ `[…]^g ）

~group化を表す。 ◎ Brackets ([ ]) are for grouping.

これらの結合順位は優先度の高いものから、［ 並記, 二重~ampersand, 二重~縦線, 縦線 ］の順になる。 従って、次の２行は等価になる： ◎ Juxtaposition is stronger than the double ampersand, the double ampersand is stronger than the double bar, and the double bar is stronger than the bar. Thus, the following lines are equivalent:

  a b   |   c ||   d ~AMP~AMP   e f
[ a b ] | [ c || [ d ~AMP~AMP [ e f ]]]

並び替え可能な結合子（ `||$g, `~AMP~AMP$g ）に対しては、文法における順序は重要でない — 同じ~group内の各~成分は、どのような順序で記されてもよい。 したがって，次の 2 行は等価になる： ◎ For reorderable combinators (||, ~AMP~AMP), ordering of the grammar does not matter: components in the same grouping may be interleaved in any order. Thus, the following lines are equivalent:

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

2.3. 成分~値の量指定子

どの［ 値~型 ／ ~keyword ／ 角括弧で括られた~group ］（以下、これらを “構文単位” と総称する）にも，次のいずれかの修飾子が後置され得る： ◎ Every type, keyword, or bracketed group may be followed by one of the following modifiers:

~asterisk（ `*^g ）

直前の構文単位の 0 回以上の出現を指示する。 ◎ An asterisk (*) indicates that the preceding type, word, or group occurs zero or more times.

正符号（ `+^g ）

直前の構文単位の 1 回以上の出現を指示する。 ◎ A plus (+) indicates that the preceding type, word, or group occurs one or more times.

疑問符（ `?^g ）

直前の構文単位が任意選択であること（すなわち 0 回または 1 回の出現）を指示する。 ◎ A question mark (?) indicates that the preceding type, word, or group is optional (occurs zero or one times).

波括弧に括られた整数（ `{~vA}^g ）

直前の構文単位の ~vA 回の出現を指示する。 ◎ A single number in curly braces ({A}) indicates that the preceding type, word, or group occurs A times.

波括弧に括られた~comma区切りの整数の組（ `{~vA,~vB}^g ）

直前の構文単位の ~vA 回から ~vB 回までの出現を指示する。 ~vB は省略されてもよく（ `{~vA,}^g ），その場合は ~vA 回 以上, 上限なしの出現を指示する。 ◎ A comma-separated pair of numbers in curly braces ({A,B}) indicates that the preceding type, word, or group occurs at least A and at most B times. The B may be omitted ({A,}) to indicate that there must be at least A repetitions, with no upper bound on the number of repetitions.

~hash記号（ `#^g ）

直前の構文単位が~comma~tokenで区切られた上で 1 回以上 出現することを指示する（~commaの前後に`空白$や~commentが現れてもよい）。 これには任意選択で上述の波括弧 形が後続し得る（例えば `length$t#{1,4} ）。 その場合、より精確な出現回数を指示する。 ◎ A hash mark (#) indicates that the preceding type, word, or group occurs one or more times, separated by comma tokens (which may optionally be surrounded by white space and/or comments). It may optionally be followed by the curly brace forms, above, to indicate precisely how many times the repetition occurs, like <length>#{1,4}.

~groupの直後の感嘆符（ `!^g ）

その~groupが必須であり， 1 個以上の値を生産し~MUSTことを指示する。 すなわち、~group内の各項は文法により個別的に省略し得るとしても，全体としては成分~値をすべて省略してはならない。 ◎ An exclamation point (!) after a group indicates that the group is required and must produce at least one value; even if the grammar of the items within the group would otherwise allow the entire contents to be omitted, at least one component value must not be omitted.

（ `*$g, `+$g, `#$g で指示される）成分~値の繰返しに対しては、~UAは、少なくとも 20 回以上の繰返しを~supportし~MUST。 ~prop値が，~supportする数を超える成分の繰返しを含む場合、その宣言は，無効であったかのように 無視され~MUST。 ◎ For repeated component values (indicated by *, +, or #), UAs must support at least 20 repetitions of the component. If a property value contains more than the supported number of repetitions, the declaration must be ignored as if it were invalid.

2.4. 結合子と量指定子の~pattern

特定の個数と順序による，複数の独立な`成分~値$を組み合せるための、共通の仕方がいくつかある。 特に、仕様の策定者が，［ 作者は、成分~値のある集合から，［ 文法に指定される順序か，あるいは任意の順序 ］で，その中の［ ~zero個以上／ 1 個以上／すべて ］を選択し~MUST ］ことを表記したいことは、よくある。 ◎ There are a small set of common ways to combine multiple independent component values in particular numbers and orders. In particular, it’s common to want to express that, from a set of component value, the author must select zero or more, one or more, or all of them, and in either the order specified in the grammar or in any order.

これらはすべて、`結合子$や`量指定子$による単純な~patternを利用して，容易に表記できる： ◎ All of these can be easily expressed using simple patterns of combinators and multipliers:

順序が “任意” のものは，どれも結合子を用いて表記される一方、 “指定どおり” のものは，どれも並記になっていることに注意。 ◎ Note that all of the "any order" possibilities are expressed using combinators, while the "in order" possibilities are all variants on juxtaposition.

2.5. 成分~値と空白

特に指定されない限り、`空白$や~commentが，［ 上の`結合子$や`量指定子$を用いて結合された成分の前後や, その各~成分の合間 ］に現れてもよい。 ◎ Unless otherwise specified, white space and/or comments may appear before, after, and/or between components combined using the above combinators and multipliers.

注記： 多くの場合、互いの~tokenを判別するため，成分~間の~spaceが実際に要求される。 例えば，値 `1em2em^v は、数字 `1^v と無効な単位~識別子 `em2em^u を伴う，単独の `dimension-token$P ~tokenとして構文解析されることになる。 この場合、 2 個の長さ値［ `1em^v, `2em^v ］として構文解析されるためには，数字 `2^v の前に~spaceが要求される。 ◎ Note: In many cases, spaces will in fact be required between components in order to distinguish them from each other. For example, the value 1em2em would be parsed as a single <dimension-token> token with the number 1 and the identifier em2em, which is an invalid unit. In this case, a space would be required before the 2 to get this parsed as the two lengths 1em and 2em.

2.6. ~prop値の例

いくつかの~propについて，対応する値~定義の欄, および値の例を下に示す： ◎ Below are some examples of properties with their corresponding value definition fields

3.1. 定義済みの~keyword

値~定義の欄の中では、定義済みの意味を伴う~keywordは，~literalとして現れる。 ~keywordは CSS `識別子$ であり、 `~ASCII大小無視$ の下で解釈される（すなわち、 a 〜 z と A 〜 Z は等価である）。 ◎ In the value definition fields, keywords with a pre-defined meaning appear literally. Keywords are CSS identifiers and are interpreted ASCII case-insensitively (i.e., [a-z] and [A-Z] are equivalent).

table { border-collapse: separate }

3.2. 作者定義の識別子： `custom-ident^t 型

一部の~propは、成分~値として，作者により定義される任意の識別子を受容する。 この汎用~data型は `custom-ident@t で表され、その~propの値~定義による定義済みの~keywordに解釈されないような，任意の妥当な CSS `識別子$ を表現する。 その種の識別子の文字の大小は区別される（例えば `example^v と `EXAMPLE^v は、互いに無関係な，作者定義の 異なる識別子である）。 ◎ Some properties accept arbitrary author-defined identifiers as a component value. This generic data type is denoted by <custom-ident>, and represents any valid CSS identifier that would not be misinterpreted as a pre-defined keyword in that property’s value definition. Such identifiers are fully case-sensitive, even in the ASCII range (e.g. example and EXAMPLE are two different, unrelated user-defined identifiers).

`CSS 全域~keyword$は，妥当な `custom-ident$t ではない。 予約済みの全域~keyword `default^v 【 `revert$v 】 もまた，妥当な `custom-ident$t ではない。 `custom-ident$t を利用する仕様は、どの~keywordが `custom-ident$t から除外されるべきかを明瞭に指定し~MUST。 — 例えば、 “その~propの値~定義にて定義済みの~keywordは除外される” と記すなど。 除外される~keywordと `~ASCII大小無視$で等しいものも除外される。 ◎ The CSS-wide keywords are not valid <custom-ident>s. The default keyword is reserved and is also not a valid <custom-ident>. Specifications using <custom-ident> must specify clearly what other keywords are excluded from <custom-ident>, if any—for example by saying that any pre-defined keywords in that property’s value definition are excluded. Excluded keywords are excluded in all ASCII case permutations.

~prop値において，位置により多義的になるような~keywordを構文解析するとき、 `custom-ident$t 生成規則は，［ その~keywordに該当し得るような，未だ充足されていない生成規則 ］が他に無い場合にのみ，その~keywordに該当し得る。 ◎ When parsing positionally-ambiguous keywords in a property value, a <custom-ident> production can only claim the keyword if no other unfulfilled production can claim it.

注記： `custom-ident$t が伴われる文法を設計するときは、 ~prop内のどの~keyword値とも競合し得なくなるように， `custom-ident$t は，常に “位置により多義的にならない” ようにするべきである。 ◎ Note: When designing grammars with <custom-ident>, the <custom-ident> should always be "positionally unambiguous", so that it’s impossible to conflict with any keyword values in the property.

3.3. 引用符で括られた文字列： `string^t 型

`文字列@ は `string@t で表され，一重~引用符または二重~引用符で括られた文字~並びで記される。 これらは， CSS Syntax 仕様 `CSS3SYN$r の `string-token$P 生成規則に対応する。 ◎ Strings are denoted by <string> and consist of a sequence of characters delimited by double quotes or single quotes. They correspond to the <string-token> production in the CSS Syntax Module [CSS3SYN].

二重~引用符は、（ `"\""^c または `"\22"^c として）`~escape$されない限り，二重~引用符の内部に現れることはできない。 一重~引用符も同様である（ `'\''^c または `'\27'^c ）： ◎ Double quotes cannot occur inside double quotes, unless escaped (as "\"" or as "\22"). Analogously for single quotes ('\'' or '\27').

content: "これは '文字列'。";
content: "これは \"文字列\"。";
content: 'これは "文字列"。';
content: 'これは \'文字列\'。';

美観その他の理由で，文字列を複数行に分割することも可能である。 ただし，そのような場合は、改行文字~自身が~backslash（ \ ）で~escapeされる必要がある。 それらの改行文字は、後で文字列から除去される。 例えば，次の２つの選択子は、正確に同じになる： ◎ It is possible to break strings over several lines, for aesthetic or other reasons, but in such a case the newline itself has to be escaped with a backslash (\). The newline is subsequently removed from the string. For instance, the following two selectors are exactly the same:

a[title="そんなに長いタイ\
トルではないが"] {/*...*/}

a[title="そんなに長いタイトルではないが"] {/*...*/}

文字列は 改行文字を直接的に表現できないので、改行文字を含ませるためには "`\A^c" ~escapeを用いる。 （ 16 進数 A は Unicode の line feed 文字（ U+000A ）であるが、 CSS においては一般概念としての “改行文字” を表現する。） ◎ Since a string cannot directly represent a newline, to include a newline in a string, use the escape "\A". (Hexadecimal A is the line feed character in Unicode (U+000A), but represents the generic notion of "newline" in CSS.)

3.4. 資源の所在指定子： `url^t 型

`~URL@ は、資源を指す~pointerであり， `url$t で表される `関数記法$である。 `url$t の構文は： ◎ A URL is a pointer to a resource and is a functional notation denoted by <url>. The syntax of a <url> is:

`url@t = url( `string$t `url-modifier$t`*$g )

body { background: url("http://www.example.com/pinkish.gif") }

上に定義された構文に加え、 `url$t は，他の仕方でも記し得る： ◎ In addition to the syntax defined above, a <url> can sometimes be written in other ways:

• `url$t は，自身を括る引用符なしでも記し得る。 （その構文は、 `url-token$P として`特別に構文解析され$る。 `CSS3SYN$r ） ◎ A <url> can be written without quotation marks around the URL itself. (This syntax is specially-parsed as a <url-token>. [CSS3SYN])

  例えば次の 2 つの宣言は、同じになる： ◎ For example, the following declarations are identical:

  background: url("http://www.example.com/pinkish.gif");
  background: url(http://www.example.com/pinkish.gif);
  

• 一部の CSS 文脈（ `import$at など）では、 `url$f で括る代わりに~~素の `string$t で表現することも許容される。 これは、その文字列を引数にとる `url$f 関数と同じに挙動する。 ◎ Some CSS contexts (such as @import) allow a <url> to be represented by a bare <string>, without the url() wrapper. In such cases the string behaves identically to a url() function containing that string.

  例えば次の 2 つの文は、同じになる： ◎ For example, the following statements are identical:

  @import url("base-theme.css");
  @import "base-theme.css";
  

注記： 旧来の，引用符なしの `url$t 構文のための特別な構文解析~規則では、 ~URLの中の［ 括弧, `空白$文字, 一重~引用符（ `'^c ）, 二重~引用符（ `"^c ） ］は、~backslashで~escapeされ~MUST。 例えば， `url(open\(parens)^v や `url(close\)parens)^v など。 ~URLの種別にもよるが，これらの文字を `URL$r の規定に従って~URL~escapeで記すこともできる（例えば，先の例に対する `url(open%28parens)^v や `url(close%29parens)^v ）。 別法として、~URLは文字列として引用符で括ることもできる — その場合に~escapeする必要があるのは、~URL内の［ 改行文字, および引用符と同じ文字 ］のみになる。 ◎ Note: The special parsing rules for the legacy quotation-mark–less <url> syntax means that parentheses, whitespace characters, single quotes (') and double quotes (") appearing in a URL must be escaped with a backslash, e.g. url(open\(parens), url(close\)parens). Depending on the type of URL, it might also be possible to write these characters as URL-escapes (e.g. url(open%28parens) or url(close%29parens)) as described in [URL]. Alternately, the URL can be quoted as a string, in which case only newlines and the character used to quote the string need to be escaped.

body { background: url("tile.png") }

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

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

4.1. 整数： `integer^t 型

整数~値は `integer@t で表される。 ◎ Integer values are denoted by <integer>.

~literalとしての `整数@ は、1 個以上の 10 進~数字（ `0^c 〜 `9^c ）の並びであり， CSS Syntax 仕様 `CSS3SYN$r の `number-token$P 生成規則の部分集合に対応する。 整数の先頭には，符号を指示する［ `-^c または `+^c ］が前置されてもよい。 ◎ When written literally, an integer is one or more decimal digits 0 through 9 and corresponds to a subset of the <number-token> production in the CSS Syntax Module [CSS3SYN]. The first digit of an integer may be immediately preceded by - or + to indicate the integer’s sign.

【 明文化されていないが、正 整数を表す型として `positive-integer^t を用いる仕様もある。 これは、範囲を正の数に制約する `integer$t 型を意味すると捉えられる。 】

4.2. 実数： `number^t 型

実数~値は `number@t で表され、小数部を伴い得る実数（ real number ）を表現する。 ◎ Number values are denoted by <number>, and represent real numbers, possibly with a fractional component.

4.3. 百分率： `percentage^t 型

百分率~値は `percentage@t で現され、別の基準~値に対するある割合を指示する。 ◎ Percentage values are denoted by <percentage>, and indicates a value that is some fraction of another reference value.

~literalとしての `百分率@ は、［ `実数$, ~percent記号（ `%^u ） ］の並びで記される。 `百分率$は、 CSS Syntax 仕様 `CSS3SYN$r の `percentage-token$P 生成規則に対応する。 ◎ When written literally, a percentage consists of a number immediately followed by a percent sign %. It corresponds to the <percentage-token> production in the CSS Syntax Module [CSS3SYN].

【 “割合” , “パーセンテージ” 等と訳されることが多いが、単位に~percent記号が利用されつつ 百分率でない尺度による割合を表すことは，今後も含めて まず考えられないので、より限定的に “百分率” と記すことにする（語源的にも “per-cent” ）。 】

百分率~値は常に，例えば長さなど, 別の数量に相対的になる。 百分率~値が許容される 各種~propは、それが基準にする数量も定義する。 この数量は、［ 同じ要素の別の~prop, 先祖~要素の~prop, 整形文脈の計量（例えば，`包含塊$の横幅）, 他の何か ］になり得る。 ◎ Percentage values are always relative to another quantity, for example a length. Each property that allows percentages also defines the quantity to which the percentage refers. This quantity can be a value of another property for the same element, the value of a property for an ancestor element, a measurement of the formatting context (e.g., the width of a containing block), or something else.

`percentage$t が 同じ`成分~値$位置にある `次元$や`実数$と同じ数量を表現できる所では、 `calc$f 式の中でそれらを組み合わせることが可能であり、~prop文法では，次の簡便な記法を利用できる： ◎ In cases where a <percentage> can represent the same quantity as a dimension or number in the same component value position, and can therefore be combined with them in a calc() expression, the following convenience notations may be used in the property grammar:

`length-percentage@t

[ `length$t | `percentage$t ] に等価。 この `percentage$t は `length$t に解決される。 ◎ Equivalent to [ <length> | <percentage> ], where the <percentage> will resolve to a <length>.

`frequency-percentage@t

[ `frequency$t | `percentage$t ] に等価。 この `percentage$t は `frequency$t に解決される。 ◎ Equivalent to [ <frequency> | <percentage> ], where the <percentage> will resolve to a <frequency>.

`angle-percentage@t

[ `angle$t | `percentage$t ] に等価。 この `percentage$t は `angle$t に解決される。 ◎ Equivalent to [ <angle> | <percentage> ], where the <percentage> will resolve to an <angle>.

`time-percentage@t

[ `time$t | `percentage$t ] に等価。 この `percentage$t は `time$t に解決される。 ◎ Equivalent to [ <time> | <percentage> ], where the <percentage> will resolve to a <time>.

`number-percentage@t

[ `number$t | `percentage$t ] に等価。 この `percentage$t は `number$t に解決される。 ◎ Equivalent to [ <number> | <percentage> ], where the <percentage> will resolve to a <number>.

注記： 仕様は、文法における次元の所の `percentage$t を決して交代させるべきでない — それらが`互換~単位$でない限り。 ◎ Note: Specifications should never alternate <percentage> in place of a dimension in a grammar unless they are compatible.

4.4. 単位を伴う実数： 次元

一般~用語としての “次元”（ dimension, 計量の次元, 寸法）は、単位~付きの実数であり， `dimension@t で表される。 ◎ The general term "dimension" refers to a number with a unit attached to it, and are denoted by <dimension>.

~literalとしての `次元@ は、［ `実数$, `識別子$である単位~識別子 ］の並びで記される。 これは、 CSS Syntax 仕様 `CSS3SYN$r の `dimension-token$P 生成規則に対応する。 ~keyword同様，単位~識別子も `~ASCII大小無視$である。 ◎ When written literally, a dimension is a number immediately followed by a unit identifier, which is an identifier. It corresponds to the <dimension-token> production in the CSS Syntax Module [CSS3SYN]. Like keywords, unit identifiers are ASCII case-insensitive.

CSS では、［ 距離（ `length$t ）, 時間長（ `time$t ）, 周波数（ `frequency$t ）, 解像度（ `resolution$t ）, その他の数量 ］に， `dimension$t を利用する。 ◎ CSS uses <dimension>s to specify distances (<length>), durations (<time>), frequencies (<frequency>), resolutions (<resolution>), and other quantities.

4.5. 互換~単位

`算出値$を`直列化-$するときは、その中の `互換~単位@ — ある係数（ `px$u と `in$u との間の 96:1 の様な静的な係数や， `font-size$p の算出値による `em$u と `px$u との間の係数など ）で互いに関連付けられる単位たち — による各 値は、（それらの係数を通して）単独の `正準的~単位@ による値に変換される。 `互換~単位$たちが成す各~groupには、それらによる値を直列化する際に利用する`正準的~単位$が定義されることになる。 ◎ When serializing computed values, compatible units (those related by a static multiplicative factor, like the 96:1 factor between px and in, or the the computed font-size factor between em and px) are converted into a single canonical unit. Each group of compatible units defines which among them is the canonical unit that will be used for serialization.

`使用値$でもある`解決値$を直列化する際には、長さを表現する すべての値~型（百分率, 実数, ~keyword, 等々）は，長さに`互換$と見なされる。 同様に，`使用値$を返すような将来の API は、［ 距離／時間長／周波数／等々 ］を表現するどの値も，関連する`次元$の~groupに`互換$と見なした上で，それに則って正準化され~MUST。 ◎ When serializing resolved values that are used values, all value types (percentages, numbers, keywords, etc.) that represent lengths are considered compatible with lengths. Likewise any future API that returns used values must consider any values represent distances/durations/frequencies/etc. as compatible with the relevant class of dimensions, and canonicalize accordingly.

5.1. 相対~単位

`相対~長さ単位@ は、別の長さに相対的な長さを指定する。 相対~単位を利用すれば、~stylesheetをある出力~環境から別の環境に見合った縮尺に転用するのも容易になる。 ◎ Relative length units specify a length relative to another length. Style sheets that use relative units can more easily scale from one output environment to another.

以下のものが相対~単位である： ◎ The relative units are:

~prop値の`継承$において，要素が継承するのは、親に指定された相対~値ではなく，親の`算出値$である。 ◎ Child elements do not inherit the relative values as specified for their parent; they inherit the computed values.

5.2. 絶対~単位：`cm^u, `mm^u, `q^u, `in^u, `pt^u, `pc^u, `px^u

`絶対~長さ単位@ は、何らかの物理~計量に依拠し, 互いが固定的な関係にある単位である。 これは主に、出力~環境が既知である場合に有用になる。 絶対~単位には `物理~単位@（ `in$u, `cm$u, `mm$u, `pt$u, `pc$u, `q$u ）と `視野角 単位@（ `px$u ）がある： ◎ The absolute length units are fixed in relation to each other and anchored to some physical measurement. They are mainly useful when the output environment is known. The absolute units consist of the physical units (in, cm, mm, pt, pc, q) and the visual angle unit (px):

h1 { margin: 0.5in }      /* ~inch */
h2 { line-height: 3cm }   /* ~centi */
h3 { word-spacing: 4mm }  /* ~milli~meter */
h3 { letter-spacing: 1Q } /* 四分~milli~meter */
h4 { font-size: 12pt }    /* ~point */
h4 { font-size: 1pc }     /* ~pica */
p  { font-size: 12px }    /* ~pixel */

すべての絶対~長さ単位どうしは `互換$になり、 `px$u が，それらの`正準的~単位$になる。 ◎ All of the absolute length units are compatible, and px is their canonical unit.

CSS に基づいて描画する機器においては、これらの次元は、次のいずれかに依拠する。 ◎ For a CSS device, these dimensions are anchored either

• (1) `物理~単位$と物理~計量との関係付け，または ◎ (i) by relating the physical units to their physical measurements, or
• (2) `基準~pixel$と~pixel単位との関係付け ◎ (ii) by relating the pixel unit to the reference pixel.

印刷~媒体やそれに同等の高~解像度 機器に対しては、依拠単位は，標準の物理~単位（~inch, ~centi~meter, 等々）になるべきである。 低~解像度 機器や普通でない視聴距離が想定されている機器に対しては、~pixel単位が依拠単位に推奨される。 この種の機器においては、~pixel単位は，基準~pixelに最適に近似するような 機器~画素の整数倍を基準にすることが推奨される。 ◎ For print media and similar high-resolution devices, the anchor unit should be one of the standard physical units (inches, centimeters, etc). For lower-resolution devices, and devices with unusual viewing distances, it is recommended instead that the anchor unit be the pixel unit. For such devices it is recommended that the pixel unit refer to the whole number of device pixels that best approximates the reference pixel.

注記： 依拠単位が~pixel単位である場合、物理~単位は，物理的な計量に一致するとは限らない。 一方で，依拠単位が物理~単位である場合、~pixel単位は，機器~画素の整数倍に対応しないことがある。 ◎ Note: If the anchor unit is the pixel unit, the physical units might not match their physical measurements. Alternatively if the anchor unit is a physical unit, the pixel unit might not map to a whole number of device pixels.

注記： この~pixel単位と物理~単位の定義は、 CSS の過去の~versionのものとは異なる。 特に，過去の~versionでは、~pixel単位と物理~単位が固定比率で関係付けられていなかった — 物理的な単位は常にその物理的な計量に結び付けられていた一方，~pixel単位は基準~pixelに最も近似するような可変的なものとされていた。 （このように変更された理由は、 96dpi を前提にしている既存の内容があまりに多いため、その前提を覆すと，それらの内容も壊してしまうからである。） ◎ Note: This definition of the pixel unit and the physical units differs from previous versions of CSS. In particular, in previous versions of CSS the pixel unit and the physical units were not related by a fixed ratio: the physical units were always tied to their physical measurements while the pixel unit would vary to most closely match the reference pixel. (This change was made because too much existing content relies on the assumption of 96dpi, and breaking that assumption broke the content.)

`基準~pixel@ とは、~pixel密度 96dpi の機器において 読み手の腕の長さだけ離れたときの， 1 ~pixelが占める視野角である。 名目上の腕の長さ約 71cm の下での視野角は，約 0.0213 度であり、この腕の長さだけ離れた視点からの `1px^v は，およそ 0.26mm （ 1÷96 ~inch）に相当する。 ◎ The reference pixel is the visual angle of one pixel on a device with a pixel density of 96dpi and a distance from the reader of an arm’s length. For a nominal arm’s length of 28 inches, the visual angle is therefore about 0.0213 degrees. For reading at arm’s length, 1px thus corresponds to about 0.26 mm (1/96 inch).

下の画像に、視点からの距離が基準~pixelの実際の大きさに及ぼす効果を示す： 読み取り距離 71cm （ 28 ~inch）のときの基準~pixelは約 0.26mm になり， 3.5m （ 12 ~feet）のときの基準~pixelは約 1.3mm になる。 ◎ The image below illustrates the effect of viewing distance on the size of a reference pixel: a reading distance of 71 cm (28 inches) results in a reference pixel of 0.26 mm, while a reading distance of 3.5 m (12 feet) results in a reference pixel of 1.3 mm.

次の図に、機器の解像度が~pixel単位に与える効果を示す： 低~解像度の機器（例えば，典型的な~computer画面）では， `1px^v 平方の区画が 1 個の~dotで覆われるのに対し、高~解像度の機器（~printerなど）では，同じ区画に 16 ~dot入る。 ◎ This second image illustrates the effect of a device’s resolution on the pixel unit: an area of 1px by 1px is covered by a single dot in a low-resolution device (e.g. a typical computer display), while the same area is covered by 16 dots in a higher resolution device (such as a printer).

6.1. 角度の単位： `angle^t 型と `deg^u, `grad^u, `rad^u, `turn^u 単位

角度~値は `dimension$t 型であり、 `angle@t で表される。 ただし、角度~zeroのときは単位~識別子を省略できる（すなわち，構文的には `number$t の `0^v として表現できる）。 角度の単位~識別子には次のものがある： ◎ Angle values are <dimension>s denoted by <angle>. However, for zero angles the unit identifier is optional (i.e. can be syntactically represented as the number 0). The angle unit identifiers are:

`deg@u

度。 円の全周は 360 度。 ◎ Degrees. There are 360 degrees in a full circle.

`grad@u

~gradian。 “~gon” あるいは “~grade” としても知られる。 円の全周は 400 gradian 。 ◎ Gradians, also known as "gons" or "grades". There are 400 gradians in a full circle.

`rad@u

~radian。 円の全周は 2π ~radian。 ◎ Radians. There are 2π radians in a full circle.

`turn@u

周回数（ turn ）。 円の全周は 1 周回。 ◎ Turns. There is 1 turn in a full circle.

例えば，直角は［ `90deg^v ／ `100grad^v ／ `0.25turn^v ／ 約 `1.57rad^v ］に等しい。 ◎ For example, a right angle is 90deg or 100grad or 0.25turn or approximately 1.57rad.

すべての `angle$t 単位どうしは `互換$になり、 `deg$u が，それらの`正準的~単位$になる。 ◎ All <angle> units are compatible, and deg is their canonical unit.

方向を表す角度は、概して `方位角@ として解釈されるのが慣例である — ここで、 `0deg^v は~screen上の “上方” あるいは “北” を指し、角度は時計回りに大きくなる（したがって `90deg^v は “右方” あるいは “東” を指す）。 ◎ By convention, when an angle denotes a direction in CSS, it is typically interpreted as a bearing angle, where 0deg is "up" or "north" on the screen, and larger angles are more clockwise (so 90deg is "right" or "east").

例えば、 `linear-gradient$f 関数において~gradientの方向を決定する `angle$t 値は、方位角に解釈される。 ◎ For example, in the linear-gradient() function, the <angle> that determines the direction of the gradient is interpreted as a bearing angle.

6.2. 時間長の単位： `time^t 型と `s^u, `ms^u 単位

時間~値は `time@t で表される`次元$である。 時間の単位~識別子には次のものがある： ◎ Time values are dimensions denoted by <time>. The time unit identifiers are:

`s@u

秒。 ◎ Seconds.

`ms@u

~milli秒。 1 秒は 1000 ~milli秒。 ◎ Milliseconds. There are 1000 milliseconds in a second.

すべての `time$t 単位どうしは `互換$になり、 `s$u が，それらの`正準的~単位$になる。 ◎ All <time> units are compatible, and s is their canonical unit.

~propは、時間~値を一定~範囲に制約し得る。 許容範囲~外の値を伴う宣言は無効であり，`無視され$~MUST。 ◎ Properties may restrict the time value to some range. If the value is outside the allowed range, the declaration is invalid and must be ignored.

6.3. 周波数の単位： `frequency^t 型と `Hz^u, `kHz^u 単位

周波数~値は `frequency@t で表される`次元$である。 周波数の単位~識別子には次のものがある： ◎ Frequency values are dimensions denoted by <frequency>. The frequency unit identifiers are:

`Hz@u

~Hertz。 1 秒あたりの周波数を表現する。 ◎ Hertz. It represents the number of occurrences per second.

`kHz@u

~KiloHertz。 1 ~KiloHertzは 1000 ~Hertz。 ◎ KiloHertz. A kiloHertz is 1000 Hertz.

例えば 音高を表現する際の， `200Hz^v（または `200hz^v ）は 低音域にあり, `6kHz^v（または `6khz^v ）は高音域にある。 ◎ For example, when representing sound pitches, 200Hz (or 200hz) is a bass sound, and 6kHz (or 6khz) is a treble sound.

すべての `frequency$t 単位どうしは `互換$になり、 `Hz$u が，それらの`正準的~単位$になる。 ◎ All <frequency> units are compatible, and hz is their canonical unit.

6.4. 解像度の単位： `resolution^t 型と `dpi^u, `dpcm^u, `dppx^u 単位

解像度の値は `resolution@t で表される`次元$である。 解像度の単位~識別子には次のものがある： ◎ Resolution units are dimensions denoted by <resolution>. The resolution unit identifiers are:

`dpi@u

~inchあたりの~dot数 ◎ Dots per inch.

`dpcm@u

~centi~meterあたりの~dot数 ◎ Dots per centimeter.

`dppx@u

`px^u 単位あたりの~dot数 ◎ Dots per px unit.

`resolution$t 単位は、 1 CSS ［ `in^u ／ `cm^u ／ `px^u ］の中に収まる~dot数を指示することにより， 1 個の “~dot” の~graphical表現における~sizeを表現する。 用途については、例えば 媒体~query `MEDIAQ$r の `resolution$d や `CSS3-IMAGES$r にて定義される `image-resolution$p ~propを参照。 ◎ The <resolution> unit represents the size of a single "dot" in a graphical representation by indicating how many of these dots fit in a CSS in, cm, or px. For uses, see e.g. the resolution media query in [MEDIAQ] or the image-resolution property defined in [CSS3-IMAGES].

すべての `resolution$t 単位どうしは `互換$になり、 `dppx$u が，それらの`正準的~単位$になる。 ◎ All <resolution> units are compatible, and dppx is their canonical unit.

@media (min-resolution: 2dppx) { ... }

7.1. 色： `color^t 型

`color$t ~data型は， `CSS3COLOR$r にて定義される。 CSS Color Level 3 またはその後継版を~supportする~UAは、その定義に従って `color$t を解釈し~MUST。 ◎ The <color> data type is defined in [CSS3COLOR]. UAs that support CSS Color Level 3 or its successor must interpret <color> as defined therein.

7.2. 画像： `image^t 型

`image$t ~data型は， `CSS3-IMAGES$r にて定義される。 CSS Image Values Level 3 またはその後継版を~supportする~UAは、その定義に従って `image$t を解釈し~MUST。 ◎ The <image> data type is defined in [CSS3-IMAGES]. UAs that support CSS Image Values Level 3 or its successor must interpret <image> as defined therein.

7.3. 二次元的な位置： `position^t 型

`position$t ~data型は， `CSS3BG$r にて定義される。 CSS Backgrounds & Borders Level 3 またはその後継版を~supportする~UAは、その定義に従って `position$t を解釈し~MUST。 ◎ The <position> data type is defined in [CSS3BG]. UAs that support CSS Backgrounds & Borders Level 3 or its successor must interpret <position> as defined therein.

8.1. 数式： `calc^f

`calc@f 関数は、数式を成分~値として利用できるようにする。 数式は［ 加算（ `+^css ）, 減算（ `-^css ）, 乗算（ `*^css ）, 除算（ `/^css ） ］を伴ない得る。 `calc$f 式は、標準の演算子 優先順位規則による，数学的な計算による結果を表現する。 これは，［ `length$t ／ `frequency$t ／ `angle$t ／ `time$t ／ `percentage$t ／ `number$t ／ `integer$t ］型の値が許容される所なら どこでも利用できる。 `calc$f 式の引数のそれぞれの成分は、［ ~literal値, `attr$f 式, `calc$f 式 ］のいずれかをとり得る。 ◎ The calc() function allows mathematical expressions with addition (+), subtraction (-), multiplication (*), and division (/) to be used as component values. The calc() expression represents the result of the mathematical calculation it contains, using standard operator precedence rules. It can be used wherever <length>, <frequency>, <angle>, <time>, <percentage>, <number>, or <integer> values are allowed. Components of a calc() expression can be literal values or attr() or calc() expressions.

section {
  float: left;
  margin: 1em; border: solid 1px;
  width: calc(100%/3 - 2*1em - 2*1px);
}

p {
  margin: calc(1rem - 2px) calc(1rem - 1px);
}

:root {
  font-size: calc(100vw / 40);
}

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

<`calc$f> = calc( `calc-sum$P )
`calc-sum@P = `calc-product$P [ [ '+' | '-' ] `calc-product$P ]*
`calc-product@P = `calc-value$P [ '*' `calc-value$P | '/' `number$t ]*
`calc-value@P = `number$t | `dimension$t | `percentage$t | ( `calc-sum$P )

.foo {
	width: 200px;
	background-image: url(bg.png);
	background-position: left 50%;
	/* 
`200px^v の 50% が `100px^v であるにも関わらず
◎
different than:
 */
	background-position: left 100px;
	/* 
これとは効果が異なる
◎
despite 50% of 200px being 100px
 */
}

width: calc(5px - 10px);
width: calc(-5px);
width: 0px;

8.2. 一連の値の~toggle ： `toggle^f

`toggle@f 式は、子孫の一連の要素が，同じ値を継承する代わりに，値の~listから循環的に値を得られるようにする。 ◎ The toggle() expression allows descendant elements to cycle over a list of values instead of inheriting the same value.

em { font-style: toggle(italic, normal); }

ul { list-style-type: toggle(disc, circle, square, box); }

`toggle$f 式の構文は次で与えられる： ◎ The syntax of the toggle() expression is:

toggle( `toggle-value$t`#$g )

ここで `toggle-value@t は、式が置かれる場所で妥当かつ, ~top-levelの~commaは含まないような，任意の CSS 値である。 内側のいずれかの値が妥当でない場合、 `toggle$f 式~全体が無効になる。 `toggle$f 式は、任意の~propの値に利用してよいが，その~prop値の唯一の成分で~MUST。 ◎ where <toggle-value> is any CSS value that is valid where the expression is placed, and that doesn’t contain any top-level commas. If any of the values inside are not valid, then the entire toggle() expression is invalid. The toggle() expression may be used as the value of any property, but must be the only component in that property’s value.

`toggle$f 記法は入子にできない。 また `attr$f や `calc$f も含められない。 そのような構成子を含む宣言は無効になる。 ◎ The toggle() notation is not allowed to be nested; nor may it contain attr() or calc() notations. Declarations containing such constructs are invalid.

background-position: 10px toggle(50px, 100px);
/* 
`toggle$f 式は~propの唯一の成分で~MUST
◎
toggle() must be the sole value of the property
 */

list-style-type: toggle(disc, 50px);
/* 
`50px^v は `list-style-type$p の妥当な値でない
◎
50px isn’t a valid value of 'list-style-type'
 */

`toggle$f 式の算出値を決定するためには、最初に それぞれの引数を，それが式が置かれた~propの唯一の成分であったかのように評価して，引数ごとに表現される算出値を得る — n 番目の引数に対し得られた値を C<sub>n</sub> とする。 次に、各 C<sub>n</sub> を~propの`継承値$ と比較する。 `toggle$f の算出値は、［ C<sub>n</sub> が`継承値$に合致するような~~最小の n ］に対する C_n+1 になる。 n が最後の引数に対応する場合, あるいは合致する n が無い場合の算出値は、最初の引数で表現される算出値 C₁ になる。 ◎ To determine the computed value of toggle(), first evaluate each argument as if it were the sole value of the property in which toggle() is placed to determine the computed value that each represents, called Cn for the n-th argument to toggle(). Then, compare the property’s inherited value with each Cn. For the earliest Cn that matches the inherited value, the computed value of toggle() is Cn+1. If the match was the last argument in the list, or there was no match, the computed value of toggle() is the computed value that the first argument represents.

注記： したがって， `toggle$f 内で同じ値が繰り返された場合、~listは短絡されることになる。 例えば `toggle(1em, 2em, 1em, 4em)^v は `toggle(1em, 2em)^v に等価になる。 ◎ Note: This means that repeating values in a toggle() short-circuits the list. For example toggle(1em, 2em, 1em, 4em) will be equivalent to toggle(1em, 2em).

注記： `toggle$f は，明示的に親の算出値を見るので、`非継承~prop$でも働く。 これは、非継承~propにおける `inherit$v ~keywordと同様に働く。 ◎ Note: That toggle() explicitly looks at the computed value of the parent, so it works even on non-inherited properties. This is similar to the inherit keyword, which works even on non-inherited properties.

注記： ~propの`算出値$は抽象的な値の集合であり、特定0の方法による直列化 `CSS21$r で与えられるものではない。 従って、算出値の比較は常に一義的に定まり, 期待される結果になる筈である。 例えば，Level 2 の `background-position$p の算出値は、それぞれが絶対~長さまたは百分率として表現される，ちょうど 2 個の~offsetを持つので、宣言 `background-position$p: `top center^v; および `background-position$p: `50% 0%^v; が生産する算出値は，一致する。 ~prop定義の “算出値” の欄が多義的, 厳格に過ぎるに思われる場合は、修正に取り掛かれるよう ~feedback を願う。 ◎ Note: That the computed value of a property is an abstract set of values, not a particular serialization [CSS21], so comparison between computed values should always be unambiguous and have the expected result. For example, a Level 2 background-position computed value is just two offsets, each represented as an absolute length or a percentage, so the declarations background-position: top center and background-position: 50% 0% produce identical computed values. If the "Computed Value" line of a property definition seems to define something ambiguous or overly strict, please provide feedback so we can fix it.

`toggle$f が`略式~prop$に利用された場合、その各 `下位prop$の値は， `toggle$f 式であって, その一連の引数が［ 元の `toggle$f 式の引数のそれぞれについて，それが その`略式~prop$の唯一の成分であったとするとき，下位propが受取ることになる値 ］にされたものになる。 ◎ If toggle() is used on a shorthand property, it sets each of its longhands to a toggle() value with arguments corresponding to what the longhand would have recieved had each of the original toggle() arguments been the sole value of the shorthand.

margin: toggle(1px 2px, 4px, 1px 5px 3px);

margin-top:    toggle(1px, 4px, 1px);
margin-right:  toggle(2px, 4px, 5px);
margin-bottom: toggle(1px, 4px, 3px);
margin-left:   toggle(2px, 4px, 5px);

margin-top:    toggle(1px, 3px);
margin-right:  toggle(2px, 4px, 5px);
margin-bottom: toggle(1px, 3px);
margin-left:   toggle(2px, 4px, 5px);

8.3. 属性~参照： `attr^f

要素や`疑似要素$に適用される~propの成分~値には、 `attr@f 関数が許容される。 これは要素の属性の値を返す。 疑似要素に利用された場合、その`出自の要素$の属性の値を返す。 【 “属性” は、 IDL 属性ではなく，内容~属性を指す】 ◎ The attr() function is allowed as a component value in properties applied to an element or pseudo-element. It returns the value of an attribute on the element. If used on a pseudo-element, it returns the value of the attribute on the pseudo-element’s originating element.

`attr$f 式の算出値は、下の規則に従って，要素~上の［ 指定された名前の属性 ］の値になる。 ◎ The computed value of the attr() expression is the value of the attribute with the specified name on the element, according to the rules given below.

注記： CSS2.1 `CSS21$r の下では、 `attr$f 式は，常に文字列を返す。 CSS3 の下では、 `attr$f 式は，多様な型の値を返し得る。 が、何でも返せるわけではない。 例えば，［ ~counter†, 文字列~名†, 引用符†, （ `auto^v, `nowrap^v, `baseline^v などの）~keyword値 ］などのような値は返せない。 これは意図的にそのようにされている。 `attr$f 式の目的が、 CSS を用いて言語の呈示上の整形法を記述するためではなく， CSS に意味論的な~dataを織り込めるようにする所にあるからである。 【 † — おそらく順に counter, named string, quotes を指す。 】 ◎ Note: In CSS2.1 [CSS21], the attr() expression always returns a string. In CSS3, the attr() expression can return many different types. The attr() expression cannot return everything, for example it cannot do counters, named strings, quotes, or keyword values such as auto, nowrap, or baseline. This is intentional, as the intent of the attr() expression is not to make it possible to describe a presentational language’s formatting using CSS, but to enable CSS to take semantic data into account.

`attr$f 式に対する新たな構文は、次で与えられる： ◎ The new syntax for the attr() expression is:

attr( `attr-name$t `type-or-unit$t? [ , `attr-fallback$t ]? )

ここで：

• `attr-name@t 引数は、 `CSS 有修飾名$（ `CSS3NAMESPACE$r の `qname$P 生成規則）であり，属性の名前を表現する。 （名前空間が不在ならば、これはちょうど CSS 識別子になる。） `属性~選択子$と同様に、 `attr-name$t 値が~ASCII大小無視になるかどうかは，文書~言語に依存する。 ◎ where <attr-name> is a CSS qualified name (the qname production in [CSS3NAMESPACE]) that represents an attribute name. (In the absence of namespacing, this will just be a CSS identifier.) As with attribute selectors, the case-sensitivity of <attr-name> depends on the document language.
• 任意選択の `type-or-unit@t 引数は、属性~値の解釈の仕方を~UAに指示するものであり，後述の~keyword値のいずれかをとる。 それは、 `attr$f 式の型を定義する。 省略された場合、暗黙的に `string^v が指定される。 ◎ The optional <type-or-unit> argument is a keyword drawn from the list below that tells the UA how to interpret the attribute value, and defines a type for the attr() expression. If omitted, string is implied.

• 任意選択の `attr-fallback@t 引数は、次のいずれかの場合に利用される，~fallback値を表現する：

  • 要素にその名前の属性が無い
  • 属性の値は与えられた型に解析できない
  • 属性の値は当の~prop値として無効であるか または範囲~外にある

  `attr-fallback$t の不在の下では、 後述の `type-or-unit$t の既定~値が暗黙的に指定される。

  ◎ The optional <attr-fallback> argument represents a fallback value, which is used if the named attribute is missing, or its value cannot be parsed into the given type or is invalid/out-of-range for the property. If it’s absent, the default value for the given <type-or-unit> (from the list below) is implied.

注記： `toggle$f の `toggle-value$t 引数と違って、 `attr$f の `attr-fallback$t 引数は 常に関数記法の最後の引数になるので，~top-levelにも~commaを含ませられる。 ◎ Note: Unlike <toggle-value>s, an attr() <attr-fallback> value may contain top-level commas, as it is always the last argument in the functional notation.

`attr$f 式は、次のすべてが成立する場合に限り妥当である： ◎ The attr() expression is only valid if:

• `attr$f 式の型は `attr$f 式が置かれる場所で妥当である。 ◎ the attr() expression’s type is valid where the attr() expression is placed,
• `名前空間~接頭辞$を伴う属性~名に対しては、その接頭辞が 【 `名前空間~宣言$により 】 定義されている。 ◎ the namespace prefix of the attribute name, if any, is defined,
• `attr-fallback$t は， `attr$f 式が置かれる場所で妥当である。 ◎ the <attr-fallback> is valid where the attr() expression is placed,
• `attr-fallback$t は，別の `attr$f 式を含んでいない。 ◎ the <attr-fallback> does not contain another attr() expression,
• `attr$f 式が~propの唯一の成分~値でない場合は、 `attr-fallback$t は， `attr$f の型に合致している。 ◎ and, if the attr() expression is not the sole component value of a property, the <attr-fallback> matches the attr()’s type

指定された属性が要素~上に存在する場合、（以下の~listにて定義される） `type-or-unit$t 引数の要件に従って，属性の値が構文解析され~MUST。 型が `string^v である場合を除き、最初に，先頭と末尾の`空白$は除去され~MUST。 結果の値が `attr$f 式の値になる。 値が要件を満たす形に構文解析できない場合、~fallback値が `attr$f 式の値になる。 ◎ If the specified attribute exists on the element, the value of the attribute must be parsed as required by the <type-or-unit> argument (as defined in the list below). Unless the type is string, it must first be stripped of leading and trailing white space. The resulting value is the attr() expression’s value. If the value did not parse as required, the attr() expression’s value is its fallback value.

`type-or-unit$t ~keywordは次で与えられる： ◎ The <type-or-unit> keywords are:

`string^v

属性~値は、 CSS `string$t の内容とみなされて解析される。 既定~値は空~文字列。 ◎ The attribute value is taken as the contents of a CSS <string>. The default is the empty string.

注記： 属性~値は CSS 構文解析器により再構文解析されるわけではない。 例えば，値 "\51" の属性は、（~escapeが評価されたときの）文字列 "Q" ではなく，３個の文字からなる文字列を生産することになる。 ◎ Note: This does not reparse the attribute value with the CSS parser. So, for example, an attribute whose value is "\51" will produce a string containing those three characters, not a string containing "Q" (the character that the escape would evaluate to).

`color^v

属性~値は、 HASH または IDENT CSS ~tokenとして構文解析された上で，成功裡に `color$t として解釈され~MUST。 既定~値は `currentcolor$v 。 ◎ The attribute value must parse as a HASH or IDENT CSS token, and be successfully interpreted as a <color>. The default is currentcolor.

`url^v

属性~値は、 CSS `string$t 内容として， `url$f 記法の中の引用符で括られた文字列として解釈される。 既定~値は `about:invalid^v （付録 A にて定義される）。 これは，汎的~error状態を伴う 存在しない文書を指す~URLである。 相対~URLは、文書~言語により［ 要素を出自にする~URL ］に適用される規則に従って，絶対~URLにされ~MUST。 それは~stylesheetに相対的ではない。 ◎ The attribute value is taken as the contents of a CSS <string>. It is interpreted as a quoted string within the url() notation. The default is about:invalid, which is a URL defined (in Appendix A) to point to a non-existent document with a generic error condition. Relative URLs must be made absolute according to the rules of the document language as applied to URLs originating from the element; they are not relative to the style sheet.

`integer^v

属性~値は、 NUMBER CSS ~tokenとして構文解析された上で， `integer$t として成功裡に解釈され~MUST。 既定~値は、 `0^v，あるいは `0^v が~propに妥当でない場合は その~propがとり得る最小~値である。 当の~propの値が一定の範囲の整数のみを受容するものであって, 属性~値が範囲~外にある場合も、既定~値が利用され~MUST。 ◎ The attribute value must parse as a NUMBER CSS token, and be successfully interpreted as an <integer>. The default is 0, or else the property’s minimum value if 0 is not valid for the property. The default must also be used if the property in question only accepts integers within a certain range and the attribute is out of range.

`number^v

属性~値は、 NUMBER CSS ~tokenとして構文解析された上で， `number$t として解釈され~MUST。 既定~値は、 `0^v，あるいは `0^v が~propに妥当でない場合は ~propがとり得る最小~値である。 当の~propの値が一定の範囲の実数†のみを受容するものであって, 属性~値が範囲~外にある場合も、既定~値が利用され~MUST。 【†原文 “integer（整数）” はおそらく誤記】 ◎ The attribute value must parse as a NUMBER CSS token, and is interpreted as an <number>. The default is 0, or else the property’s minimum value if 0 is not valid for the property. The default must also be used if the property in question only accepts integers within a certain range and the attribute is out of range.

`length^v

`angle^v

`time^v

`frequency^v

属性~値は、DIMENSION CSS ~tokenとして構文解析された上で，指定された単位による`次元$の値として成功裡に解釈され~MUST。 既定~値は、対応する単位を伴う `0^v であるか，あるいは それが当の~propに対し妥当でないならば その~propに定義される最小~値になる。 当の~propが一定の範囲の値を受容するものであって（例えば，正の長さ, 0 〜 90 度の角度など）, 属性~値が範囲~外にある場合も、既定~値が利用され~MUST。 単位が相対~長さの場合、絶対~長さに算出され~MUST。 ◎ The attribute value must parse as a DIMENSION CSS token, and be successfully interpreted as the specified type. The default is 0 in the relevant units, or else the property’s minimum value if 0 in the relevant units is not valid for the property. The default must also be used if the property in question only accepts values within a certain range (e.g. positive lengths or angles from 0 to 90deg) and the attribute is out of range (e.g. a negative length or 180deg). If the unit is a relative length, it must be computed to an absolute length.

`%^u

［ `length$t, `angle$t, `time$t, `frequency$t ］いずれかによる単位に合致する~keyword ◎ A keyword matching one of the <length>, <angle>, <time>, or <frequency> units

属性~値は、 NUMBER CSS ~tokenとして構文解析された上で，指定された単位による`次元$の値として解釈され~MUST。 既定~値は、対応する単位を伴う `0^v であるか，あるいはそれが当の~propに対し妥当でないならば その~propに定義される最小~値になる。 当の~propが一定の範囲の値を受容するものであって（例えば，正の長さ, 0 〜 90 度の角度など）, 属性~値が範囲~外にある場合も、既定~値が利用され~MUST。 単位が相対~長さの場合、絶対~長さに算出され~MUST。 ◎ The attribute value must parse as a NUMBER CSS token, and is interpreted as a dimension with the specified unit. The default is 0 in the relevant units, or else the property’s minimum value if 0 in the relevant units is not valid for the property. The default must also be used if the property in question only accepts values within a certain range (e.g. positive lengths or angles from 0 to 90deg) and the attribute is out of range (e.g. a negative length or 180deg). If the unit is a relative length, it must be computed to an absolute length.

<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$p は色を受容しない
◎
'content' doesn’t accept colors
 */

content: attr(end-of-quote string, inherit) close-quote;
/* 
`inherit$v 値はここでは許容されない。結果が `inherit close-quote^v になり，妥当でないので。
◎
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^u 単位はここでは妥当でない
◎
deg units are not valid at that point
 */

color: attr(color); /* 
`color^p は文字列を受容しない
◎
'color' doesn’t accept strings
 */

注記： 現時点では， `attr$f 式を別の属性に~fall-backさせることはできないが、 CSS の将来の~versionにて，そのように拡張され得る。 ◎ Note: The attr() expression cannot currently fall back onto another attribute. Future versions of CSS may extend attr() in this direction.

9.1. `about:invalid^c ~URL~schemeの登録

この節では、 `RFC6694$r にて定義される登録~手続きに則って、 `about:invalid^c ~URLを定義し，登録する。 ◎ This sections defines and registers the about:invalid URL, in accordance with the registration procedure defined in [RFC6694].

この登録の公式の記録は http://www.iana.org/assignments/about-uri-tokens/about-uri-tokens.xhtml にて見られる。 ◎ The official record of this registration can be found at http://www.iana.org/assignments/about-uri-tokens/about-uri-tokens.xhtml.