CSS値と単位モジュール レベル3

1. はじめに

各CSSプロパティの値定義欄には、キーワード、 データ型（< と > の間に表示される）、 そしてそれらの組み合わせ方法に関する情報を含めることができます。 多くのプロパティで利用できる汎用データ型（最も広く使われているのは <length>）については本仕様書で説明されており、 より特定のデータ型（例：<spacing-limit>）は該当するモジュールで説明されています。

1.1. モジュールの相互作用

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

2. 値定義構文

ここで説明する 値定義構文 は、 CSSプロパティの有効な値の集合（およびCSSの多くの他の部分の有効な構文）を定義するために使用されます。 このように記述された値は、1つ以上のコンポーネントを持つことができます。

2.1. コンポーネント値型

コンポーネント値型は、いくつかの方法で指定されます：

1. キーワード値（auto、disc など）、 これはクォート無しでそのまま現れます（例：auto）。

2. 基本データ型は、 < と > の間に現れます（例：<length>、<percentage> など）。 数値データ型の場合、 この型記法は、下記の角括弧による範囲記法で範囲制限を注釈できます。

3. プロパティ値範囲は、 同名のプロパティが持つ値パターンと同じものを表します。 これらはプロパティ名をシングルクォートで囲み、 < と > の間に記述します。 例：<'border-width'>、<'background-attachment'> など。

   これらの型は CSS全体で使えるキーワード（例：inherit）を含みません。 さらに、プロパティの値構文がカンマ区切り繰り返しの場合、 対応する型はトップレベルの カンマ区切りリスト乗数 を含みません。 （例えば pairing というプロパティが [ <custom-ident> <integer>? ]# と定義されていれば、 <'pairing'> は [ <custom-ident> <integer>? ] と同等であり、 [ <custom-ident> <integer>? ]# とはなりません。)

   なぜ乗数を除去するのか？

   トップレベルの乗数は、こうした値型から除去されます。なぜなら、トップレベルのカンマ区切り繰り返しは主に 調整リストプロパティ のために使われており、ショートハンドが複数のそのようなプロパティをまとめる場合、 独自のカンマ区切り繰り返しを作る必要があるためです。

   この特別な扱いがないと、 各ロングハンドごとに内部値だけのためのアドホックな生成式を定義しなければならず、 全体として文法が理解しづらくなります。

4. 関数表記とその引数。 これらは関数名の後ろに空の括弧を付けて < と > の間に記述されます。 例：<calc()> など。 対応する関数表記を参照します。

5. その他の非終端。 これらは非終端の名前を < と > の間に記述します。 例：<spacing-limit> など。 <border-width> と <'border-width'> の違いに注意してください。 後者は border-width プロパティの文法を表し、 前者は他の場所で明示的な展開が必要です。 非終端の定義は、仕様書内でその初出付近に置かれていることが多いです。

一部のプロパティ値定義には、スラッシュ（/）、カンマ（,）、括弧がリテラルとして含まれる場合があります。 これらは対応するトークンを示しています。 コンポーネント値に現れる他のキーワード以外のリテラル文字（“+”など）は、 シングルクォートで囲んで記述する必要があります。

カンマ は文法で指定されている場合、一部の状況で暗黙的に省略可能です。 文法内でオプション項目を区切るために使われている場合、 プロパティや他のCSS値のトップレベルリスト、または関数の引数リスト内では、 次のいずれかの場合にカンマを省略しなければなりません：

• カンマの前にあるすべての項目が省略されている場合
• カンマの後にあるすべての項目が省略されている場合
• カンマの間の項目が省略されたことで、複数のカンマが隣接する（空白やコメントを無視）場合

example( first? , second? , third? )

すべてのCSSプロパティは、CSS全体で使えるキーワード値も単独のプロパティ値として受け入れます。 可読性のため、これらはプロパティ値構文定義に明示的には記載されていません。 例えば、border-color の完全な値定義（CSS Cascading and Inheritance Level 3 における）は <color>{1,4} | inherit | initial | unset （ただし構文定義上は <color>{1,4}のみ記載されています）。

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

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

コンポーネント値は、以下のようにプロパティ値に配置できます：

• コンポーネントを並べて記述すると、 すべてのコンポーネントが指定された順序で現れる必要があります。
• 二重アンパサンド（&&）は2つ以上のコンポーネントを区切り、 それら全てが任意の順序で現れる必要があります。
• 二重バー（||） は2つ以上の選択肢を区切り、 1つ以上が任意の順序で現れる必要があります。
• バー（|）は2つ以上の代替案を区切り、 そのうち正確に1つだけ現れる必要があります。
• 角括弧（[ ]）はグループ化のために使います。

並置は二重アンパサンドより強く、二重アンパサンドは二重バーより強く、二重バーはバーより強いです。 したがって、次のような行は同等です：

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

順序変更可能な結合子（||、&&）では、 文法の順序は関係ありません： 同じグループのコンポーネントは任意の順序で混在できます。 したがって、次のような行は同等です：

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

注: 結合子は結合則ではないので、グループ化は重要です。 例えば a || b || c と a || [ b || c ] は異なる文法です。 前者は b a c のような値を許容しますが、後者は許容しません。

2.3. コンポーネント値乗数

