1. 概要
各種~CSS~propの定義表における値~定義の欄には、 ~keyword, ~data型(山括弧 `<^c, `>^c で括られて現れる), および それらをどう組合するかについての情報を包含している。 この仕様では、多くの~propから利用できる,汎用~data型(最も広範に利用されている `length$t など)について述べる。 より特定的な~data型(例えば `spacing-limit^t )は、対応している~moduleにて述べられる。 ◎ The value definition field of each CSS property can contain keywords, data types (which appear between < and >), and information on how they can be combined. Generic data types (<length> being the most widely used) that can be used by many properties are described in this specification, while more specific data types (e.g., <spacing-limit>) are described in the corresponding modules.
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. 値~定義の構文
ここに述べる構文は、~CSS~propの妥当な値の集合を定義するために利用される。 ~prop値は、1 個以上の成分を持ち得る。 ◎ The syntax described here is used to define the set of valid values for CSS properties. A property value can have one or more components.
2.1. 成分~値の型
~propの成分~値の型は、その値~定義において,以下の仕方で指名される: ◎ Component value types are designated in several ways:
- 引用符や山括弧を伴わずに, ~literalとして現れるものは、~keyword値である( `auto^v, `disc$v, 等々)。 ◎ keyword values (such as auto, disc, etc.), which appear literally, without quotes (e.g. auto)
- 基本~data型は、山括弧( `<^c, `>^c )で括られて現れる( `length$t, `percentage$t, 等々)。 ◎ basic data types, which appear between < and > (e.g., <length>, <percentage>, etc.).
- 同じ名前を持つ~propと同じ範囲の値をとる,型(例えば `border-width$tp, `background-attachment$tp など)。 この場合、その型の名前は,山括弧の間の(引用符で完結する)~prop名になる。 ただし, `inherit$v のような `~CSS全域~keyword$は、 【どの~propもその種の値をとり得るとされているので,】 この種の型の値域からは 除外される。 ◎ types that have the same range of values as a property bearing the same name (e.g., <‘border-width’>, <‘background-attachment’>, etc.). In this case, the type name is the property name (complete with quotes) between the brackets. Such a type does not include CSS-wide keywords such as inherit.
- 非末端型【他の型を組合して定義される型】は、~propと同じ名前を共有しない。 この場合の非末端型の名前は、 `spacing-limit^t のように,山括弧( `<^c, `>^c )で括られて現れる。 `border-width^t と `border-width$tp との間の差異に注意: 後者は, `border-width$p ~propがとり得る値として定義される一方、前者は,他のどこかで 明示的に拡張pが定義される必要がある。 非末端型の定義は、概して,仕様の中でそれが最初に現れる近辺に示される。 ◎ non-terminals that do not share the same name as a property. In this case, the non-terminal name appears between < and >, as in <spacing-limit>. Notice the distinction between <border-width> and <‘border-width’>: the latter is defined as the value of the border-width property, the former requires an explicit expansion elsewhere. The definition of a non-terminal is typically located near its first appearance in the specification.
一部の~propの値~定義は、[ ~slash( `/^c )/~comma( `,^c )/丸括弧( `(^c, `)^c ) ]も~literalとして含むことがある。 これらは、対応する~tokenを表現する。 正符号( `+^c )など,他の成分~値に現れ得る非~keywordの~literal文字は、一重~引用符で括って記され~MUST。 ◎ Some property value definitions also include the slash (/), the comma (,), and/or parentheses as literals. These represent their corresponding tokens. Other non-keyword literal characters that may appear in a component value, such as “+”, must be written enclosed in single quotes.
文法の中で省略可能な項を区切るために利用される `~comma@ は、一部の状況では,暗黙的に省略できる/され得る。 また、文法において,[ ~propや他の~CSS値の中の~top-levelの~list, あるいは 関数の引数~list ]の中に指定された~commaは、次に挙げる場合には,省略され~MUST: ◎ Commas specified in the grammar are implicitly omissible in some circumstances, when used to separate optional terms in the grammar. Within a top-level list in a property or other CSS value, or a function’s argument list, a comma specified in the grammar must be omitted if:
- ~commaに先行するすべての項が省略された場合 ◎ all items preceding the comma have been omitted
- ~commaに後続するすべての項が省略された場合 ◎ all items following the comma have been omitted
- ~commaに挟まれた項が省略されると,複数の~commaが(`空白$や~commentを無視して)連続することになる場合 ◎ multiple commas would be adjacent (ignoring white space/comments), due to the items between the commas being omitted.
例えば,[ どれも省略可能な, 3 個の引数 ]を受容する関数の文法は、次の様に記せる: ◎ For example, if a function can accept three arguments in order, but all of them are optional, the grammar can be written like:
example( first`?$g `,$g second`?$g `,$g third`?$g )
この文法の下では、 `example(first, second, third)^v は妥当であり, `example(first, second)^v / `example(first, third)^v / `example(second)^v も同様である。 一方で, `example(first, , third)^v は、無効になる。 ~commaには、 2 つの選択肢を分離することが要求されるので。 同じ理由から、 `example(,second)^v / `example(first,)^v / `example(first second)^v も無効になる。 ◎ Given this grammar, writing example(first, second, third) is valid, as is example(first, second) or example(first, third) or example(second). However, example(first, , third) is invalid, as one of those commas are no longer separating two options; similarly, example(,second) and example(first,) are invalid. example(first second) is also invalid, as commas are still required to actually separate the options.
~commaが暗黙的に省略し得ないものであったなら、省略し得る引数を適正に表すための文法は,ずっと複雑になり,その特色機能の単純~性も損なわれるであろう。 ◎ If commas were not implicitly omittable, the grammar would have to be much more complicated to properly express the ways that the arguments can be omitted, greatly obscuring the simplicity of the feature.
すべての~CSS~propには、~prop値の単独の成分として, `~CSS全域~keyword$値が受容される。 可読性のため、これらの~prop値は,構文~定義には明示的に挙げられない。 例えば, `border-color$p の値~定義は( `color^t{1,4} と示されているが),実際には: [ `color^t{1,4} ] | `inherit$v | `initial$v | `unset$v である。 ◎ All CSS properties also accept the CSS-wide keyword values as the sole component of their property value. For readability these are not listed explicitly in the property value syntax definitions. For example, the full value definition of border-color is <color>{1,4} | inherit | initial | unset (even though it is listed as <color>{1,4}).
【 `~CSS全域~keyword$の節に付記されているように,新たな全域~keywordが導入されれば、それらも追加されることになるであろう(しかしながら,仮に導入された場合、 作者~定義な識別子 との衝突から,後方互換性の問題も生じ得ることになる)。 】
注記: したがって、一般に,同じ宣言の中で これらの~keywordが他の成分~値と組合された場合、その宣言は無効になる。 例えば `background$p: `url(corner.png) no-repeat, inherit^v; は、無効になる。 ◎ Note: This implies that, in general, combining these keywords with other component values in the same declaration results in an invalid declaration. For example, background: url(corner.png) no-repeat, inherit; is invalid.
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 (&&) 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, 二重~縦線, 縦線 ]の順になる。 従って、次の 2 つの行は等価になる: ◎ 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 (||, &&), 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
特定の個数と順序による,複数の独立な`成分~値$を組合するための、共通の仕方がいくつかある。 特に、仕様の策定者が,[ 作者は、成分~値のある集合から,[ 文法に指定される順序か,あるいは任意の順序 ]で,その中の[ 0 個以上/ 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:
順序 | 指定どおり | 任意 |
---|---|---|
0 個以上 | `~vA? ~vB? ~vC?^g | `~vA? || ~vB? || ~vC?^g |
1 個以上 | `[ ~vA? ~vB? ~vC? ]!^g | `~vA || ~vB || ~vC^g |
すべて | `~vA ~vB ~vC ^g | `~vA ~AMP~AMP ~vB ~AMP~AMP ~vC^g |
順序が “任意” のものは,どれも結合子を利用して表される一方、 “指定どおり” のものは,どれも並記になっていることに注意。 ◎ 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$t として構文解析されることになる。 この場合、 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> 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
~prop | 値~定義の欄 | 値の例 |
---|---|---|
`orphans$p | `integer^t | `3^v |
`text-align$p | `left^v | `right^v | `center^v | `justify^v | `center^v |
`padding-top$p | `length^t | `percentage^t | `5%^v |
`outline-color$p | `color^t | `invert^v | `#fefefe^v |
`text-decoration$p | `none^v | `underline^v || `overline^v || `line-through^v || `blink^v | `overline underline^v |
`font-family$p | [ `family-name^t | `generic-family^t ]# | `"Gill Sans", Futura, sans-serif^v |
`border-width$p | [ `length^t | `thick^v | `medium^v | `thin^v ]{1,4} | `2px medium 4px^v |
`text-shadow$p | [ `inset^v? ~AMP~AMP [ `length^t{2,4} ~AMP~AMP `color^t? ] ]# | `none^v | `3px 3px rgba(50%, 50%, 50%, 50%), lemonchiffon 0 0 4px inset^v |
3. テキスト~data型
`識別子@ は、汎用には `ident@t で表出される, `ident-token$t `CSS3SYN$r に適合する文字~並びからなる。 識別子は、引用符で括ることはできない — さもなければ、文字列として解釈されることになる。 ◎ Identifiers, generically denoted by <ident>, consist of a sequence of characters conforming to the <ident-token> grammar. [CSS3SYN] Identifiers cannot be quoted; otherwise they would be interpreted as strings.
【 他の文脈の “識別子” と区別するときには、 “~CSS識別子” とも記される。 】
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).
例えば, `border-collapse$p ~propの値~定義は次で与えられる: ◎ For example, here is the value definition for the border-collapse property:
値 | `collapse^v | `separate^v |
---|
その用例: ◎ And here is an example of its use:
table { border-collapse: separate }
3.1.1. ~CSS全域~keyword: `initial^v, `inherit^v, `unset^v
成分~値の型にて定義されるように,すべての~propは `~CSS全域~keyword@ を受容する。 これらは、すべての~CSS~propに共通する値の算出法を,表現する。 ◎ As defined above, all properties accept the CSS-wide keywords, which represent value computations common to all CSS properties.
~keyword `initial$v は、~propの`初期値$として指定されている値を表現する。 ~keyword `inherit$v は、要素の親上の~propの`算出値$を表現する。 ~keyword `unset$v は、~propが継承するかどうかに応じて, `inherit$v か `initial$v としてふるまう。 これらの~keywordは Cascade ~module `CSS3CASCADE$r にて規定されている。 ◎ The initial keyword represents the value specified as the property’s initial value. The inherit keyword represents the computed value of the property on the element’s parent. The unset keyword acts as either inherit or initial, depending on whether the property is inherited or not. All of these keywords are normatively defined in the Cascade module. [CSS3CASCADE]
他の~CSS仕様も追加の ~CSS全域~keywordを定義し得る。 ◎ Other CSS specifications can define additional CSS-wide keywords.
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 (meaning they’re compared by codepoint), even in the ASCII range (e.g. example and EXAMPLE are two different, unrelated user-defined identifiers). , even in the ASCII range
`~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.
例えば、`略式~prop$による宣言 `animation$p: `ease-in ease-out^v; は、`下位prop$による宣言 `animation-timing-function$p: `ease-in$v; `animation-name$p: `ease-out$v; に等価になる。 `ease-in$v は、 `animation-timing-function$p に属する `timing-function$t 生成規則に該当する結果、 `ease-out$v は, `animation-name$p に属する `custom-ident$t 生成規則に該当するようになる。 ◎ For example, the shorthand declaration animation: ease-in ease-out is equivalent to the longhand declarations animation-timing-function: ease-in; animation-name: ease-out;. ease-in is claimed by the <timing-function> production belonging to animation-timing-function, leaving ease-out to be claimed by the <custom-ident> production belonging to animation-name.
注記: `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 で表出され,一重~引用符または二重~引用符で括られた文字~並びからなる。 これらは, `string-token$t 生成規則 `CSS3SYN$r に対応する。 ◎ 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: 'これは \'文字列\'。';
美観その他の理由で,文字列を複数~行lに分割することもアリである。 ただし,そのような場合は、改行文字~自身が~backslash( \ )で~escapeされる必要がある。 それらの改行文字は、後で文字列から除去される。 例えば,次の 2 つの選択子は、正確に同じになる: ◎ 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 の文字 `000A^U LINE FEDD であるが、~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@f 関数記法は、 `url$t で表出され,資源を指す`~URL$を表現する。 `url$t の代表的な構文は: ◎ The url() functional notation, denoted by <url>, represents a URL, which is a pointer to a resource. The typical syntax of a <url> is:
`url@t = url( `string$t `url-modifier$t`*$g )
背景~画像として利用される~URLの例を下に示す: ◎ Below is an example of a URL being used as a background image:
body { background: url("http://www.example.com/pinkish.gif") }
`url$t は,~URL自身を括る引用符を省いて記されてもよい。 (その構文は、 `url-token$t として`特別に構文解析され$る。 `CSS3SYN$r ) ◎ A <url> may alternately be written without quotation marks around the URL itself, in which case it 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);
注記: この引用符なしの構文は、 `url-modifier$t 引数を受容しない。 加えて、~URLの中の[ 括弧, `空白$文字, 一重~引用符( `'^c ), 二重~引用符( `"^c ) ]は、~backslashで~escapeされ~MUST。 ~URLの種別にもよるが,これらの文字を `URL$r の規定に従って~URL~escapeで記すのもアリである(例えば,先の例に対する `url(open%28parens)^v や `url(close%29parens)^v )。 ◎ Note: This unquoted syntax is cannot accept a <url-modifier> argument and has extra escaping requirements: 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). (In quoted <string> url()s, only newlines and the character used to quote the string need to be escaped.) 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].
一部の~CSS文脈( `import$at など)では、 `url$f で括る代わりに~~素の `string$t で表現することも許容される。 これは、その文字列を包含する `url$f 関数と同じに挙動する。 ◎ Some CSS contexts (such as @import) also 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";
3.4.1. 相対~URL
資源の絶対的な所在に依存しない ~module化された~stylesheetを作成するためには、作者は,相対~URLを利用するべきである。 ( `URL$r にて定義される)相対~URLは、基底~URLを利用して全部的な~URLに解決される。 この処理~用の規範的~algoは, RFC 3986 の 3 節にて定義されている。 ~CSS~stylesheetにおいては、基底~URLは,~source文書のそれではなく,~stylesheet自身のそれである。 文書~内に埋込まれた~stylesheetの基底~URLは、その文書に結び付けられている基底~URLになる。 ◎ In order to create modular style sheets that are not dependent on the absolute location of a resource, authors should use relative URLs. Relative URLs (as defined in [URL]) are resolved to full URLs using a base URL. RFC 3986, section 3, defines the normative algorithm for this process. For CSS style sheets, the base URL is that of the style sheet itself, not that of the styled source document. Style sheets embedded within a document have the base URL associated with their container.
~propの算出値に現れる `url$t は、前段落で述べたように,絶対~URLに解決される。 ~UAが~URLを絶対~URLに解決できない場合、指定値がその算出値になる。 ◎ When a <url> appears in the computed value of a property, it is resolved to an absolute URL, as described in the preceding paragraph. The computed value of a URL that the UA cannot resolve to an absolute URL is the specified value.
例えば,次の規則が: ◎ For example, suppose the following rule:
body { background: url("tile.png") }
次の~URLで指名される~stylesheetの中に在るとするとき: ◎ is located in a style sheet designated by the URL:
http://www.example.org/style/basic.css
~source文書の `body^e の背景は、次の~URLで指名される資源の画像で,敷詰められることになる: ◎ The background of the source document’s <body> will be tiled with whatever image is described by the resource designated by the URL:
http://www.example.org/style/tile.png
`body^e を包含している~source文書の~URLに関わらず,同じ画像が利用されることになる。 ◎ The same image will be used regardless of the URL of the source document containing the <body>.
3.4.1.1. 素片~URL
~browserによる~URLの取扱いに共通する ある極端さに対処するため、~CSSには,素片のみの~url用に特別な挙動がある。 ◎ To work around some common eccentriticites in browser URL handling, CSS has special behavior for fragment-only urls.
`url$f の値が文字 `0023^U NUMBER SIGN ( `#^c )から開始する場合、その `url$f の `局所~url~flag@ を ~ON にした下で、通常の~URLに対するときのように構文解析する。 ◎ If a url()’s value starts with a U+0023 NUMBER SIGN (#) character, parse it as per normal for URLs, but additionally set the local url flag of the url().
[ `局所~url~flag$ が ~ON にされた `url$f ]を照合するときは、~URLの素片~以外はすべて無視した上で,その素片を現在の[ 相対~URLの解決-時に用いる文書 ]に対して解決する。 この参照は、常に(他の文書でなく)同じ文書~内として扱われ~MUST。 ◎ When matching a url() with the local url flag set, ignore everything but the URL’s fragment, and resolve that fragment against the current document that relative URLs are resolved against. This reference must always be treated as same-document (rather than cross-document).
[ `局所~url~flag$ が ~ON にされた `url$f ]を`直列化-$した結果は、素片のみで~MUST。 ◎ When serializing a url() with the local url flag set, it must serialize as just the fragment.
“~browserの極端さ” とは? ◎ What “browser eccentricities”?
理論的には,~browserは、文書の基底~URLが変化したとき( `base$e 要素の変異や `pushState()$c の call を通してなど)には、素片のみの~URLも含め,どの相対~URLも解決し直すべきである。 しかしながら,そうするべきでない事例も多い — 素片のみの~URLは、特別に取扱わなければ,いきなり(以前の基底~URLを指す)他の文書への参照になり、それらを利用する箇所の多くを壊すことになるので。 ◎ Theoretically, browsers should re-resolve any relative URLs, including fragment-only URLs, whenever the document’s base URL changes (such as through mutation of the base element, or calling pushState()). In many cases they don’t, however, and so without special handling, fragment-only URLs will suddenly become cross-document references (pointing at the previous base URL) and break in many of the places they’re used.
素片のみの~URLは、[ 現在の文書の~URLが何かに関わらず,現在の文書を基準にする ]ことを,意味論的に明瞭に表すので、この~hackは,少なくともこれらの事例において期待される挙動を保全する。 ◎ Since fragment-only URLs express a clear semantic of wanting to refer to the current document regardless of what its current URL is, this hack preserves the expected behavior at least in these cases.
3.4.2. 空の~URL
`url$f の値が( `url("")^css や `url$f の様に)空~文字列である場合、その~urlは,無効な資源に解決され~MUST( `about:invalid^c のような~urlに対するとき同様に) ◎ If the value of the url() is the empty string (like url("") or url()), the url must resolve to an invalid resource (similar to what the url about:invalid does).
注記: これにより、[ ~web~platformの他所における,埋込みの資源に対する空~urlの挙動 ]に合致することに加え、[ 編集時の誤りなどで `url$f 値が空のままにされたことに因り,~stylesheetや~host文書が再度~要請される ]ような,余計な流通は避けられ、 `url$f がどこに現れようが,資源は ほぼ確実に無効になるであろう。 ~web~platformにおいては,空~urlを~linkにあてがうことも許容されるので、この制約は,[ ~CSSに~hyperlinkを制御する何らかの機能性が加わったとき ]には、その種の文脈~下では緩められ得る。 ◎ Note: This matches the behavior of empty urls for embedded resources elsewhere in the web platform, and avoids excess traffic re-requesting the stylesheet or host document due to editting mistakes leaving the url() value empty, which are almost certain to be invalid resources for whatever the url() shows up in. Linking on the web platform does allow empty urls, so if/when CSS gains some functionality to control hyperlinks, this restriction can be relaxed in those contexts.
3.4.3. ~URL修飾子
`url$f 関数は、~URLの意味や解釈をいくぶん変える `url-modifier@t を追加で指定することも~supportする。 `url-modifier$t は、[ `ident$t または `関数記法$ ]の いずれかである。 ◎ The url() function supports specifying additional <url-modifier>s, which change the meaning or the interpretation of the URL somehow. A <url-modifier> is either an <ident> or a functional notation.
この仕様は、 `url-modifier$t を定義しない — 他の仕様が定義するであろう。 ◎ This specification does not define any <url-modifier>s, but other specs may do so.
注記: 引用符や `url$f で括られていない `url$t には、 `url-modifier$t は受容されない。 ◎ Note: A <url> that is either unquoted or not wrapped in url() notation cannot accept any <url-modifier>s.
4. 数値~data型
~propは、数値を一定~範囲に制約し得る。 許容範囲~外の値を伴う宣言は無効であり,`無視され$~MUST。 ◎ Properties may restrict numeric values to some range. If the value is outside the allowed range, the declaration is invalid and must be ignored.
理論上は、~CSSは,すべての値~型に対し 無限の[ 精度, 範囲 ]を~supportするが、現実の実装では有限になる。 ~UAは,適度に有用な[ 精度, 範囲 ]を~supportするべきである。 ◎ CSS theoretically supports infinite precision and infinite ranges for all value types; however in reality implementations have finite capacity. UAs should support reasonably useful ranges and precisions.
4.1. 整数: `integer^t 型
整数~値は `integer@t で表出される。 ◎ Integer values are denoted by <integer>.
~literalとしての `整数@ は、1 個以上の 10 進~数字( `0^c 〜 `9^c )の並びであり, `number-token$t 生成規則 `CSS3SYN$r の部分集合に対応する。 整数の先頭には,符号を指示する[ `-^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^en )を表現する。 ◎ Number values are denoted by <number>, and represent real numbers, possibly with a fractional component.
~literalとしての `実数@ は、`整数$として, または次の並びとして記される:
- `整数$
- ~dot( `.^c )
- 1 個以上の 10 進~数字
-
省略可能な,次の並びによる指数部†:
- 文字[ `e^c または `E^c ]
- `整数$
`実数$は、 `number-token$t 生成規則 `CSS3SYN$r に対応する。 整数と同様、実数の先頭には,符号を指示する `-^c または `+^c が前置されてもよい††。
【† 指数部は CSS2.1 までは許容されておらず,この仕様による拡張と見られる(例えば, CSS Transform による SVG 関連の~propに対する拡張に適応するための)。 】【 今後,例えば <number> が虚数まで拡張されることは考えにくいので、 “実数” と訳すことにする。 】【†† 指数部の整数の先頭にも。 】
◎ When written literally, a number is either an integer, or zero or more decimal digits followed by a dot (.) followed by one or more decimal digits and optionally an exponent composed of "e" or "E" and an integer. It corresponds to the <number-token> production in the CSS Syntax Module [CSS3SYN]. As with integers, the first character of a number may be immediately preceded by - or + to indicate the number’s sign.値 `zero@t は、値 0 をとる,~literalによる`実数$を表現する。 単に値 0 の `number$t に評価される式(例えば `calc(0)^v )は、 `zero$t には合致しない — 合致するのは~literalによる `number-token$t に限られる。 ◎ The value <zero> represents a literal number with the value 0. Expressions that merely evaluate to a <number> with the value 0 (for example, calc(0)) do not match <zero>; only literal <number-token>s do.
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 ) ]の並びで記される。 `百分率$は、 `percentage-token$t 生成規則 `CSS3SYN$r に対応する。 ◎ 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 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>.
例えば、 `width$p ~propは `length$t, `percentage$t を受容でき、両者とも距離の計測を表現する。 これは、 width: `calc(500px + 50%);^v は許容されることを意味する — 2 つの値は,絶対~長さに変換された上で加算されることになる。 包含塊が `1000px^v 幅ならば、 `width^p に対する `50%^v は, `500px^v と等価になる。 `width^p に対する `calc(50% + 500px)^v は、 `calc(500px + 500px)^v と等価になる結果, `1000px^v と等価になる。 ◎ For example, the width property can accept a <length> or a <percentage>, both representing a measure of distance. This means that width: calc(500px + 50%); is allowed—both values are converted to absolute lengths and added. If the containing block is 1000px wide, then width: 50%; is equivalent to width: 500px, and width: calc(50% + 500px) thus ends up equivalent to width: calc(500px + 500px) or width: 1000px.
一方, `hsl$f 関数の 2 個目, 3 個目の引数を表せるのは、 `percentage$t しかない。 `calc$f 生成規則は,その場所にも許容されるが、その引数の中で組合できるのは百分率どうしに限られる — `calc(10% + 20%)^v のように。 ◎ On the other hand, the second and third arguments of the hsl() function can only be expressed as <percentage>s. Although calc() productions are allowed in their place, they can only combine percentages with themselves, as in calc(10% + 20%).
注記: 仕様は、文法における次元の所の `percentage$t を決して交代させるべきでない — それらの単位が`互換$でない限り。 ◎ Note: Specifications should never alternate <percentage> in place of a dimension in a grammar unless they are compatible.
注記: 将来においては、必要に応じて,他のある次元 `TYPE^t 用の `TYPE-percentage^t 生成規則も追加され得る。 `number-percentage^t が追加されることは決してない — `calc$f 内では `number$t と `percentage$t は組合できないので。 ◎ Note: More <TYPE-percentage> productions can be added in the future as needed. A <number-percentage> will never be added, as <number> and <percentage> can’t be combined in calc().
4.4. 単位を伴う実数: 次元
一般~用語としての `次元@ ( `dimension^en, 計量の次元, 寸法)は、単位~付きの実数であり, `dimension@t で表出される。 ◎ The general term dimension refers to a number with a unit attached to it; and is denoted by <dimension>.
`次元$は、~literalには[ `実数$, `識別子$である単位~識別子 ]の並びで記される。 これは、 `dimension-token$t 生成規則 `CSS3SYN$r に対応する。 ~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. 互換な単位
`算出値$を`直列化-$する `CSSOM$r とき、その中で`互換$な単位を伴う各 値は,それらの`正準的~単位$による値に(ある係数を通して)変換される。 所与の単位どうしが `互換@ であるとは、ある係数( `px$u と `in$u との間の 96:1 の様な静的な係数や, `font-size$p の算出値による `em$u と `px$u との間の係数など )で互いに換算できることを意味する。 `互換$な単位たちが成す各~groupには、その中のある単位が `正準的~単位@ として定義される。 【理論的には、そのような~groupが単独の単位のみからなる(他に互換な単位は無い)こともあり得る — その場合の正準的~単位はその単位~自身になる。】 ◎ When serializing computed values [CSSOM], 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. 距離の単位: `length^t 型
長さは距離の計量を基準にし,~prop定義においては `length@t で表出される。 長さは 何らかの`次元$による量である。 ◎ Lengths refer to distance measurements and are denoted by <length> in the property definitions. A length is a dimension.
長さが 0 のときは、単位~識別子を省略できる(すなわち,構文的には `number$t の `0^v として表現できる)。 ただし, `0^v は、~propにおいて `number$t, `length$t のどちらにも構文解析できる場合( `line-height$p など)には, `number$t として構文解析され~MUST。 ◎ For zero lengths the unit identifier is optional (i.e. can be syntactically represented as the <number> 0). However, if a 0 could be parsed as either a <number> or a <length> in a property (such as line-height), it must parse as a <number>.
~propには、長さを一定~範囲に制約するものもある。 許容範囲~外の値を伴う宣言は無効であり,`無視され$~MUST。 ◎ Properties may restrict the length value to some range. If the value is outside the allowed range, the declaration is invalid and must be ignored.
【 無効にさせたくない場合、`~math関数$で包装する方法がある(数量的な値であれば)。 】
一部の~propには,長さとして負の値も許容されるが、これは整形法を複雑化する可能性があり,実装~特有な制限-があり得る。 実装は、負の長さを~supportしないときは,~support可能な最も近い値に変換し~MUST。 ◎ While some properties allow negative length values, this may complicate the formatting and there may be implementation-specific limits. If a negative length value is allowed but cannot be supported, it must be converted to the nearest value that can be supported.
~UAは、長さを`使用値$として~supportできない所では,`実際の値$において それを近似し~MUST。 ◎ In cases where the used length cannot be supported, user agents must approximate it in the actual value.
長さの単位は、相対と絶対の 2 つに分類される。 ◎ There are two types of length units: relative and absolute.
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:
単位 | 相対基準 |
---|---|
`em$u | 要素の~font~size ◎ font size of the element |
`ex$u | 要素の~fontの ~x-height ◎ x-height of the element’s font |
`cap$u | 要素の~fontの~cap-height(大字の名目上の高さ) ◎ cap height (the nominal height of capital letters) of the element’s font |
`ch$u | 要素の~fontにおける半角~glyphの平均 文字~送幅0 — 文字 “0” ( `0030^U ZERO )~glyphで表現される。 ◎ average character advance of a narrow glyph in the element’s font, as represented by the “0” (ZERO, U+0030) glyph |
`ic$u | 要素の~fontにおける全角~glyphの平均 文字~送幅0 — 文字 “水” ( CJK 表語文字, `6C34^U )~glyphで表現される。 ◎ average character advance of a fullwidth glyph in the element’s font, as represented by the “水” (CJK water ideograph, U+6C34) glyph |
`rem$u | 根~要素の~font~size ◎ font size of the root element |
`lh$u | 要素の行高 ◎ line height of the element |
`rlh$u | 根~要素の行高 ◎ line height of the root element |
`vw$u | 表示域の横幅の 1% ◎ 1% of viewport’s width |
`vh$u | 表示域の縦幅の 1% ◎ 1% of viewport’s height |
`vi$u | 表示域の~size — 根~要素の`行内-軸$方向のそれ — の 1% ◎ vi 1% of viewport’s size in the root element’s inline axis |
`vb$u | 表示域の~size — 根~要素の`塊-軸$方向のそれ — の 1% ◎ vb 1% of viewport’s size in the root element’s block axis |
`vmin$u | 表示域の小さい方の次元の 1% ◎ 1% of viewport’s smaller dimension |
`vmax$u | 表示域の大きい方の次元の 1% ◎ 1% of viewport’s larger dimension |
~prop値の`継承$において,要素が継承するのは、親に指定された相対~値ではなく,親の`算出値$である。 ◎ Child elements do not inherit the relative values as specified for their parent; they inherit the computed values.
5.1.1. ~fontに相対的な長さ単位: `em^u, `ex^u, `cap^u, `ch^u, `ic^u, `rem^u, `lh^u, `rlh^u
`~fontに相対的な長さ@ は、それが利用される要素 — あるいは、 `rem$u, `rlh$u に対しては根~要素 — の~font計量法を基準にする。 ◎ The font-relative lengths refer to the font metrics of the element on which they are used—or, in the case of rem and rlh, the metrics of the root element.
- `em@u 単位
- この単位が利用された要素の `font-size$p ~propの算出値に等しい。 ◎ Equal to the computed value of the font-size property of the element on which it is used.
- 【 `font-size^p 自身に利用された場合にどうなるかは、下に述べられる。以下に挙げる他の単位も同様。 】
-
次の規則: ◎ The rule:
h1 { line-height: 1.2em }
は、 `h1^e 要素の行高が,要素~自身の~font~sizeより 2 割大きくなることを意味する。 一方で: ◎ means that the line height of h1 elements will be 20% greater than the font size of h1 element. On the other hand:
h1 { font-size: 1.2em }
は、 `h1^e 要素の~font~sizeが, `h1^e 要素に継承された~font~sizeの算出値より 2 割大きくなることを意味する。 ◎ means that the font size of h1 elements will be 20% greater than the computed font size inherited by h1 elements.
- `ex@u 単位
- `可用な最初の~font$ `CSS3-FONTS$r に利用されている~x-heightに等しい。 ~x-heightという呼称は、多くの場合,それが小文字 “x” の高さに等しいことに由来する。 しかしながら、文字 “x” を包含しない~fontにも, `ex$u は定義される。 ~fontの~x-heightは、別の仕方で見出すこともできる。 ~fontには、~x-height用の依拠できる計量法が可用なものもある。 可用でない場合、~UAは小文字~glyphの高さから~x-heightを決定してもよい。 アリな経験則として、小文字 "o" の~glyphの下端が基底線の下に突き出ている距離を調べて,その値をその限界~boxの上端から減算して得る方法がある。 ~x-heightを決定するのは不可能, または実用的でない場合、値 0.5em と見做され~MUST。 ◎ Equal to the used x-height of the first available font [CSS3-FONTS]. The x-height is so called because it is often equal to the height of the lowercase "x". However, an ex is defined even for fonts that do not contain an "x". The x-height of a font can be found in different ways. Some fonts contain reliable metrics for the x-height. If reliable font metrics are not available, UAs may determine the x-height from the height of a lowercase glyph. One possible heuristic is to look at how far the glyph for the lowercase "o" extends below the baseline, and subtract that value from the top of its bounding box. In the cases where it is impossible or impractical to determine the x-height, a value of 0.5em must be assumed.
- `cap@u 単位
- `可用な最初の~font$ `CSS3-FONTS$r に利用されている~cap-heightに等しい。 ~cap-heightという呼称は、~Latin大字( `capital letters^en )の高さに近似的に等しいことに由来する。 しかしながら、~Latin大字を包含しない~fontにも, `cap$u は定義される。 ~fontの~cap-heightは、別の仕方で見出すこともできる。 ~fontには、~cap-height用の依拠できる計量法が可用なものもある。 可用でない場合、~UAは大文字~glyphの高さから~cap-heightを決定してもよい。 アリな経験則として、大文字 "O" の~glyphの下端が基底線の下に突き出ている距離を調べて,その値をその限界~boxの上端から減算して得る方法がある。 ~cap-heightを決定するのは不可能, または実用的でない場合、~fontの~ascentが利用され~MUST。 ◎ Equal to the used cap-height of the first available font [CSS3-FONTS]. The cap-height is so called because it is approximately equal to the height of a capital Latin letter. However, a cap is defined even for fonts that do not contain Latin letters. The cap-height of a font can be found in different ways. Some fonts contain reliable metrics for the cap-height. If reliable font metrics are not available, UAs may determine the cap-height from the height of an uppercase glyph. One possible heuristic is to look at how far the glyph for the uppercase “O” extends below the baseline, and subtract that value from the top of its bounding box. In the cases where it is impossible or impractical to determine the cap-height, the font’s ascent must be used.
- `ch@u 単位
- 描画-時に利用される~fontの文字 "0" ( `0030^U ZERO )の~glyphに利用される`送幅$に等しい。 ( `送幅@ とは、要素の行内-軸~方向における~glyphの送幅( `advance measure^en )†である。) ◎ Equal to the used advance measure of the “0” (ZERO, U+0030) glyph in the font used to render it. (The advance measure of a glyph is its advance width or height, whichever is in the inline axis of the element.)
- 【† 後続の~glyphが行を折り返さずに描画されたとするときの,当の~glyph(この場合は "0" )の始端から次の~glyphの始端までの距離。 】
- この計量は,単独の半角( `narrow^en )~glyphの`送幅$の近似であり(等幅~fontでは,正確な計測になる)、期待される~glyph個数に基づく計量を可能にする。 ◎ This measurement is an approximation (and in monospace fonts, an exact measure) of a single narrow glyph’s advance measure, thus allowing measurements based on an expected glyph count.
- ~glyphの送幅は、~font設定群のみならず, `writing-mode$p, `text-orientation$p, 他,~glyphの[ 選定/方位 ]に影響する他の~propにも依存する。 ◎ Note: The advance measure of a glyph depends on writing-mode and text-orientation as well as font settings, text-transform, and any other properties that affect glyph selection or orientation.
- “0” ~glyphの計測は不可能, または実用的でない場合、[ 高さ `1em^v, 幅 `0.5em^v ]と見做され~MUST。 したがって `ch$u 単位は、[ 一般~事例では `0.5em^v / 正立に植字されるとき(すなわち、 `writing-mode$p は[ `vertical-rl$v / `vertical-lr$v ], `text-orientation$p は `upright$v のとき)は `1em^v ]に~fall-backする。 ◎ In the cases where it is impossible or impractical to determine the measure of the “0” glyph, it must be assumed to be 0.5em wide by 1em tall. Thus, the ch unit falls back to 0.5em in the general case, and to 1em when it would be typeset upright (i.e. writing-mode is vertical-rl or vertical-lr and text-orientation is upright).
- `ic@u 単位
- 描画-時に利用される~fontの文字 “水” ( CJK 表語文字, `6C34^U )の~glyphに利用される`送幅$に等しい。 ◎ Equal to the used advance measure of the “水” (CJK water ideograph, U+6C34) glyph found in the font used to render it.
- この計量は,概して正確な計測であり(全角~glyphが均衡幅であるような少数の~fontでは,近似になる)、期待される~glyph個数に基づく計量を可能にする。 ◎ This measurement is a typically an exact measure (in the few fonts with proportional fullwidth glyphs, an approximation) of a single fullwidth glyph’s advance measure, thus allowing measurements based on an expected glyph count.
- 表語文字 送幅を決定するのは不可能, または実用的でない場合、 `1em^v と見做され~MUST。 ◎ In the cases where it is impossible or impractical to determine the ideographic advance measure, it must be assumed to be 1em.
- `rem@u 単位
- 根~要素の `font-size$p の算出値に等しい。 根~要素の `font-size$p ~propに指定された `rem$u 単位は、その~propの`初期値$を基準にする。 ◎ Equal to the computed value of font-size on the root element. When specified on the font-size property of the root element, the rem units refer to the property’s initial value.
- `lh@u 単位
- この単位が利用された要素~上の `line-height$p ~propの算出値に等しい — ここでは、値 `normal^v も,`可用な最初の~font$の計量法を利用して絶対~長さに変換する。 ◎ Equal to the computed value of the line-height property of the element on which it is used, converting normal to an absolute length by using only the metrics of the first available font.
- `rlh@u 単位
- 根~要素~上の `line-height$p ~propの算出値に等しい — ここでは、値 `normal^v も, `lh^u のときと同様に絶対~長さに変換する。 ◎ Equal to the computed value of line-height property on the root element, converting normal to an absolute length as above.
- 注記: 要素の `height$p を `lh$u / `rlh$u 単位を利用して設定しても,実際の行l数~制御が可能化されるわけではない。 これらの単位は、理想上の空~行lの理論的~sizeに基づく長さ計算を可能化するものではない — 実際の行l数は、内容の多寡に応じて異なり得る。 作者は、要素~内の実際の行l数を制限したいなら,代わりに `max-lines$p ~propを利用できる。 ◎ Note: Setting the height of an element using either the lh or the rlh units does not enable authors to control the actual number of lines in that element. These units only enable length calculations based on the theoretical size of an ideal empty line; the size of actual lines boxes may differ based on their content. In cases where an author wants to limit the number of actual lines in an element, the max-lines property can be used instead.
もっと~typographic単位を追加することもできる — `cicero^u, `didot^u, 等々。 それらは単に絶対~単位であり,既存の単位に変換できるが、追加するに価するほど十分に欲されているか(印刷用途も含め)? あるいは、単に Houdini Custom Units を待つべきか? ◎ We can potentially add more typographic units, like cicero, didot, etc. They’re just absolute units, and so can be done with the existing units, but is there enough desire for them (potentially for printing use-cases) that it would be worth adding them? Or should we just wait for Houdini Custom Units?
これらの~fontに相対的な単位は(上では,定義されていない/定義が循環する事例では): ◎ ↓
- 要素の文脈の外側(`媒体~query$など)で利用されたときは、[ `font$p, `line-height$p ]~propの初期値に対応する計量法を基準にする。 ◎ When used outside the context of an element (such as in media queries), these units refer to the metrics corresponding to the initial values of the font and line-height properties.\
- 要素~上の `font-size$p ~propの値に利用されたときは、要素に親が[ 在るならば 親に算出される計量法 / 無いならば[ `font^p, `line-height^p ]~propの初期値に対応して算出される計量法 ]に基づくように解決される。 ◎ When used in the value of the font-size property on the element they refer to, they resolve against the computed metrics of the parent element—or against the computed metrics corresponding to the initial values of the font and line-height properties, if the element has no parent.\
- [ `lh$u / `rlh$u ]単位が,要素~上の `line-height^p ~propの値に利用されたときは、要素に親が[ 在るならば 親の[ `font^p, `line-height^p ]~propに算出される計量法 / 無いならば[[ `font^p, `line-height^p ]~propの初期値に対応して算出される計量法 ]]に基づくように解決される(他の単位については、他と同じく,要素の自前の計量法に基づくように解決される)。 ◎ Additionally, when lh or rlh units are used in the value of the line-height property on the element they refer to, they resolve against the computed line-height and font metrics of the parent element—or the computed metrics corresponding to the initial values of the font and line-height properties, if the element has no parent. (The other font-relative units continue to resolve against the element’s own metrics when used in line-height.)
5.1.2. 表示域~百分率による長さ単位: `vw^u, `vh^u, `vi^u, `vb^u, `vmin^u, `vmax^u
`表示域~百分率による長さ@ は `初期~包含塊$の~sizeに相対的になる。 初期~包含塊の縦幅/横幅が変化すれば,それに応じて拡縮される。 ただし,[ 根~要素の `overflow$p の値が `auto^v ]のときは、~scroll-barは存在しないものと見做される。 初期~包含塊の~sizeは、表示域の~scroll-barの有無に影響される。 ◎ The viewport-percentage lengths are relative to the size of the initial containing block. When the height or width of the initial containing block is changed, they are scaled accordingly. However, when the value of overflow on the root element is auto, any scroll bars are assumed not to exist. Note that the initial containing block’s size is affected by the presence of scrollbars on the viewport.
頁媒体に対する表示域~百分率による長さの正確な定義は `CSS3PAGE$r に委ねられる。 ◎ For paged media, the exact definition of the viewport-percentage lengths is deferred to [CSS3PAGE].
- `vw@u 単位
-
`初期~包含塊$の横幅の 1% に等しい。 ◎ Equal to 1% of the width of the initial containing block.
下の例で,表示域の横幅が 200mm である場合、 `h1^e 要素の~font~sizeは 16mm (すなわち, (8×200mm)÷100 )になる。 ◎ In the example below, if the width of the viewport is 200mm, the font size of h1 elements will be 16mm (i.e. (8×200mm)/100).
h1 { font-size: 8vw }
- `vh@u 単位
- `初期~包含塊$の縦幅の 1% に等しい。 ◎ Equal to 1% of the height of the initial containing block.
- `vi@u 単位
- `初期~包含塊$の~size — 根~要素の`行内-軸$方向のそれ — の 1% に等しい。 ◎ Equal to 1% of the size of the initial containing block in the direction of the root element’s inline axis.
- `vb@u 単位
- `初期~包含塊$の~size — 根~要素の`塊-軸$方向のそれ — の 1% に等しい。 ◎ Equal to 1% of the size of the initial containing block in the direction of the root element’s block axis.
- `vmin@u 単位
- `vw$u と `vh$u の小さい方に等しい。 ◎ Equal to the smaller of vw or vh.
- `vmax@u 単位
- `vw$u と `vh$u の大きい方に等しい。 ◎ Equal to the larger of vw or vh.
根~要素が無い, または まだ~styleがあてがわれていない状況(`媒体~query$を評価するときなど)においては、 `vi$u, `vb$u 単位に対応する軸は, `writing-mode$p ~propの初期値を利用して決定される。 ◎ In situations where there is no root element or it hasn’t yet been styled (such as when evaluating media queries), the vi and vb units use the initial value of the writing-mode property to determine which axis they correspond to.
5.2. 絶対~単位:`cm^u, `mm^u, `Q^u, `in^u, `pt^u, `pc^u, `px^u
`絶対~長さ単位@ は、何らかの物理~計量を`~anchor$にし, 互いが固定的な関係にある単位である。 これは主に、出力~環境が既知である場合に有用になる。 絶対~単位には `物理~単位@ ( `in$u, `cm$u, `mm$u, `pt$u, `pc$u, `Q$u )と `視野角~単位@ — ~pixel単位 ( `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/pixel unit (px):
単位 | 名前 | 他の単位との関係 |
---|---|---|
`cm@u | ~centi~meter( `centimeter^en ) | 1 `cm^u = ( 96 ÷ 2.54 ) `px^u |
`mm@u | ~milli~meter( `millimeter^en ) | 1 `mm^u = ( 1 ÷ 10 ) `cm^u |
`Q@u | 四分~milli~meter( `quarter-millimeter^en ) | 1 `Q^u = ( 1 ÷ 40 ) `cm^u |
`in@u | ~inch( `inch^en ) | 1 `in^u = 2.54 `cm^u = 96 `px^u |
`pc@u | ~pica( `pica^en ) | 1 `pc^u = ( 1 ÷ 6 ) `in^u = 12 `pt^u |
`pt@u | ~point( `point^en ) | 1 `pt^u = ( 1 ÷ 72 ) `in^u |
`px@u | ~pixel( `pixel^en, “~~画素” ) | 1 `px^u = ( 1 ÷ 96 ) `in^u |
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に基づいて描画する機器においては、これらの次元は、次のいずれかを `~anchor@ にする。 ◎ For a CSS device, these dimensions are anchored either
- (1) `物理~単位$と物理~計量との換算-法,または ◎ by relating the physical units to their physical measurements, or
- (2) `基準~pixel$と`~pixel単位$との換算-法 ◎ by relating the pixel unit to the reference pixel.
典型的な視聴距離が想定されている印刷~媒体に対しては、`~anchor単位$は,`物理~単位$(~inch, ~centi~meter, 等々)になるべきである。 ~screen媒体(高~解像度 機器, 低~解像度 機器, 普通でない視聴距離が想定されている機器も含む)に対しては、`~pixel単位$が~anchor単位に推奨される。 この種の機器においては、~pixel単位は,基準~pixelに最適に近似するような 機器~画素の整数倍を基準にすることが推奨される。 ◎ For print media at typical viewing distances, the anchor unit should be one of the physical units (inches, centimeters, etc). For screen media (including high-resolution devices), low-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.
注記: `~anchor単位$が`~pixel単位$である場合、`物理~単位$は,物理的な計量に一致するとは限らない。 一方で,~anchor単位が物理~単位である場合、~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.)
注記: 値は大小無視であり,小文字に直列化される。 例えば `1Q^v は `1q^v に直列化される。 ◎ Note: Values are case-insensitive and serialize as lower case, for example 1Q serializes as 1q.
`基準~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. その他の数量
6.1. 角度の単位: `angle^t 型と `deg^u, `grad^u, `rad^u, `turn^u 単位
角度~値は `dimension$t 型であり、 `angle@t で表出される。 角度~単位~識別子には次のものがある: ◎ Angle values are <dimension>s denoted by <angle>. 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^en )。 円の全周は 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.
注記: 旧来の理由から、 `angle$t の一部の利用においては、 `0deg^v を意味する~~素の `0^v も許容される。 しかしながら、これは一般には成立せず,また、将来における `angle$t 型の利用には生じない。 ◎ Note: For legacy reasons, some uses of <angle> allow a bare 0 to mean 0deg. This is not true in general, however, and will not occur in future uses of the <angle> type.
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.
注記: 値は大小無視であり,小文字に直列化される。 例えば `1Hz^v は `1hz^v に直列化される。 ◎ Note: Values are case-insensitive and serialize as lower case, for example 1Hz serializes as 1hz.
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
- `x@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.
注記: ~CSS `in$u から~CSS `px$u への固定比率 1:96 に因り, `1dppx^v は `96dpi^v に等価になる。 これは、~CSSにて表示される画像の既定の解像度に対応する。 `image-resolution$p ~propを見よ ◎ Note that due to the 1:96 fixed ratio of CSS in to CSS px, 1dppx is equivalent to 96dpi. This corresponds to the default resolution of images displayed in CSS: see image-resolution.
次の `media^at 規則は、 Media Queries `MEDIAQ$r を利用して, 1 ~CSS `px$u 単位に 2 以上の機器~画素を利用する機器に 特別なスタイル規則をあてがう: ◎ The following @media rule uses Media Queries [MEDIAQ] to assign some special style rules to devices that use two or more device pixels per CSS px unit:
@media (min-resolution: 2dppx) { ... }
7. 他所で定義される~data型
他の~moduleにおける一部の~data型は、その~module自身の中で定義されている。 ここでは,多くの仕様に最も共通的に利用されている例を挙げる。 ◎ Some data types are defined in their own modules. This example talks about some of the most common ones used across several specifications.
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 Images Level 3 またはその後継版を~supportする~UAは、その定義に従って `image$t を解釈し~MUST。 そうでない~UAは、 `image$t を `url$t として解釈し~MUST。 ◎ The <image> data type is defined in [CSS3-IMAGES]. UAs that support CSS Images Level 3 or its successor must interpret <image> as defined therein. UAs that do not yet support CSS Images Level 3 must interpret <image> as <url>.
7.3. 二次元の位置: `position^t 型
`position@t 値は、位置決め区画(例:`背景~位置決め区画$)の内側における~obj区画(例:背景~画像)の位置を指定する。 それは、 `background-position$p に指定されるように解釈される。 `CSS3-BACKGROUNDS$r ◎ The <position> value specifies the position of a object area (e.g. background image) inside a positioning area (e.g. background positioning area). It is interpreted as specified for background-position. [CSS3-BACKGROUND]
`position$t = [ [ `left^v | `center^v | `right^v ] || [ `top^v | `center^v | `bottom^v ] | [ `left^v | `center^v | `right^v | `length-percentage$t ] [ `top^v | `center^v | `bottom^v | `length-percentage$t ]? | [ [ `left^v | `right^v ] `length-percentage$t ] && [ [ `top^v | `bottom^v ] `length-percentage$t ] ]
注記: `background-position$p ~propは、成分~値 3 個の構文も受容するが,これは汎用には許容されない — ~prop値~内で他の[ 長さ/百分率 ]成分と組合されたとき,構文解析-時に多義性をもたらすので。 ◎ Note: The background-position property also accepts a three-value syntax. This has been disallowed generically because it creates parsing ambiguities when combined with other length or percentage components in a property value.
直列化するときの正準的~順序は、[ 横~成分, 縦~成分 ]の順とする。 ◎ The canonical order when serializing is the horizontal component followed by the vertical component.
文法~内で他の[ ~keyword / `length$t / `percentage$t ]と並べて指定された `position$t は、貪欲に構文解析され,アリな限り多くの成分を消費する。 ◎ When specified in a grammar alongside other keywords, <length>s, or <percentage>s, <position> is greedily parsed; it consumes as many components as possible.
例えば `transform-origin$p は、(実質的に) `position$t `length$t? として,三次元の位置を定義する。 `left 50px^v などの値は,[ z 成分が省略された成分~値 2 個の `position$t ]として構文解析される一方、 `top 50px^v などの値は,[[ 成分~値 1 個の `position$t ], `length$t ]の並びとして構文解析されることになる。 ◎ For example, transform-origin defines a 3D position as (effectively) ''<position> <length>?''. A value such as left 50px will be parsed as a 2-value <position>, with an omitted z-component; on the other hand, a value such as top 50px will be parsed as a single-value <position> followed by a <length>.
8. 関数記法
`関数記法@ は、[ より複層的な型を表現する, あるいは特別な処理法を呼出せる ]ような,成分~値の型である。 その構文は、[[ 関数の名前, 左~丸括弧 ](すなわち `function-token$t ), 引数の並び, 右~丸括弧 ]の並びである。 [ 左/右の丸括弧 ]と[ 引数の並び ]の合間には`空白$も許容される。 関数は、~CSS~prop値に似た書式で記される引数を,複数個とり得る。 ◎ A functional notation is a type of component value that can represent more complex types or invoke special processing. The syntax starts with the name of the function immediately followed by a left parenthesis (i.e. a <function-token>) followed by the argument(s) to the notation followed by a right parenthesis. White space is allowed, but optional, immediately inside the parentheses. Functions can take multiple arguments, which are formatted similarly to a CSS property value.
`rgba$f などの一部の旧来の関数記法では,余分に~commaを利用しているが、一般には,~commaが利用されるのは[ ~list内の項を区切る, あるいは文法の一片から多義性を排する ]ときに限られる。 引数の区切りに~commaが利用される場合、その前後には省略可能な`空白$も挿入できる。 ◎ Some legacy functional notations, such as rgba(), use commas unnecessarily, but generally commas are only used to separate items in a list, or pieces of a grammar that would be ambiguous otherwise. If a comma is used to separate arguments, white space is optional before and after the comma.
background: url(http://www.example.org/image); color: rgb(100, 200, 50 ); content: counter(list-item) ". "; width: calc(50% - 2em);
8.1. 数式: `calc^f, `min^f, `max^f, `clamp^f
`~math関数@ は、[ 加算( `+^css ), 減算( `-^css ), 乗算( `*^css ), 除算( `/^css ) ]を伴う数学的な式を,成分~値として利用できるようにする — `~math関数$には、次のものがある: ◎ The math functions, calc(), min(), max(), and clamp() allow mathematical expressions with addition (+), subtraction (-), multiplication (*), and division (/) to be used as component values. A\
- `calc@f 関数
- 標準の演算子 優先順位規則による,それが包含する計算式の数学的な結果を表現する。 ◎ represents the result of the mathematical calculation it contains, using standard operator precedence rules; a\
- `min@f 関数
- `max@f 関数
- ~comma区切りの 1 個~以上の計算式を包含し、順に,最も[ 小さい (負側の), 大きい(正側の) ]項を表現する。 ◎ represents the smallest (most negative) or largest (most positive), respectively, comma-separated calculation it contains; a\
- `clamp@f 関数
- { %最小 〜 %最大 } の範囲内に切詰める計算を表現する。 `clamp( 最小v, 値v, 最大v )^v を解決した結果は、 `max( 最小v, min( 値v, 最大v ) ) )^v を解決した結果に正確に一致する。 ◎ represents its central calculation, clamped according to its min and max calculations (given clamp(MIN, VAL, MAX), it is resolved exactly identically to max(MIN, min(VAL, MAX))).
`~math関数$は,[ `length$t / `frequency$t / `angle$t / `time$t / `flex$t / `resolution$t / `percentage$t / `number$t / `integer$t ]型の値が許容される所なら どこでも利用できる。 `~math関数$を成す各 成分がとれる値は、[ ~literal値, 他の`~math関数$, `attr$f 式などの他の式 ]のいずれかであって,妥当な引数~型( `length$t など)に評価されるものである。 ◎ A math function can be used wherever <length>, <frequency>, <angle>, <time>, <flex>, <resolution>, <percentage>, <number>, or <integer> values are allowed. Components of a math function can be literal values, other math functions, or other expressions, such as attr(), that evaluate to a valid argument type (like <length>).
section { float: left; margin: 1em; border: solid 1px; width: calc(100%/3 - 2*1em - 2*1px); }
p { margin: calc(1rem - 2px) calc(1rem - 1px); }
`font-size$p を, `40em^v がちょうど表示域に収まるように設定する例。 ~screenの大きさに関係なく, 常に 概ね同じ量の~textが~screenを埋める: ◎ The following sets the font-size so that exactly 40em fits within the viewport, ensuring that roughly the same amount of text always fills the screen no matter the screen size.
:root { font-size: calc(100vw / 40); }
~designの残りの部分が `rem$u 単位を利用して指定されているなら、全体の~layoutは,表示域の横幅に合わせて拡縮されるようになる。 ◎ If the rest of the design is specified using the rem unit, the entire layout will scale to match the viewport width.
次の例では、 2 つの背景~画像を中央寄せに重ねた上で,一方を他方から少しずらす。 ◎ The following example stacks two centered background images, with one offset slightly from the other.
.foo { background: url(top.png), url(bottom.png); background-repeat: no-repeat; background-position: calc(50% + 20px) calc(50% + 20px), 50% 50%; }
次の例は、~gradientの両端から同じ距離の 2 地点に`色停$を置く: ◎ This example shows how to place color-stops on a gradient an equal distance from either end.
.foo { background-image: linear-gradient( to right, silver, white 50px, white calc(100% - 50px), silver ); }
注記: `clamp$f の最小~値は最大~値に — その 2 つの “順序が間違っている” ときでも — “勝つ” ことに注意(他の部分は、~CSS規約に合致しているとする)。 すなわち、 `clamp(100px, ..., 50px)^v は `100px^v に解決されることになる — “最大” として与えられた `50px^v を超過して。 ◎ Note that clamp(), matching CSS conventions elsewhere, has its minimum value "win" over its maximum value if the two are in the "wrong order". That is, clamp(100px, ..., 50px) will resolve to 100px, exceeding its stated "max" value.
別の解決-法が欲される場合、 `clamp$f と `min$f / `max$f を組合すれば達成できる: ◎ If alternate resolution mechanics are desired they can be achieved by combining clamp() with min() or max():
- 最大v が 最小v に勝つようにするためには: ◎ To have MAX win over MIN:
- `clamp( min( 最小v, 最大v ), 値v, 最大v )^v ◎ clamp(min(MIN, MAX), VAL, MAX).\
- 最大v の計算を繰返すのを避けたいなら、単に `clamp$f に定義した関数の入子法を逆にする~~方法もある ⇒ `min( 最大v, max( 最小v, 値v ) )^v ◎ If you want to avoid repeating the MAX calculation, you can just reverse the nesting of functions that clamp() is defined against—min(MAX, max(MIN, VAL)).
- 順序が間違っているときには、 最大vと最小v を “入替える” ようにするためには: ◎ To have MAX and MIN "swap" when they’re in the wrong order:
- `clamp( min( 最小v, 最大v ), 値v, max( 最小v, 最大v ) )^v ◎ clamp(min(MIN, MAX), VAL, max(MIN, MAX)).\
- あいにく, 最小v, 最大v 項を繰返すことなく これを行う容易な仕方は無い。 ◎ Unfortunately, there’s no easy way to do this without repeating the MIN and MAX terms.
8.1.1. 構文
`~math関数$の構文は、次で与えられる: ◎ The syntax of a math function is:
`calc()$t = calc( `calc-sum$t ) `min()$t = min( `calc-sum$t# ) `max()$t = max( `calc-sum$t# ) `clamp()$t = clamp( `calc-sum$t#{3} ) `calc-sum@t = `calc-product$t [ [ '+' | '-' ] `calc-product$t ]* `calc-product@t = `calc-value$t [ [ '*' | '/' ] `calc-value$t ]* `calc-value@t = `number$t | `dimension$t | `percentage$t | ( `calc-sum$t )
加えて、演算子[ `+^css / `-^css ]の両側には`空白$が要求される(演算子[ `*^css / `/^css ]の両側には要求されない)。 ◎ In addition, whitespace is required on both sides of the + and - operators. (The * and / operaters can be used without white space around them.)
~UAは、`~math関数$式の項~数として,少なくとも 20 個~以上は~supportし~MUST — ここで,各[ `number$t, `dimension$t, `percentage$t ]を 1 項として数えるとする。 包含する項~数が~supportする数を超えるような`~math関数$は、無効であったかのように扱わ~MUST。 ◎ UAs must support math function expressions of at least 20 terms, where each NUMBER, DIMENSION, or PERCENTAGE is a term. If a math function contains more than the supported number of terms, it must be treated as if it were invalid.
8.1.2. 型の検査-法
`~math関数$にアリな型には、 — `length$t, `number$t, 等々 — それが包含する式に依存して,下に定義されるように いくつもある。 それは、その型の値が許容される どこでも利用できる。 ◎ A math function can be many possible types, such as <length>, <number>, etc., depending on the expression it contains, as defined below. It can be used anywhere a value of that type is allowed.
例えば, `width$p ~propは `length$t 値を受容するので、 `length$t に解決される`~math関数$ — `calc(5px + 1em)^v など — は, `width^p に利用できる。 ◎ For example, the width property accepts <length> values, so a math function that resolves to a <length>, such as calc(5px + 1em), can be used in width.
加えて, `number$t に解決される`~math関数$は、 `integer$t のみを受容する どこでも利用できる(それは、最も近い整数に丸められる)。 ◎ Additionally, math functions that resolve to <number> can be used in any place that only accepts <integer>. (It gets rounded to the nearest integer, as specified in §8.1.4 Range Checking.)
演算子をとる下位式からは、その引数に基づいて型が得られる。 ◎ Operators form sub-expressions, which gain types based on their arguments.
注記: この仕様の以前までの~versionでは、[ 乗算/除算 ]がとれる引数は制限されていた — 複層的な中間~結果( `1px * 1em^v の次元は `length$t の 2 乗になるなど)が生産されるのを避けるため / 0 による除算を構文解析-時に検出-可能にするため。 この~versionでは、その制約は緩められる。 ◎ Note: In previous versions of this specification, multiplication and division were limited in what arguments they could take, to avoid producing more complex intermediate results (such as 1px * 1em, which is <length>²) and to make division-by-zero detectable at parse time. This version now relaxes those restrictions.
`~math関数$には、任意の式が許容される — 次の規則に則って,その式が全体として多重次元でない単位に解決される限り: ◎ Math functions allow arbitrary expressions, so long as the expression as a whole resolves to a singular unit according to the following rules:
- [ `+^css / `-^css ]が成す下位式の`型$は、次の結果で与えられる ⇒ `型を加算する$( 左側の引数の`型$, 右側の引数の`型$ ) ◎ At a + or - sub-expression, attempt to add the types of the left and right arguments. If this returns failure, the entire math function is invalid. Otherwise, the sub-expression’s type is the returned type.
- `*^css が成す下位式の`型$は、次の結果で与えられる ⇒ `型を乗算する$( 左側の引数の`型$, 右側の引数の`型$ ) ◎ At a * sub-expression, multiply the types of the left and right arguments. The sub-expression’s type is the returned result.
- `/^css が成す下位式の`型$は、次の結果で与えられる ⇒ `型を乗算する$( 左側の引数の`型$, `型を逆数にする$( 右側の引数の`型$ ) ) ◎ At a / sub-expression, let left type be the result of finding the types of its left argument, and right type be the result of finding the types of its right argument and then inverting it. ◎ The sub-expression’s type is the result of multiplying the left type and right type.
-
他のものは末端~値であり,その`型$は、次の手続きにより決定される:
- %単位 ~LET %値 に応じて ⇒# `percentage$t ならば `percent^l / `number$t ならば `number^l / ~ELSE_( `dimension$t ならば) %値 の単位
- ~IF[ %単位 ~EQ `percent^l ]~AND[ %値 は[ `~math関数$が置かれた文脈において,[ `number$t 以外の別の型の値 ]に相対的に解決される(例えば `width$p における `percentage$t は、ある `length$t に対し解決される) ] ⇒ %単位 ~SET その型の単位
- ~RET `型を作成する$( %単位 )
- `calc$f 式の`型$は、それが包含している式の`型$になる。 ◎ The type of a calc() expression is the type of its contained expression.\
- [ `min$f / `max$f / `clamp$f ]式の`型$は、次の結果で与えられる ⇒ `型を加算する$( それが包含している~comma区切りの各~式からなる~list ) ◎ The type of a min(), max(), or clamp() expression is the result of adding the types of its comma-separated expressions. If the result is failure, the entire math function is invalid.
上の規則のどこかで,`型$を得る演算の結果が `失敗^i になった場合、`~math関数$全体が無効になるとする。 ◎ ↑
`~math関数$は、その`型$が[ `number$t / `length$t / `angle$t / `time$t / `frequency$t / `resolution$t / `flex$t / `percentage$t ]のうち,どの生成規則に合致するかに則って,合致したものが表す型に解決される(この分類は相互排他的である)。 どれにも合致しない場合、`~math関数$は無効になる。 ◎ A math function resolves to <number>, <length>, <angle>, <time>, <frequency>, <resolution>, <flex>, or <percentage> according to which of those productions its type matches. (These categories are mutually exclusive.) If it can’t match any of these, the math function is invalid.
0 による除算もアリであり、ある種の複雑さを導入する。 `~math関数$は、そのような演算に対しては,~IEEE-754意味論に従う: ◎ Division by zero is possible, which introduces certain complications. Math functions follow IEEE-754 semantics for these operations:
- [ 正の値 / 負の値 ]を 0 で除算するときは、[ +∞ / −∞ ]を生産する。 【この 0 が、下に述べる “負の 0” でない限り。】 ◎ Dividing a positive value by zero produces +∞. ◎ Dividing a negative value by zero produces −∞.
- 次に挙げる演算は、後続する規則にて NaN を生産するものと定義されない限り,引数に与える ±∞ と同じ符号の ±∞ を生産する ⇒# 何かと ±∞ を乗算するとき / 何かと ±∞ を加算するとき / ±∞ から何かを減算するとき / 何かから −( ±∞ ) を減算するとき ◎ Adding or subtracting ±∞ to anything produces the appropriate infinity, unless a following rule would define it as producing NaN. ◎ Multiplying any value by ±∞ produces the appropriate infinity, unless a following rule would define it as producing NaN.
- 何かを ±∞ で除算するときは、後続する規則にて NaN を生産するものと定義されない限り, 0 を生産する。 ◎ Dividing any value by ±∞ produces zero, unless a following rule would define it as producing NaN.
- 次に挙げる演算は、 NaN を生産する ⇒# 0 を 0 で除算するとき / ±∞ を ±∞ で除算するとき / 0 と ±∞ を乗算するとき / +∞ と −∞ を加算するとき / ±∞ から同じ符号の ±∞ を減算するとき ◎ Dividing zero by zero, dividing ±∞ by ±∞, multiplying 0 by ±∞, adding +∞ to −∞ (or the equivalent subtractions) produces NaN.
- どの演算も、ある引数が NaN ならば NaN を生産する。 ◎ Any operation with at least one NaN argument produces NaN.
加えて,~IEEE-754は、 “負の 0” の概念を導入する — それも、[ 計算の中/入子にされた計算の間 ]で追跡され~MUST: ◎ Additionally, IEEE-754 introduces the concept of "negative zero", which must be tracked within a calculation and between nested calculations:
- 以下では、[ 負の 0 は ~0N / 他の 0( “正の 0” )は ~0P ]と記され, 0 はそれらの総称を表す。 ◎ ↓
-
次に挙げる~literalは、 ~0N を生産する ⇒# `-0^v (反数にされた ~0P ) / 0 を生産する[ 乗算/除算 ]のうち,片方の引数だけ負であるもの(例: `-5 * 0^v / `1 / (-1 / 0)^v ) ◎ Negative zero (0-) can be produced literally by negating a zero (-0), or by a multiplication or division that produces zero with exactly one negative argument (such as -5 * 0 or 1 / (-1 / 0)).
注記: `~math関数$の外側にある `-0^v は,単に `0^v に一致する “標準の” 0 を生産することに注意 — ~CSSは、~math関数の外側では,有符号 0 の概念を認識しない。 負の 0 は、~math関数から外へ~~漏れることはなく, “無符号” 0 に “~~同化される” (下に詳細を与える)。 ◎ Note: Note that, outside of math functions, -0 just produces a "standard" zero, identical to 0—CSS as a whole doesn’t recognize the concept of signed zeros. Negative zeros also don’t escape a math function; as detailed below, they’re "censored" away into an "unsigned" zero.
-
次に挙げる演算は、 ~0N を生産する ⇒# ~0N と ~0N を加算するとき / ~0N から ~0P を減算するとき
0 を生産するような他のすべての加算/減算は、 ~0P を生産する。
◎ -0 + -0 or -0 - 0 produces 0-. All other additions or subtractions that would produce a zero produce 0+. -
次に挙げる演算は、 ~0N を生産する ⇒# ~0N と ~0P を乗算するとき / ~0N と正の値を乗算するとき / ~0N を正の値で除算するとき
次に挙げる演算は、 ~0P を生産する ⇒# ~0N と ~0N を乗算するとき / ~0N と負の値を乗算するとき / ~0N を負の値で除算するとき
[ 正の値 / 負の値 ]を ~0N で除算するときは、[ −∞ / +∞ ]を生産する。
(言い換えれば、 ~0N を引数にとる[ 乗算/除算 ]は,標準の符号~規則に従う。)
◎ Multiplying or dividing 0- with a positive number (including 0+) produces a negative result (either 0- or −∞), while multiplying or dividing 0- with a negative number produces a positive result. (In other words, multiplying or dividing with 0- follows standard sign rules.) - ~0P と ~0N を比較するときは、 ~0N ~LT ~0P になるとする。 例えば,[ `min(0, -0)^v / `max(0, -0)^v / `clamp(0, -0, 1)^v ]は、[ ~0N / ~0P / ~0P ]を生産し~MUST。 ◎ When comparing 0+ and 0-, 0- is less than 0+. For example, min(0, -0) must produce 0-, max(0, -0) must produce 0+, and clamp(0, -0, 1) must produce 0+.
別の`~math関数$の内側に入子にされてない`~math関数$は、 `~top-levelの計算@ と総称される。 `~top-levelの計算$は ⇒# NaN を生産することになる場合は、代わりに +∞ を生産する / ~0N を生産することになる場合は、代わりに標準の “無符号” 0 を生産する ◎ If a top-level calculation (a math function not nested inside of another math function) would produce a NaN, it instead produces +∞. If a top-level calculation would produce 0-, it instead produces the standard "unsigned" zero.
例えば, `calc(-5 * 0)^v は、 ~0N に解決されるが,`~top-levelの計算$としては 無符号 0 に~~同化される。 ◎ For example, calc(-5 * 0) produces an unsigned zero—the calculation resolves to 0-, but as it’s a top-level calculation, it’s then censored to an unsigned zero.
他方, `calc(1 / calc(-5 * 0))^v は、 `calc(1 / (-5 * 0))^v と同じく, −∞ を生産する。 ~~内側の `calc^f は、`~top-levelの計算$ではないので, ~0N に解決される。 その結果は,そのまま~top-levelの `calc^f に渡され、 −∞ を生産することになる — ~~仮に,そのままではなく無符号 0 に~~同化された場合、 +∞ を生産することになる。 ◎ On the other hand, calc(1 / calc(-5 * 0)) produces −∞, same as calc(1 / (-5 * 0))—the inner calc resolves to 0-, and as it’s not a top-level calculation, it passes it up unchanged to the outer calc to produce −∞. If it was censored into an unsigned zero, it would instead produce +∞.
注記: `~math関数$やそれが解決される型の妥当性は、代数的な単純~化により影響されることはない。 例えば, `calc(5px - 5px + 10s)^v や `calc(0 * 5px + 10s)^v は、いずれも長さと時間を加算しようと試みるので,不正である。 ◎ Note: Algebraic simplifications do not affect the validity of a math function or its resolved type. For example, calc(5px - 5px + 10s) and calc(0 * 5px + 10s) are both invalid due to the attempt to add a length and a time.
注記: `number$t に相対的な `percentage$t — `opacity$p におけるそれなど — は、 `number$t と組合できないことに注意。 これを許容すると,( `dimension$t の乗算や除算を許容するための) “単位~代数” に有意な問題をもたらすので。 どの事例においても,それが新たな機能性を供することはない(例えば `opacity^p: `25%^v は, `opacity^p: `.25^v に一致する — それは自明な構文~変形-に過ぎない)。 それでも、他の演算は遂行できる — 例えば `opacity^p: `calc(100% / 3)^v; は妥当になる。 ◎ Note: Note that <percentage>s relative to <number>s, such as in opacity, are not combinable with those numbers—opacity: calc(.25 + 25%) is invalid. Allowing this cause significant problems with "unit algebra" (allowing multiplication/division of <dimension>s), and in every case so far, doesn’t provide any new functionality. (For example, opacity: 25% is identical to opacity: .25; it’s just a trivial syntax transform.) You can still perform other operations with them, such as opacity: calc(100% / 3);, which is valid.
注記: `number-token$t は,常に `number$t, `integer$t のいずれかに解釈されるので、 `~math関数$内では `length$t を意図する単位なしの `0^v は~supportされない。 すなわち、 width: `0^v; や width: `5px^v; は妥当であっても, width: `calc(0 + 5px)^v; は妥当でない — `number$t と `length$t を~~加算しようと~~試みるので。 ◎ Note: Because <number-token>s are always interpreted as <number>s or <integer>s, "unitless 0" <length>s aren’t supported in math functions. That is, width: calc(0 + 5px); is invalid, because it’s trying to add a <number> to a <length>, even though both width: 0; and width: 5px; are valid.
注記: ~~素の `number$t が使用値の時点で `length$t になるような~propも少数あるが(特定的には `line-height$p / `tab-size$p )、 `number$t は, `calc$f 内では決して “長さの様なもの” にはならず、常に `number$t であり続ける。 ◎ Note: Altho there are a few properties in which a bare <number> becomes a <length> at used-value time (specifically, line-height and tab-size), <number>s never become "length-like" in calc(). They always stay as <number>s.
8.1.3. 算出値
`calc$f 関数の算出値は、すべての成分が算出された式になる。 [ `min$f / `max$f / `clamp$f ]関数の算出値は、各~式の成分~すべてが算出された ~comma区切りの式たちになる。 ◎ The computed value of a calc() function is the expression with all components computed. The computed value of a min(), max(), or clamp() function is the comma-separated list of expressions, with each expression having all its component computed.
算出値の時点で解決されない百分率は、`~math関数$の中でも解決されない。 例えば,式 `calc(100% - 100% + 1em)^v は、 `1em^v ではなく, `calc(1em + 0%)^v に解決される。 百分率から算出値を得るための特別な規則がある場合(例えば `height$p ~prop)、その規則が`~math関数$に含まれるどの百分率にも適用される。 ◎ Where percentages are not resolved at computed-value time, they are not resolved in math functions, e.g. calc(100% - 100% + 1em) resolves to calc(1em + 0%), not to 1em. If there are special rules for computing percentages in a value (e.g. the height property), they apply whenever a math function contains percentages.
注記: 直列化の規則は,算出の構造は保全しないので、実装は,値を内部的に格納するときには、式を,ここに要求される以上に単純~化できる — 特に,すべての`~math関数$は、単位が一致する項どうしの乗算/除算は消去して,[ `number$t, `percentage$t, いくつかの `dimension$t ]の和に簡約できる。 ◎ Note: The serialization rules do not preserve the structure of the computation, so implementations can simplify the expressions further than what is required here when storing the values internally; in particular, all math function expressions can be reduced to a sum of a <number>, a <percentage>, and some <dimension>s, eliminating all multiplication or division, and combining terms with identical units.
この時点で[ すべての単位は,算出値の時点で型ごとに単独の単位に絶対化できる ]ので、`~math関数$は,式ごとに[ `number$t, `percentage$t, [ 適切な型の,単独の絶対 `dimension$t ]]の和に簡約できる。 ◎ At this time, all units can be absolutized to a single unit per type at computed-value time, so at that point the math function can be reduced to just a <number>, a <percentage>, and a single absolute <dimension> of the appropriate type, per expression.
例えば, `background-position$p における百分率~値は、長さ値とは異なり,特別に挙動する: ◎ For example, background-position has special behavior for percentage values, different from lengths:
.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 */ }
このため, `background-position$p における `calc$f の中の百分率は、[ `background-position$p: `left calc(50% + 20px) center^v; の様な式に対し — 背景の 左辺 が中央から `20px^v の所に~~位置するのではなく — 適正に,背景が中央に寄せられてから, 右方へ `20px^v ずらされる ]ようにするため、長さには直に解決されないまま,保全される。 ◎ Due to this, background-position preserves the percentage in a calc() rather than resolving it directly into a length, so that an expression like background-position: left calc(50% + 20px) center properly centers the background and then shifts it 20px to the right, rather than placing its left edge 20px off of center.
~tableを成す[ ~cellその他の要素 ]の~size計算は複層的なので、~tableの[ ~col, ~col~group, ~row, ~row~group, ~cell ]の~sizeに対する[ 長さと百分率が混在する式 ]については、~table~layoutが自動( `auto^v )か固定( `fixed^v )かに関わらず, `~autoS$v が指定されていたかのように扱ってもよい。 ◎ Given the complexities of width and height calculations on table cells and table elements, math expressions mixing both percentages and lengths for widths and heights on table columns, table column groups, table rows, table row groups, and table cells in both auto and fixed layout tables MAY be treated as if auto had been specified.
8.1.4. 範囲の検査-法
構文解析-時には、`~math関数$の中の値に対しては,範囲は検査されないので、値が範囲~外であっても宣言は無効にならない。 しかしながら、式による結果の値は,当の文脈に許容される範囲に切詰められ~MUST。 この切詰めは、`算出値$に対しては,アリな所すべてで遂行され、`使用値$に対しても — 算出において範囲を検査するに足るまで式を単純~化できなかった場合には — 遂行される。 (`指定値$に対しては、切詰めは遂行されない。) ◎ Parse-time range-checking of values is not performed within math functions, and therefore out-of-range values do not cause the declaration to become invalid. However, the value resulting from an expression must be clamped to the range allowed in the target context. Clamping is performed on computed values to the extent possible, and also on used values if computation was unable to sufficiently simplify the expression to allow range-checking. (Clamping is not performed on specified values.)
注記: したがって、`~math関数$を受容するすべての文脈において,許容される値の範囲は(開区間ではなく)閉区間として定義することが要求される。 ◎ Note: This requires all contexts accepting calc() to define their allowable values as a closed (not open) interval.
注記: ±∞ は、[ どの~propに対しても、定義により,許容される範囲の外側にある ]ので,許容される[ 最小/最大 ]値に切詰められることになる。 `animation-iteration-count$p など,~keyword値として明示的に `infinite^v を許容する~propであっても、 `~math関数$は,~prop構文の数量的な部分の[ 最小/最大 ]値に切詰められ,~keyword値には解決され得ない。 ◎ Note: By definition, ±∞ are outside the allowed range for any property, and will clamp to the minimum/maximum value allowed. Even for properties that explicitly allow infinity as a keyword value, such as animation-iteration-count, will end up clamping ±∞, as math functions can’t resolve to keyword values; the numeric part of the property’s syntax still has a minimum/maximum value.
加えて, `number$t に解決される`~math関数$が `integer$t のみを受容する所に利用された場合、その[ `算出値$/ `使用値$ ]は,上の切詰めと同じ方式で最も近い整数に丸められる。 丸めるための手法は、整数~値の~animationに利用されるそれと同じで~MUST。 ◎ Additionally, if a math function that resolves to <number> is used somewhere that only accepts <integer>, the computed value and used value are rounded to the nearest integer, in the same manner as clamping, above. The rounding method must be the same as is used for animations of integer values.
`0px^v より小さい横幅は許容されないので、次の 3 つは `width$p: `0px^v; に等価になる: ◎ Since widths smaller than 0px are not allowed, these three declarations are equivalent:
width: calc(5px - 10px); width: calc(-5px); width: 0px;
しかしながら、 `width$p: `-5px^v; と `width$p: `calc(-5px)^v; は等価ではないことに注意。 `calc$f の外側にある範囲~外の値は,構文的に無効であり、宣言はまるごと落とされることになる。 ◎ Note however that width: -5px is not equivalent to width: calc(-5px)! Out-of-range values outside calc() are syntactically invalid, and cause the entire declaration to be dropped.
8.1.5. 直列化
この節は、依然として討議中にある。 ◎ This section is still under discussion.
`calc$f 関数 %関数 を直列化する ときは: ◎ To serialize a calc() value
- %式 ~LET `式を単純~化する$( %関数 の引数 ) の結果 ◎ Simplify the expression inside of it.
-
~IF[ 直列化されている値は、`算出値$の時点 以降の値である ]~AND[ %式 は単独の値 %値 ( `number$t / `dimension$t / `percentage$t )のみからなる ]:
- ~IF[ %値 は当の文脈に許容される範囲の外側にある ] ⇒ %値 ~SET %値 を許容される最も近い値に切詰めた結果
- ~RET %値 を直列化した結果
- ~RET 次を順に連結した結果 ⇒# `calc(^l, `総和を直列化する$( %式 ) の結果, `)^l ◎ Otherwise, serialize the summation, prefix the result with "calc(" and suffix it with ")", then return it.
`min$f / `max$f 関数 %関数 を直列化する ときは: ◎ To serialize a min() or max() value:
- %式~list ~LET %関数 の引数を成す~comma区切りの各 %式 に対し,次で与えられる値からなる~list ⇒ `総和を直列化する$( `式を単純~化する$( %式 ) ) ◎ For each comma-separated expression inside of it, simplify the expression.
- %式~list ~SET %式~list を成す式たちを `, ^l で区切って順に連結した結果 ◎ ↓
- ~RET 次を順に連結した結果 ⇒# %関数 の名前( `min^l または `max^l ), `(^l, %式~list, `)^l ◎ Let s initially be "min(" or "max(", as appropriate. ◎ Serialize each summation, then join them into a single string, with ", " between each term. Append the result to s. ◎ Append ")" to s, then return it.
`式を単純~化する@ ときは、所与の %式 に対し: ◎ To simplify an expression:
- %式 を成す各 `calc$f 値を[ その引数を丸括弧で括ったもの ]に置換する ◎ Replace any calc() values with parentheses containing their contents.
- %式 内の すべての 乗算と除算を解決する ◎ Resolve all multiplications and divisions.
- %式 内の各[ 【同じ計算式の中の】単位が一致するものたち ]は一つに結合する ◎ Combine identical units.
-
%式 内の各 `min$f / `max$f 関数の中でも,この手続きを再帰的に行う
【 この段は不要? あるいは、 `min(1, 2)^css は `1^v に単純~化するなども含まれる? 】
◎ Recurse into min() or max() values. - ~RET %式 ◎ Return the result.
注記: 値の算出~処理により、異種の単位は一致するように変形され得る。 例えば `em$u と `px$u は,指定値の時点では はっきり異なるが、算出値の時点では,いずれも `px$u 単位に絶対化される。 ◎ Note: The value-computation process can transform disparate units into identical ones. For example, em and px are obviously different at specified-value time, but at computed-value time they’re both absolutized to px.
結果は、[ 一意な単位/ `~math関数$ ]による値たちの総和になら~MUST。 (この総和においては、値 0 の項も保全され~MUST。) ◎ The result must be a summation of unique units and/or math functions. (Terms with a value of zero must be preserved in this summation.)
`総和を直列化する@ ときは、所与の %式 に対し: ◎ To serialize a summation:
-
%式 を成す項たちを次の順序になるように整列する: ◎ Sort the terms in the following order:
- `実数$ ◎ The number, if present
- `百分率$ ◎ The percentage, if present
- `次元$ — `~ASCII大小無視$による,単位の~alphabet順に ◎ The dimensions, ordered by their units ASCII case-insensitive alphabetically
- `min$f / `max$f 関数 — %式 内に現れる順に ◎ The min() and max() functions, in the order they appeared in the original expression.
- ~RET %式 のすべての項を直列化した上で,各 項を ` + ^l で区切って連結した結果の文字列 ◎ Serialize all the terms, then join them into a single string, with " + " between each term. Return the result.
例えば, `calc(20px + 30px)^v は、指定値としては `calc(50px)^v に,算出値としては `50px^v に直列化する。 ◎ For example, calc(20px + 30px) would serialize as calc(50px) as a specified value, or as 50px as a computed value.
`calc(20px + 0%)^v の様な値は、 `calc(20px + 0%)^v として直列化し,いずれの項も 直列化された値の中に保守する。 ( 0 値の項を保守することは重要である — いずれかの値が一時的に 0 値になっても,遷移の最中に突然 `calc$f の “形が変わる” ことがないように。 また、すべての項が 0 であるときに “単位を選ぶ” 必要もなくなる。) ◎ A value like calc(20px + 0%) would serialize as calc(20px + 0%), maintaining both terms in the serialized value. (It’s important to maintain zero-valued terms, so the calc() doesn’t suddenly "change shape" in the middle of a transition when one of the values happens to have a zero value temporarily. This also removes the need to "pick a unit" when all the terms are zero.)
`calc(20px + 2em)^v の様な値は、指定値としては `calc(2em + 20px)^v に直列化する(両 単位とも、指定値の時点では互換でないので,~alphabet順に整列した上で保守する)。 また、算出値としては `52px^v の様な値に直列化する( `em$u 値は,算出値の時点で絶対~長さに変換されるので、 `1em^v = `16px^v であったなら、それらは `52px^v に結合した上で,括っている `calc$f を外す) ◎ A value like calc(20px + 2em) would serialize as calc(2em + 20px) as a specified value (maintaining both units as they’re incompatible at specified-value time, but sorting them alphabetically), or as something like 52px as a computed value (em values are converted to absolute lengths at computed-value time, so assuming 1em = 16px, they combine into 52px, which then drops the calc() wrapper.)
直列化についての更なる情報は、 `CSSOM$r を見よ。 ◎ See [CSSOM] for further information on serialization.
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^e 要素を一般の場所では斜字体にしつつ、斜字体の内側では通常体に戻す: ◎ The following example makes <em> elements italic in general, but makes them normal if they’re inside something that’s italic:
em { font-style: toggle(italic, normal); }
次の例は、入子にされた~listの~markerを順繰りに循環させる。 ~top-levelの~listの~markerは `disc$v 形状にされ、その中に入子にされた~listの~markerは,階層が深まる度に順に `circle$v, `square$v, `box^v にされ, ( 5 階層の深さで)また `disc$v から始まるようになる。 ◎ The following example cycles markers for nested lists, so that a top level list has disc-shaped markers, but nested lists use circle, then square, then box, and then repeat through the list of marker shapes, starting again (for the 5th list deep) with disc.
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.
次の `toggle$f 式の例は、どれも無効になる: ◎ The following toggle() examples are all 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 個目の引数に対し得られた値を Cn とする。 次に、各 Cn を~propの`継承値$ と比較する。 `toggle$f の算出値は、[ Cn が`継承値$に合致するような~~最小の n ]に対する Cn+1 になる。 n が最後の引数に対応する場合, あるいは合致する n が無い場合の算出値は、最初の引数で表現される算出値 C1 になる。 ◎ 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 received had each of the original toggle() arguments been the sole value of the shorthand.
例えば、次の略式~propによる宣言は: ◎ For example, the following shorthand declaration:
margin: toggle(1px 2px, 4px, 1px 5px 3px);
次の下位propによる宣言に等価になる: ◎ is equivalent to the following longhand declarations:
margin-top: toggle(1px, 4px, 1px); margin-right: toggle(2px, 4px, 5px); margin-bottom: toggle(1px, 4px, 3px); margin-left: toggle(2px, 4px, 5px);
top / bottom ~marginには `1px^v が 2 度現れているので, 2 個の値のみを行き来する一方、 left / right ~marginでは 3 個の値が順繰りに利用されることになる。 言い換えれば、上の宣言の算出値は,次の下位propによる宣言と同じになる: ◎ Note that, since 1px appears twice in the top and bottom margins, they will cycle between only two values while the left and right margins cycle through three. In other words, the declarations above will yield the same computed values as the longhand declarations below:
margin-top: toggle(1px, 3px); margin-right: toggle(2px, 4px, 5px); margin-bottom: toggle(1px, 3px); margin-left: toggle(2px, 4px, 5px);
その結果は意図されるものではないであろう。 ◎ which may not be what was intended.
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 ]? )
ここで: ◎ where\
- `attr-name@t
- この引数は、`~CSS有修飾名$( `CSS3NAMESPACE$r の `qname$t 生成規則)をとり,属性の名前を表現する(名前空間が不在ならば、単に~CSS識別子になる)。 ◎ <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.)\
- `属性~選択子$と同様に、この値が~ASCII大小無視になるかどうかは,文書~言語に依存する。 ◎ As with attribute selectors, the case-sensitivity of <attr-name> depends on the document language.
- `type-or-unit@t
- 省略可能なこの引数は、属性~値を解釈する仕方を~UAに伝える。 それは、後述の~keyword値のいずれかをとり,この `attr$f 式の型を定義する。 ◎ 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.\
- 省略された場合、暗黙に `string^v とみなされる。 ◎ If omitted, string is implied.
- `attr-fallback@t
-
省略可能なこの引数は、次のいずれかの場合に利用される,~fallback値を表現する: ◎ 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\
- 属性の値は、当の~prop値として[ 無効である, または 範囲~外にある ] ◎ is invalid/out-of-range for the property.\
-
省略された場合、暗黙に,与えられた型( `type-or-unit$t )用に定義される既定~値(後述)とみなされる。 ◎ 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 式 %~attr式 は、次のすべてが満たされる場合に限り妥当になる: ◎ The attr() expression is only valid if:
- %~attr式 の型は、 %~attr式 が置かれた場所で妥当である。 ◎ 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 %fallback が含まれている場合、次のすべてが満たされる: ◎ ↓
- %fallback は、 %~attr式 が置かれた場所で妥当である。 ◎ the <attr-fallback> is valid where the attr() expression is placed,
- %fallback は、別の `attr$f 式を包含していない。 ◎ the <attr-fallback> does not contain another attr() expression,
-
%~attr式 は ~prop値を成す唯一の成分である,または %fallback は %~attr式 の型に合致している。 ◎ and, if the attr() expression is not the sole component value of a property, the <attr-fallback> matches the attr()’s type
注記: `attr$f 式 %~attr式 が,~prop値~全体を成す場合、既定~値を与える %fallback は与えられた型になる必要はない。 例えば,作者が要する属性の型が `px$u である場合の既定として、 `auto^v も依然として可能である。 `width$p: `attr(size px, auto)^v; の様に。 ◎ Note that the default value need not be of the type given, if the attr() expression is the entire property value. For instance, if the type required of the attribute by the author is px, the default could still be auto, like in width: attr(size px, auto);.
一方で、 %~attr式 が他の値と併用されて,全部的な~prop値を形成している場合の %fallback は、 %~attr式 の型に合致し~MUST。 例えば, `box-shadow$p: `attr(size px, inset) 5px 10px blue^v; は、 %~attr式 が[ `px$u による長さ, または `inset$v ~keyword ]のどちらで代用されても,妥当な宣言になるが、それでも無効になる。 ◎ If the attr() is used alongside other values to form the full property value, however, then the default value must match the attr()'s type. For example, box-shadow: attr(size px, inset) 5px 10px blue; is invalid, even though it would create a valid declaration if you substituted the attr() expression with either a px length or the inset keyword.
要素が指定された属性を有する場合、(以下の~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^l の属性は、(~escapeが評価されたときの)文字列 `Q^l ではなく, 3 個の文字を包含する文字列を生産することになる。 ◎ 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-token$t または `ident-token$t ]として構文解析された上で,成功裡に `color$t として解釈され~MUST。 ◎ The attribute value must parse as a <hash-token> or <ident-token>, and be successfully interpreted as a <color>.\
- 既定~値は `currentcolor$v とする。 ◎ The default is currentcolor.
- `url^v
- 属性~値は、~CSS `string$t 内容として, `url$f 記法の中の引用符で括られた文字列として解釈される。 ◎ The attribute value is taken as the contents of a CSS <string>. It is interpreted as a quoted string within the url() notation.\
- 既定~値は `about:invalid^v とする(付録 A にて定義される)。 これは,汎用~error状態を伴う 存在しない文書を指す~URLである。 ◎ 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.\
- 相対~URLは、文書~言語により[ ~URLが出自にしている要素 ]に適用される規則に則って,絶対~URLにされ~MUST。 それは~stylesheetに相対的ではない。 ◎ 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-token$t として構文解析された上で, `integer$t として成功裡に解釈され~MUST。 ◎ The attribute value must parse as a <number-token>, and be successfully interpreted as an <integer>.\
- 既定~値は `0^v とするが、それが当の~propに妥当でない場合は その~propがとり得る最小~値とする。 当の~propの値が一定の範囲の整数のみを受容するものであって, 属性~値が範囲~外にある場合も、既定~値が利用され~MUST。 ◎ 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-token$t として構文解析された上で, `number$t として解釈され~MUST。 ◎ The attribute value must parse as a <number-token>, and is interpreted as an <number>.\
- 既定~値は `0^v とするが、それが当の~propに妥当でない場合は その~propがとり得る最小~値とする。 当の~propの値が一定の範囲の実数†のみを受容するものであって, 属性~値が範囲~外にある場合も、既定~値が利用され~MUST。 【†原文 “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.
- `length^v
- `angle^v
- `time^v
- `frequency^v
- 属性~値は、 `dimension-token$t として構文解析された上で,指定された単位による`次元$の値として成功裡に解釈され~MUST。 ◎ The attribute value must parse as a <dimension-token>, and be successfully interpreted as the specified type.\
- 既定~値は 対応する単位を伴う `0^v とするが、それが当の~propに妥当でない場合は ~propに定義される最小~値とする。 当の~propが一定の範囲の値を受容するものであって(例えば,正の長さ, 0 〜 90 度の角度など), 属性~値が範囲~外にある場合も、既定~値が利用され~MUST。 ◎ 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).\
- 単位が相対~長さの場合、絶対~長さに算出され~MUST。 ◎ 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-token$t として構文解析された上で,指定された単位による`次元$の値として解釈され~MUST。 ◎ The attribute value must parse as a <number-token>, and is interpreted as a dimension with the specified unit.\
- 既定~値は 対応する単位を伴う `0^v とするが、それが当の~propに対し妥当でない場合は その~propに定義される最小~値とする。 当の~propが一定の範囲の値を受容するものであって(例えば,正の長さ, 0 〜 90 度の角度など), 属性~値が範囲~外にある場合も、既定~値が利用され~MUST。 ◎ 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).\
- 単位が相対~長さの場合、絶対~長さに算出され~MUST。 ◎ If the unit is a relative length, it must be computed to an absolute length.
XML ~file内の~dataを可視化するために `attr$f を利用する例: ◎ This example shows the use of attr() to visually illustrate data in an XML file:
<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); }
次の例はすべて無効になり,構文解析-時に~errorを生じさせることになる。 その結果,関連する宣言は — この場合はすべてが — 無視される: ◎ All of the following examples are invalid and would cause a parse-time error, and thus cause the relevant declaration—in this case all of them—to be ignored:
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.
付録 A. IANA 考慮点
A.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.
登録された~token | `invalid^c |
---|---|
意図されている用途 | `about:invalid^c ~URLは、汎用~error状態を伴う,存在しない文書を参照する。 ~URLが必要な所で,既定~値がいかなる種類の文書にも解決されるべきでないようなときに、利用できる。 ◎ The about:invalid URL references a non-existent document with a generic error condition. It can be used when a URL is necessary, but the default value shouldn’t be resolveable as any type of document. |
連絡先/変更管理者 | CSS WG <www-style@w3.org> (on behalf of W3C) |
仕様 | CSS Values and Units Module Level 3 |
謝辞
はじめに、この~moduleの 以前の~level に協力されたすべての方々に感謝する。 ◎ Firstly, the editors would like to thank all of the contributors to the previous level of this module.
次に、~commentと示唆を寄せられ,この Level 4 を向上させた Koji Ishii, Xidorn Quan 両氏に。 ◎ Secondly, we would like to acknowledge Koji Ishii and Xidorn Quan for their comments and suggestions, which have improved Level 4.
変更点
Level 3 からの変更点は: ◎ Changes since Level 3:
- `vi$u, `vb$u, `ic$u, `cap$u, `lh$u, `rlh$u 単位を追加した。 ◎ Added the vi, vb, ic, cap, lh and rlh units.
~securityと~privacyに関する考慮点
この仕様は,ほぼ各種~CSS仕様に共通する単位を定義するだけであり、~security上の懸念になるものはない。 ◎ This specification mostly just defines units that are common to CSS specifications, and which present no security concerns.
注記: ~URLの取扱いは~security上の懸念になるか? おそらく。 ◎ Note: Does URL handling have a security concern? Probably.
この仕様は、利用者の~screen~size, および 既定の~font~sizeを公開する単位を定義するが、両者とも JS から自明に観測できるので、新たな~privacy~riskにはならない。 ◎ This specification defines units that expose the user’s screen size and default font size, but both are trivially observable from JS, so they do not constitutate a new privacy risk.