各型、キーワード、または括弧付きグループの後ろには、次のいずれかの修飾子を付けることができます：

• アスタリスク（*） は、直前の型・語・グループが0回以上現れることを示します。
• プラス（+） は、直前の型・語・グループが1回以上現れることを示します。
• クエスチョンマーク（?） は、直前の型・語・グループがオプション（0回または1回）であることを示します。
• 波括弧内の単一の数字（{A}） は、直前の型・語・グループがA回現れることを示します。
• 波括弧内のカンマ区切り数字ペア（{A,B}） は、直前の型・語・グループが最低A回、最大B回現れることを示します。 Bを省略（{A,}）すると、少なくともA回の繰り返しが必要で、上限はありません。
• シャープ記号（#） は、直前の型・語・グループが1回以上、カンマトークンで区切られて現れることを示します （カンマの前後には 空白やコメントがあってもよい）。 また波括弧記法を続けて正確な回数を指定することもできます（例：<length>#{1,4}）。
• 感嘆符（!）をグループの後ろに置くと、 そのグループが必須であり、1つ以上の値を生成しなければならないことを示します。 グループ内の項目の文法が省略可能であっても、1つ以上のコンポーネント値は省略できません。

+および#乗数は+#のように積み重ねて使えます。 同様に#と?乗数は#?のように積み重ねて使えます。 これらは後の乗数が先の乗数の結果に適用されることを表します。 （グループ化でも同じ効果が得られますが、複雑な文法では括弧が多くなり可読性が低下します。）

繰り返しを示すコンポーネント値（*、+、#）については、UAは少なくとも20回の繰り返しをサポートしなければなりません。 プロパティ値にサポート数を超える繰り返しが含まれている場合、 その宣言は無効とみなして無視しなければなりません。

2.4. 結合子と乗数パターン

複数の独立したコンポーネント値を特定の数や順序で組み合わせる方法には、よく使われるパターンがいくつかあります。 特に、コンポーネント値の集合から、 著者が0個以上、1個以上、またはすべてを選び、 文法で指定された順序または任意の順序で並べたい場合がよくあります。

これらはすべて、結合子と乗数の単純なパターンを使って簡単に表現できます：

「任意の順序」の場合はすべて結合子で表現され、 「順序通り」の場合は全て並置のバリエーションとなっている点に注意してください。

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

特に指定がない限り、空白やコメントは、 上記結合子や乗数で組み合わせたコンポーネントの前後および間に現れてもかまいません。

注: 多くの場合、コンポーネント同士を区別するために、 実際には間にスペースが必須となることがあります。 例えば、値1em2emは、一つの<dimension-token>として解析され、 数値1と識別子em2emとなり、 これは無効な単位です。 この場合、2の前にスペースが必要で、これにより1emと2emという2つの長さとして解析されます。

2.6. プロパティ値の例

以下は、プロパティとそれに対応する値定義欄の例です。

3. 文字列データ型

文字列データ型には、 さまざまなキーワードや識別子、 そして文字列（<string>）やURL（<url>）などが含まれます。

CSSの識別子は、 一般的に<ident>で表され、 <ident-token>文法に従った文字の並びで構成されます。[CSS-SYNTAX-3] 識別子は引用符で囲むことはできません。 その場合は文字列として解釈されてしまいます。 CSSプロパティは、識別子を2種類受け入れます：定義済みキーワードと著者定義識別子です。

注: <ident>生成式はプロパティ値定義のためのものではありません。​<custom-ident>を代わりに使うべきです。 これは他の構文要素を定義する際の便宜上提供されています。

3.1. 定義済みキーワード

値定義欄では、特定の意味を持つキーワードがそのまま現れます。 キーワードは識別子であり、ASCIIの大文字小文字を区別せずに解釈されます（[a-z]と[A-Z]は同等）。

Value: collapse | separate

table { border-collapse: separate }

3.1.1. CSS全体のキーワード: initial, inherit, unset

上記で定義された通り、 すべてのプロパティはCSS全体のキーワードを受け入れます。 これらはすべてのCSSプロパティで共通の値計算を表します。 これらのキーワードは CSS Cascading and Inheritance Moduleで規範的に定義されています。

他のCSS仕様でも追加のCSS全体のキーワードを定義できます。

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

一部のプロパティは、著者が任意に定義した識別子をコンポーネント値として受け入れます。 この汎用データ型は<custom-ident>で表され、 そのプロパティの値定義で定義済みキーワードとして誤認されない有効なCSS識別子全てを示します。 こうした識別子はASCII範囲でも完全に大文字小文字を区別します （例：exampleとEXAMPLEは全く異なる著者定義識別子です）。

CSS全体のキーワードは<custom-ident>としては無効です。 defaultキーワードは予約されていて、これも<custom-ident>として無効です。 <custom-ident>を使う仕様では、 そのほかにどのキーワードが<custom-ident>から除外されるかを明確に記述する必要があります（例えば、そのプロパティ値定義に現れる定義済みキーワードは除外する等）。 除外されたキーワードはASCIIの大文字小文字の全パターンで除外されます。

プロパティ値内で位置的に曖昧なキーワードを解析する際、 <custom-ident>生成式は、他に未充足の生成式がそのキーワードを要求しない場合のみ、そのキーワードを取得できます。

注: <custom-ident>を使った文法設計の際は、 <custom-ident>が「位置的に曖昧でない」ようにし、 プロパティ中のキーワード値と衝突しないようにするべきです。

3.3. クォートされた文字列: <string>型

文字列は、 <string>で表されます。 リテラルとして記述する場合、 ダブルクォートまたはシングルクォートで囲まれた文字の並びとなり、 これは<string-token>生成式に対応します。 詳しくはCSS構文モジュール [CSS-SYNTAX-3]を参照してください。

content: "this is a 'string'.";
content: "this is a \"string\".";
content: 'this is a "string".';
content: 'this is a \'string\'.'

美的またはその他の理由で文字列を複数行に分割することも可能ですが、その場合は改行自体をバックスラッシュ（\）でエスケープしなければなりません。 改行はその後文字列から削除されます。例えば、次の二つのセレクターは全く同じです：

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

文字列で改行をそのまま表すことはできないため、文字列内に改行を含めたい場合はエスケープ「\A」を使用してください。（16進AはUnicodeで改行文字(U+000A)ですが、CSSでは「改行」の一般的な概念を表します。）

3.4. リソースロケータ: <url>型

url() 関数表記は、 <url>で示され、 URL（リソースへのポインタ）を表します。 <url>の一般的な構文は以下の通りです：

<url> = url( <string> <url-modifier>* )

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

url()は URL値の周囲に引用符を付けずに記述することもでき、 その場合は特別なパースが行われ、<url-token>として扱われます。詳細はCSS Syntax 3 § 4.3.6 urlトークンの消費を参照してください。[CSS-SYNTAX-3]

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

注: 引用符なしのurl()構文は<url-modifier>引数を受け取れず、 追加のエスケープが必要です： URL内の括弧、空白文字、 シングルクォート（'）やダブルクォート（"）はバックスラッシュでエスケープしなければなりません。 例：url(open\(parens)、url(close\)parens)。 （引用符付き<string>のurl()では、 改行と引用符のみエスケープが必要です。） URLの種類によっては、これらの文字をURLエスケープ（例：url(open%28parens)やurl(close%29parens)）として書くことも可能です。詳細は[URL]参照。

一部のCSS文脈（@importなど）では、<url>を関数ラッパーなしの素の<string>で表すこともできます。 この場合、その文字列はurl()関数でラップした場合と同じように動作します。

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

3.4.1. 相対URL

モジュール化されたスタイルシートをリソースの絶対位置に依存しない形で作成するには、著者は相対URLを使用すべきです。 相対URL（[URL]で定義）は、ベースURLを使って完全なURLに解決されます。 RFC 3986の3節でこの手順の規範的アルゴリズムが定義されています。 CSSスタイルシートの場合、ベースURLはスタイルシート自体のURLであり、スタイル対象のソース文書のURLではありません。 文書内に埋め込まれたスタイルシートは、そのコンテナに関連付けられたベースURLを持ちます。

注: HTML文書ではベースURLは変更可能です。

<url>がプロパティの算出値に現れる場合、 先述の通り絶対URLへ解決されます。 UA（ユーザーエージェント）が絶対URLに解決できない場合、算出値は指定値となります。

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

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

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

3.4.1.1. フラグメントURL

ブラウザのURL処理にありがちな挙動への対策として、 CSSではフラグメントのみのURLに特別な挙動があります。

url()の値が U+0023 NUMBER SIGN（#）で始まる場合は、 通常通りURLとしてパースしますが、加えてそのurl()にローカルURLフラグをセットします。

url()にローカルURLフラグがセットされている場合は、 URLのフラグメント以外はすべて無視し、 そのフラグメントを相対URLの解決対象となる現在の文書に対して解決します。 この参照は必ず同一文書参照とみなされます （クロス文書参照にはなりません）。

値をシリアライズする際、 url()がローカルURLフラグ付きの場合は、 フラグメントのみをシリアライズしなければなりません。

3.4.2. 空URL

<url>の値が空文字列 （url("")やurl()のような場合）なら、 そのURLは無効なリソース（about:invalidと同様）に解決されなければなりません。

算出値はurl("")で、シリアライズも同様に行われます。

注: これはWebプラットフォーム上の他の埋め込みリソースの空URLの挙動と一致し、 url()値が空のまま編集ミスで残った場合に、 スタイルシートやホスト文書の再リクエストによる過剰なトラフィックを防げます。 これはほぼ確実に無効なリソースとなるためです。 Webプラットフォームのリンク機能では空URLも許容されているため、 CSSが将来的にハイパーリンク制御機能を持つ場合、こうした制限はその文脈で緩和できます。

3.4.3. URL修飾子

url()関数は追加の<url-modifier>を指定できます。 これによりURLの意味や解釈が何らかの形で変更されます。 <url-modifier>は、<ident>または関数表記です。

本仕様では<url-modifier>は定義されていませんが、 他の仕様では定義される場合があります。

注: 引用符なしまたはurl()ラッパー無しの<url>は、<url-modifier>を受け付けられません。

4. 数値データ型

数値データ型は、 量・インデックス・位置などの値を表現するために使われます。 与えられた数値値で数量（数値的側面）を表現する際にはさまざまな構文バリエーションが存在しますが、 指定値や算出値はこれらの違いを区別しません： それらは値の抽象的な数量を表し、構文上の表現を表すものではありません。

数値データ型には、<integer>、<number>、<percentage>、 そしてさまざまな次元（<length>、<angle>、<time>、<frequency>、<resolution>など）があります。

注: 汎用の次元はここで定義されていますが、 他のモジュールでは追加のデータ型が定義されている場合もあります （例：[css-grid-1]ではfr単位が導入されており）、 その利用はより限定的です。

4.1. 範囲制限と範囲定義記法

プロパティは数値値をある範囲内に制限できます。 値が許容範囲を外れた場合、特に指定がない限り、その宣言は無効として無視されます。 範囲制限は数値型記法内にCSS角括弧付き範囲記法—​[min,max]—​を使って注釈できます。 角括弧内で識別キーワードの後に記述し、minとmaxを含む閉区間を示します。 例えば、<integer [0,10]>は0から10まで（両端含む）の整数を示し、 <angle [0,180deg]>は任意の単位で0degから180degまでの角度を示します。

注: CSS値は一般に開区間（open range）を許容しないため、角括弧のみが使われます。

CSSは理論上、全ての値型に無限精度・無限範囲をサポートしていますが、 実装は有限です。UAは実用的な範囲と精度をサポートすべきです。 理想的に上限なしの範囲は、適切に∞や−∞で示されます。 例えば、<length [0,∞]>は非負の長さを示します。

範囲が角括弧付き範囲記法やプロパティ記述で指定されていない場合、 [−∞,∞]が仮定されます。

−∞や∞の値は単位なしで記述しなければなりません（値型が単位を使う場合でも）。 0の値は、単位なしで記述しても構いません（値型が「単位なしゼロ」を許容しない場合でも、例：<time>）。

注: 本書執筆時点では、角括弧付き範囲記法は新しいものであり、 多くのCSS仕様では範囲制限は散文のみで説明されています。 （例えば「負の値は許可されない」「負の値は無効」といった説明は、[0,∞]の範囲を示します。） このことは拘束力に影響しません。

4.2. 整数: <integer>型

整数値は<integer>で表されます。

リテラルとして記述する場合、 整数は0から9までの10進数字1つ以上からなり、 CSS構文モジュール<number-token>生成式の部分集合に対応します。[CSS-SYNTAX-3]。 整数の最初の数字の直前に-や+を付けて符号を示すこともできます。

4.3. 実数: <number>型

数値値は<number>で表され、実数（小数部を持つ場合もあり）を示します。

リテラルとして記述する場合、 数値は整数、 またはゼロ以上の数字＋ドット（.）＋1つ以上の数字からなります。 オプションとして「e」または「E」と、その後に10進指数を示す整数を付けて 科学記法で書くこともできます。 CSS構文モジュール<number-token>生成式に対応します。 整数値と同様、数値の最初の文字の直前に-や+で符号を示すことができます。

4.4. 単位付き数値: 次元値

一般的な次元は、 単位が付与された数値を指し、 <dimension>で表されます。

リテラルとして記述する場合、 次元は数値に単位識別子（識別子）が直後に続いたものです。 CSS構文モジュール<dimension-token>生成式に対応します。 キーワードと同様、単位識別子はASCIIの大文字小文字を区別しません。

CSSでは<dimension>を使って 距離（<length>）、 時間（<time>）、 周波数（<frequency>）、 解像度（<resolution>）などの量を指定します。

4.4.1. 互換単位

算出値のシリアライズ時には、算出値のうち、 互換単位（静的な乗算係数で変換できる単位。例：pxとinの96:1変換や、font-sizeによるemとpxの変換））は、 標準単位に変換されてシリアライズされます。 互換単位のグループごとに、どれが標準単位か決まっています。

used valueとしての解決値をシリアライズする場合、 長さを表す値型（パーセンテージ・数値・キーワードなど）は全て長さと互換であるものとされます。 将来APIでused valueを返す場合も、 距離・時間・周波数などを表す値は関連する次元と互換とみなし、 標準単位に正規化します。

4.5. パーセンテージ: <percentage>型

パーセンテージ値は<percentage>で表され、 他の基準値の何割かを示します。

リテラルとして記述する場合、 パーセンテージは、数値の直後にパーセント記号%が続きます。 これは<percentage-token>生成式に対応します。 詳しくはCSS構文モジュール [CSS-SYNTAX-3]参照。

パーセンテージ値は常に他の量（例：長さ）に対して相対的です。 パーセンテージを許容する各プロパティは、そのパーセンテージが何を基準にするかも定義します。 この基準は、同じ要素の他のプロパティ値、 祖先要素のプロパティ値、 書式文脈の測定値（例：包含ブロックの幅）、 またはその他の値である場合があります。

4.6. パーセンテージと単位値の混合

<percentage>が同じ次元の値と同じ種類の量を表し、 同じコンポーネント値の位置で使え、 calc()式で組み合わせられる場合、 以下の便宜的な記法をプロパティ文法で使うことができます：

<length-percentage>

[ <length> | <percentage> ]と同等で、 <percentage>は<length>に解決されます。

<frequency-percentage>

[ <frequency> | <percentage> ]と同等で、 <percentage>は<frequency>に解決されます。

<angle-percentage>

[ <angle> | <percentage> ]と同等で、 <percentage>は<angle>に解決されます。

<time-percentage>

[ <time> | <percentage> ]と同等で、 <percentage>は<time>に解決されます。

注: 仕様で<percentage>を単位値の代わりに配置する場合は、互換性がある場合に限るべきです。

注: 必要に応じて、今後さらに<type-percentage>型が追加される可能性があります。 <number-percentage>型は追加されません。なぜなら<number>と<percentage>はcalc()で組み合わせられないためです。

5. 距離単位: <length>型

長さは距離の測定値を指し、 プロパティ定義では<length>で表されます。 長さは次元です。

ゼロ長の場合、単位識別子は省略可能です （すなわち構文上<number>の0としても記述可能）。 ただし、0がプロパティ内で<number>または<length>としてパース可能な場合 （例：line-height）、 <number>としてパースされなければなりません。

プロパティは長さ値を特定の範囲に制限する場合があります。 値が許容範囲外の場合、 宣言は無効とみなされ無視されます。

一部のプロパティでは負の長さ値も許容されますが、 書式設定が複雑になり、実装依存の制限があります。 負の長さ値が許容されるがサポートできない場合、 サポート可能な最も近い値に変換しなければなりません。

使用値（used）の長さがサポートできない場合、 UAは実際値で近似しなければなりません。

長さ単位には相対と絶対の2種類があります。

5.1. 相対長さ

相対長さ単位は、他の長さに対する相対値を示します。 相対単位を使ったスタイルシートは、出力環境ごとに柔軟にスケールできます。

相対単位は以下の通りです：

子要素は親の指定値としての相対値を継承せず、 算出値を継承します。

5.1.1. フォント相対長さ: em, ex, ch, rem単位

フォント相対長さは、使用された要素のフォントメトリクス、またはremの場合はルート要素のメトリクスを参照します。

em

使用要素のfont-sizeプロパティの算出値に等しい。

ルール例:

h1 { line-height: 1.2em }

この場合、h1要素の行の高さは h1要素のフォントサイズより20%大きくなります。 一方、

h1 { font-size: 1.2em }

この場合、h1要素のフォントサイズは h1要素が継承した算出フォントサイズより20%大きくなります。

rem

ルート要素上のem単位の算出値に等しい。

ex単位

最初に利用可能なフォントの使用xハイトに等しい。[CSS3-FONTS] xハイトは多くの場合、小文字「x」の高さですが、フォントに「x」がなくてもexは定義されます。 xハイトはフォントによって異なる方法で取得できます。 一部のフォントは信頼できるxハイトメトリクスを持ちます。 信頼できるメトリクスがない場合、UAは小文字グリフの高さから推測できます。 例えば、小文字「o」のグリフがベースラインよりどれだけ下に伸びているかを調べ、その分をボックス上端から引くという方法があります。 どうしてもxハイトが判定できない場合は0.5emとみなします。

ch単位

欧文英数字の代表的なadvance measure（文字送り幅）を表し、 使用フォントの“0”（U+0030）グリフのadvance measureとして測定されます。 (advance measureはグリフのadvance幅または高さで、要素のインライン軸に応じます)

注: この測定は概算値ですが（等幅フォントでは正確）、 1グリフ分のadvance measureの目安となり、文字数に基づく測定ができます。

注: グリフのadvance measureはwriting-modeやtext-orientation、 フォント設定、text-transform、そのほかグリフ選択や向きを変えるプロパティにも左右されます。

“0”グリフのmeasureが判定不能な場合は0.5em幅・1em高さとみなします。 つまりch単位は通常0.5em、 立て書きの場合は1emにフォールバックします （writing-modeがvertical-rlまたはvertical-lrで、 text-orientationがuprightの場合)。

要素文脈外で使う場合（例：メディアクエリ）は、これらの単位はfontプロパティの初期値に対応する算出フォントメトリクスを参照します。 font-sizeプロパティの値として使う場合は、親要素の算出フォントメトリクスを参照します （親が無い場合はfontプロパティの初期値の算出フォントメトリクス）。

フォント相対長さはシェーピングなしで計算されます。

5.1.2. ビューポートパーセンテージ長さ: vw, vh, vmin, vmax単位

ビューポートパーセンテージ長は、初期包含ブロックのサイズに対し相対的です。 初期包含ブロックは、連続メディアの場合はビューポートサイズ、 ページ領域（ページメディア）の場合はページサイズに基づきます。 初期包含ブロックの幅・高さが変われば、これらも比例して変化します。 ただし、スクロールバーは存在しないものとして扱います。

ページメディアの場合のビューポートパーセンテージ長の定義は、[CSS3PAGE]に委ねられています。

vw単位

初期包含ブロックの幅の1%に等しい。

例：ビューポート幅が200mmなら、 h1要素のフォントサイズは16mm（(8×200mm)/100）になります。

h1 { font-size: 8vw }

vh単位

初期包含ブロックの高さの1%に等しい。

vmin単位

vwまたはvhのうち小さい方に等しい。

vmax単位

vwまたはvhのうち大きい方に等しい。

5.2. 絶対長さ: cm、mm、Q、in、pt、pc、px 単位

絶対長さ単位は互いに固定された比率を持ち、 物理的な計測値にアンカーされています。 主に出力環境が明確な場合に有用です。 絶対単位は、 物理単位（in、cm、mm、pt、pc、Q） と、視覚角度単位（ピクセル単位）（px）から構成されます：

h1 { margin: 0.5in }      /* インチ */
h2 { line-height: 3cm }   /* センチメートル */
h3 { word-spacing: 4mm }  /* ミリメートル */
h3 { letter-spacing: 1Q } /* クォーターミリメートル */
h4 { font-size: 12pt }    /* ポイント */
h4 { font-size: 1pc }     /* パイカ */
p  { font-size: 12px }    /* px */

注: 出版用途では長さが2p3のように記述されることがあり、 2パイカ3ポイントを示します。 これはCSSではcalc(2pc + 3pt)のように記述できます（§ 8.1 数式: calc()参照）。

絶対長さ単位はすべて互換であり、 pxが標準単位です。

CSSデバイスでは、これらの寸法はアンカーが

1. 物理単位を物理的計測値に結びつける、または
2. ピクセル単位を参照ピクセルに結びつける

印刷メディアの標準的な閲覧距離では、 アンカー単位は物理単位（インチ、センチメートル等）であるべきです。 スクリーンメディア（高解像度デバイスを含む）、 低解像度デバイス、 特殊な閲覧距離を持つデバイスでは、 アンカー単位はピクセル単位にすることが推奨されます。 その場合、ピクセル単位は参照ピクセルを最も近似するデバイスピクセル数とします。

注: アンカー単位がピクセル単位の場合、 物理単位は物理的計測値と一致しない場合があります。 逆にアンカー単位が物理単位の場合、 ピクセル単位は全数デバイスピクセルに一致しない場合があります。

注: ピクセル単位と物理単位の定義はCSS1やCSS2の以前の版とは異なります。 特に以前のCSSではピクセル単位と物理単位は固定比率ではなく、 物理単位は常に物理的計測値に結びつけられ、 ピクセル単位は参照ピクセルに最も近くなるように変動していました。 （この変更は、96dpiの仮定に依存する既存コンテンツが多すぎて、その仮定が壊れるとコンテンツが壊れるため、やむなく行われました。）

注: 単位はASCII大文字小文字を区別せず、小文字でシリアライズされます。例えば1Qは1qとしてシリアライズされます。

参照ピクセルは、 96dpiのデバイスピクセル密度と腕の長さの距離での1ピクセルの視覚角度です。 標準の腕の長さ28インチでは視覚角度は約0.0213度です。 腕の長さで読む場合、1pxは約0.26mm（1/96インチ）に相当します。

下図は閲覧距離による参照ピクセルの大きさの変化を示しています： 読書距離71cm（28インチ）なら参照ピクセルは0.26mm、 3.5m（12フィート）なら1.3mm。

次の図はデバイスの解像度がピクセル単位に与える影響を示しています： 低解像度デバイス（例：典型的なコンピュータ画面）では1px×1pxの領域は1ドットで覆われ、 高解像度デバイス（例：プリンター）では同じ領域は16ドットで覆われます。

デバイスピクセルは、 デバイス出力で完全な色表現が可能な最小面積単位です。 一般的なカラースクリーンでは、赤・緑・青のサブピクセルを含む正方形またはやや長方形の領域です。 より高解像度で一部色のみ表示するなど、定義が曖昧になる非伝統的な出力も存在しますが、 その場合も「デバイスピクセル」に相当する何らかの概念が存在します。

6. その他の量

6.1. 角度単位: <angle>型とdeg、grad、rad、turn単位

角度値は<dimension>であり、<angle>で示されます。 角度単位の識別子は：

deg

度（degree）。1周は360度です。

grad

グラジアン（グオン、グレードとも呼ばれる）。1周は400グラジアンです。

rad

ラジアン。1周は2πラジアンです。

turn

ターン。1周は1turnです。

例えば直角は90deg、100grad、0.25turn、 または約1.57radです。

すべての<angle>単位は互換であり、 degが標準単位です。

注: 互換性の理由から、 <angle>の一部利用では0だけで0degを意味する場合があります。 これは一般的な仕様ではなく、将来の<angle>型には発生しません。

6.2. 時間単位: <time>型とs、ms 単位

時間値は次元であり、 <time>で表されます。 時間単位の識別子は以下の通りです：

s

秒

ms

ミリ秒。1秒は1000ミリ秒です。

すべての<time> 単位は互換であり、 sが標準単位です。

プロパティは時間値を特定の範囲に制限する場合があります。 許容範囲外の値は宣言が無効とみなされ無視されます。

6.3. 周波数単位: <frequency>型とHz、kHz単位

周波数値は次元であり、 <frequency>で示されます。 周波数単位の識別子は：

Hz

ヘルツ。1秒あたりの回数を表します。

kHz

キロヘルツ。1kHzは1000Hzです。

例えば音程を表す場合、200Hz（または200hz）は低音、6kHz（または6khz）は高音です。

すべての<frequency>単位は互換であり、 hzが標準単位です。

注: 単位はASCII大文字小文字を区別せず、小文字でシリアライズされます。例えば1Hzは1hzとしてシリアライズされます。

6.4. 解像度単位: <resolution>型、dpi、dpcm、dppx単位

解像度単位は次元であり、 <resolution>で表されます。 解像度単位の識別子は：

dpi

ドット毎インチ

dpcm

ドット毎センチメートル

dppx

px単位毎のドット

<resolution>単位は、グラフィカル表現における1つの「ドット」のサイズを示し、 何個のドットがCSSのin、cm、pxに収まるかを示します。 利用例としては、resolutionメディアクエリ（[MEDIAQ]）やimage-resolutionプロパティ（[CSS3-IMAGES]）などがあります。

すべての<resolution>単位は互換であり、 dppxが標準単位です。

<resolution>値の許容範囲は必ず負の値を除外し、 さらに明示的範囲が指定される場合はそれにも従います。

CSSのinとpxの比率が1:96で固定されているため、1dppxは96dpiと等価です。 これはCSSで画像表示時のデフォルト解像度に該当します。 詳細はimage-resolution参照。

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

7. 他で定義されているデータ型

一部のデータ型は、それぞれ専用のモジュールで定義されています。 この例では、複数の仕様でよく使われる一般的な型について説明します。

7.1. 色: <color> 型

<color>データ型は[CSS3COLOR]で定義されています。 CSS Color Level 3またはその後継をサポートするUAは、<color>をその定義通り解釈しなければなりません。

7.2. 画像: <image> 型

<image>データ型は[CSS3-IMAGES]で定義されています。 CSS Images Level 3またはその後継をサポートするUAは、 <image>をその定義通り解釈しなければなりません。 まだCSS Images Level 3をサポートしていないUAは、 <image>を<url>として解釈しなければなりません。

7.3. 2D位置指定: <position>型

<position>値は、オブジェクト領域（例:背景画像）の位置を 配置領域（例:背景配置領域）内で指定します。 計算および解釈は、background-positionに定められた通りです。[CSS3-BACKGROUND]

<position> = [
  [ left | center | right | top | bottom | <length-percentage> ]
|
  [ left | center | right ] && [ top | center | bottom ]
|
  [ left | center | right | <length-percentage> ]
  [ top | center | bottom | <length-percentage> ]
|
  [ [ left | right ] <length-percentage> ] &&
  [ [ top | bottom ] <length-percentage> ]
]

注: background-positionプロパティは三値構文も受け入れます。 これは他の長さやパーセンテージ等と組み合わせる場合にパースの曖昧性が生じるため、一般的には許可されていません。

シリアライズ時の正規順序は、横方向→縦方向の順です。

他のキーワード、<length>、<percentage>等と文法で併記する場合、<position>は「グリーディ」にパースされ、可能な限り多くのコンポーネントを消費します。

8. 関数表記

関数表記は、 より複雑な型や特別な処理を行うためのコンポーネント値の一種です。 構文は、関数名の直後に左括弧（<function-token>）を書き、 その中に引数を並べ、右括弧で閉じます。 キーワードと同様、関数名もASCII大文字小文字を区別しません。 括弧内の直後には空白はあってもなくても構いません。 関数は複数の引数を取ることができ、CSSプロパティ値と同様の書式で記述します。

注: 関数表記のうち、rgba()などの一部レガシー表記は不要なカンマを使いますが、 通常カンマはリスト項目や文法の曖昧部分を区切るためだけに使われます。 引数区切りにカンマを使った場合、カンマ前後の空白は任意です。

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

8.1. 数式: calc()

calc()関数は、 数値のCSSコンポーネント値を数式として記述でき、 加算（+）、 減算（-）、乗算（*）、除算（/）が使えます。

calc()式は、 標準の演算子優先順位で評価されます （*と/が+と-より強く、 その他は左から右へ評価）。

この関数は、<length>、<frequency>、<angle>、<time>、 <percentage>、<number>、<integer>の値が許可される場所で利用できます。 calc()式の構成要素はリテラル値またはcalc()式です。

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

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

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

.foo {
  background: url(top.png), url(bottom.png);
  background-repeat: no-repeat;
  background-position: 50% 50%, calc(50% + 20px) calc(50% + 20px);
}

.foo {
  background-image: linear-gradient(to right, silver,
                                              white 50px,
                                              white calc(100% - 50px),
                                              silver);
}

8.1.1. 構文

calc()関数の構文は以下の通りです：

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

また、空白は+や-演算子の両側に必要です。 （*や/は空白なしでも使えます。）

UAは、20項目以上のcalc()式をサポートする必要があります。 各NUMBER、DIMENSION、PERCENTAGEが1項目です。 calc()式がサポート数を超える場合は無効と見なします。

8.1.2. 型チェック

数式には、解決型（<length>、<frequency>、<angle>、<time>、<percentage>、<number>、<integer>のいずれか）がある。 解決型は式の配置場所で有効な型でなければならず、 そうでない場合は無効です。 解決型は式内の値の型によって決まります。<number-token>は<number>または<integer>型です。 <dimension-token>の型は単位で決まります （例: cmは<length>、degは<angle>など）。

注: <number-token>は常に<number>または<integer>として解釈されるため、 「単位なしゼロ」の<length>はcalc()ではサポートされません。 つまり、width: calc(0 + 5px);は無効ですが、 width: 0;やwidth: 5px;は有効です。

式が置かれる文脈でパーセンテージが許容され、かつそれが<number>以外の型に対して相対的である場合、 <percentage-token>はその型として扱われます。 例えばwidthプロパティではパーセンテージは<length>型です。 パーセンテージがその文脈で他の型とused-value互換でない場合のみ、<percentage>型となります。 その文脈で通常パーセンテージが使えない場合、パーセンテージを含むcalc()式は無効です。

注: <percentage>が<number>に対して相対的な場合（例:opacity）は、calc()で許可されません。 これを許すと「単位代数」（次元の乗除）が問題になり、現時点で新機能も生まれません。 （例：opacity: 25%とopacity: .25は同じ意味です。単なる構文変換です。）

注: <number>がused-value時に<length>になるプロパティもあります （具体的にはline-heightやtab-size）ですが、 <number>がcalc()式内で「長さ的」になることはありません。 常に<number>型です。

演算子は部分式を形成し、引数の型に基づいて型を決定します。 式を単純化するため、演算子ごとに型の制約があります。 各演算子で左右の型が制約を満たしているか確認します。 互換の場合は、以下の通り型を決定します（演算子の優先順は無視）:

• +や-では、 両側が同じ型、または片側が<number>でもう一方が<integer>か確認。 両側が同じ型ならその型に解決。 一方が<number>でもう一方が<integer>なら、<number>型に解決。
• *では、 いずれか片側が<number>型か確認。 両側が<integer>なら<integer>型に解決。 それ以外はもう一方の型に解決。
• /では、 右側が<number>型か確認。 左側が<integer>なら<number>型に解決。 それ以外は左側の型に解決。

演算子の型制約を満たさない場合、その式は無効です。 また、ゼロ除算は無効です。リテラルゼロや、評価結果がゼロとなる全ての数値式（純粋数値式はパース時点で評価可能）を含みます。

注: 代数的な単純化はcalc()式の有効性や解決型には影響しません。 例：calc(5px - 5px + 10s)やcalc(0 * 5px + 10s)は 長さと時間を加算しようとするため無効です。

8.1.3. 算出値

calc()式の算出値は、式中の全ての要素が計算されたものです。

パーセンテージが算出値時に解決されない場合、 calc()式内でも解決されません。 例：calc(100% - 100% + 1em)はcalc(1em + 0%)に解決され、 1emにはなりません。 値のパーセンテージ算出に特別なルールがある場合（例：heightプロパティ）は、 calc()式内のパーセンテージにも適用されます。

テーブルセルやテーブル要素の幅・高さ計算が複雑なため、 テーブルの列、列グループ、行、行グループ、セルに対する幅・高さのパーセンテージを使った数式は、 autoを指定したかのように扱ってもよい（MAY）とされています。

8.1.4. 範囲チェック

値のパース時の範囲チェックはcalc()内では行われません。 したがって、範囲外の値があっても宣言自体は無効になりません。 ただし、式の結果となる値は、対象コンテキストで許容される範囲にクランプ（制限）されなければなりません。 クランプは算出値に対して可能な限り行われ、 また、計算で十分に式を単純化できず範囲チェックができない場合は使用値に対しても行われます。 （クランプは指定値には行われません。）

注: calc()を受け入れる全てのコンテキストは、許容値を閉区間（open intervalではなく）として定義する必要があります。

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

8.1.5. シリアライズ

calc()値のシリアライズは本レベルでは未定義です。

付録A: IANAに関する考慮事項

about:invalid URLスキームの登録

このセクションは、about:invalid URLの定義と登録を行います。 登録手順は[RFC6694]で定義されています。

公式登録記録は http://www.iana.org/assignments/about-uri-tokens/about-uri-tokens.xhtml に掲載されています。

謝辞

Giovanni Campagna、 Christoph Päper、 Keith Rarick、 Alex Mogilevsky、 Ian Hickson、 David Baron、 Edward Welbourne、 Boris Zbarsky、 Björn Höhrmann および Michael Day からのコメント・提案により本モジュールは改善されました。

セキュリティに関する考慮事項

本仕様は新たなセキュリティ上の考慮事項を導入しません。

本仕様はurl()関数（<url>）を定義しており、 CSSによるネットワークリクエストが可能となります。 利用される機能によっては、ユーザーがネットワークリソースにアクセスできるかどうかや、 その内容（スタイルシートのルール、画像サイズ、フォントのメトリクス等）が漏洩する可能性があります。 また、URLを介したデータの外部送信も可能です。

プライバシーに関する考慮事項

本仕様は、ユーザーの画面サイズ（ビューポートパーセンテージ長）、 デフォルトフォントサイズ、 およびユーザーのシステムで利用可能なフォント情報（フォント相対長さ）を 露出する単位を導入します。

本仕様はurl()関数（<url>）を定義しており、 CSSによるネットワークリクエストが可能となります。 利用される機能によっては、ユーザーがネットワークリソースにアクセスできるかどうかや、 その内容（スタイルシートのルール、画像サイズ、フォントのメトリクス等）が漏洩する可能性があります。 また、URLを介したデータの外部送信も可能です。