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

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. 構成値コンビネータ

構成値は次のようにプロパティ値へ配置できます：

• 構成要素を並べる（juxtaposing）ことで、 それら全てが指定順に現れる必要があります。
• 二重アンパサンド（&&）は2つ以上の構成要素を区切り、それら全てが任意の順序で現れる必要があります。
• ダブルバー（||）は2つ以上の選択肢を区切り、 そのうち1つ以上が任意の順序で現れる必要があります。
• バー（|）は複数の代替案を区切り、 その中からちょうど1つだけ現れる必要があります。
• 角括弧（[ ]）はグループ分けに使われます。

並置（juxtaposition）は二重アンパサンドより強く、二重アンパサンドはダブルバーより、ダブルバーはバーより強くなります。 したがって、次の2行は等価です：

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

順不同コンビネータ（||, &&）においては、文法内の順序は問われません。 同じグループ内の構成要素はどの順序でも混在して現れて良いです。 したがって、次の行はすべて等価です：

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

注: コンビネータは結合的（associative）ではないので、グループ分けが重要です。 例えば、a || b || cとa || [ b || c ]は異なる文法です： 前者はb a cのような値を許しますが、後者は許しません。

2.3. 構成値乗数

すべての型、キーワード、または括弧で囲まれたグループには、次のいずれかの修飾子を後置できます：

• アスタリスク（*）は 直前の型・単語・グループが0回以上繰り返されることを示します。
• プラス（+）は 直前の型・単語・グループが1回以上繰り返されることを示します。
• クエスチョンマーク（?）は 直前の型・単語・グループがオプション（0回または1回現れる）であることを示します。
• 波括弧内の単一の数値（{A}）は 直前の型・単語・グループがA回現れることを示します。
• 波括弧内のカンマ区切りの2つの数値（{A,B}）は 直前の型・単語・グループが少なくともA回、最大でB回現れることを示します。 Bを省略（{A,}）すると、少なくともA回現れ、上限がないことを示します。
• ハッシュ記号（#）は 直前の型・単語・グループが1回以上カンマトークン（必要に応じて空白やコメントで囲まれても良い）で区切って現れることを示します。 また、波括弧形式（上記）と組み合わせて正確な繰り返し数を指定することもできます（例：<length>#{1,4}）。
• 感嘆符（!）がグループの後に付くと、そのグループは必須であり、少なくとも1つの値を生成しなければなりません。 グループ内項目の文法が全体の省略を許していても、少なくとも1つの構成値は省略できません。

+と#の乗数は+#のように積み重ねることができ、 同様に#と?の乗数も#?のように積み重ねることができます。 これらの積み重ねは、それぞれ後ろの乗数を前の乗数適用後に適用したものを表します。 （これらの積み重ねはグループ化でも表現できますが、複雑な文法だと括弧の数が多くなり可読性が損なわれます。）

繰り返し構成値（*、+、または#で示される）については、UAは最低でも20回の繰り返しをサポートしなければなりません。 プロパティ値がサポート回数を超える場合、その宣言は無効として無視されます。

2.4. コンビネータと乗数のパターン

特定の数や順序で複数の独立した構成値を組み合わせるには、いくつかの一般的な方法があります。 特に、構成値の集合から0個以上、1個以上、またはすべてを選択し、文法で指定された順番または任意の順番で並べることがよく求められます。

これらはすべて、コンビネータや乗数のシンプルなパターンで表現できます：

「任意の順番」の可能性はすべてコンビネータで、「順番に」はすべて並置のバリエーションとして表現されることに注意してください。

2.5. 構成値と空白

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

注: 多くの場合、構成要素同士を区別するために 空白が必須となることがあります。 例えば、値1em2emは、数値1と識別子em2emからなる<dimension-token>として解析され、これは無効な単位になります。 この場合、2の前に空白が必要で、1emと2emという2つの長さとして解析できます。

2.6. 関数記法の定義

関数記法の構文は、次のシーケンスとして定義されます：

1. 関数名を識別子として書き、続けて開き括弧を書く （例：example(）。 または、<function-token>生成規則で 任意の関数名を示すこともできます。

2. 関数の引数（あれば）は、値定義の構文で表現されます。

3. リテラルの閉じ括弧。

関数の引数は暗黙的にグループ化されており、角括弧（[ ... ]）で囲まれているかのように扱われます。

example( <length> , <length> )

<pseudo-class-selector> = ':' <ident-token> | ':' <function-token> <any-value> ')'

2.7. プロパティ値の例

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

2.8. 非終端定義と文法生成ブロック

<position>や<calc()>のような非終端記号の正確な文法は、しばしばCSS文法生成ブロックで指定されます。 これらは次のような定義が並ぶ整形済みブロックで表現されるのが通例です：

<foo> = keyword | <bar> |
        some-really-long-pattern-of-stuff
<bar> = <length>

各定義はそれぞれ独立した行で始まり、 定義される非終端、=、それが展開される値定義の構文の断片からなります。 定義は複数行にまたがることができ、 次の生成規則の開始行またはブロック終端まで続きます（どちらか早い方）。

3. 値の組み合わせ：補間、加算、累積

例えばトランジションやアニメーションなど、いくつかの手続きでは、2つのCSSプロパティ値を組み合わせます。 以下の組み合わせ操作は、2つの算出値V_AとV_Bから算出値V_resultを生成します。 可換でない操作（例えば行列の乗算や、異なるtransformリストの累積）では、V_Aが最初の項、V_Bが2番目の項となります。

補間（interpolation）

2つのプロパティ値V_AとV_Bが与えられたとき、V_AとV_Bの間の区間上のpの距離にある中間値V_resultを生成します。p=0の場合はV_A、p=1の場合はV_Bとなります。

pの範囲はタイミング関数の影響により(−∞, ∞)です。 このため、この手続きはpが[0, 1]の外側の場合の外挿動作も定義しなければなりません。

加算（addition）

2つのプロパティ値V_AとV_Bが与えられたとき、2つのプロパティの合計V_resultを返します。

注: 加算は、多くの場合補間の定義に使われる加重和関数で表現できますが、必ずしもそうとは限りません。 例えば、transform行列の補間は行列要素の分解と補間に基づきますが、加算は行列の乗算に依存します。

値型が加算のための特定の手続きを定義していない場合、あるいは加算不可（not additive）と定義されている場合、 その加算操作は単にV_result=V_Bとなります。

累積（accumulation）

2つのプロパティ値V_AとV_Bが与えられたとき、2つのオペランドを組み合わせ、V_BをV_Aからの差分（delta）として扱った結果V_resultを返します。

注: 数値や長さなど多くのアニメーション型では、累積は加算と同一に定義されています。

定義が異なる一般的なケースはリスト型で、加算はリストへの追加、累積は要素ごとの加算とされる場合です。 例えば、フィルターリスト値blur(2)とblur(3)を加算するとblur(2) blur(3)となり、累積するとblur(5)となります。

値型が累積のための特定の手続きを定義していない場合、その累積操作は加算と同一です。

これらの操作は算出値に対してのみ定義されます。 （そのため、例えば<length>値15ptと5emをどのように加算するかを定義する必要はありません。これらの値は上記手続きに渡される前に正準単位へ解決されるためです。）

3.1. 範囲チェック

補間の結果、すべての入力値が有効であっても、プロパティの有効範囲外の値になることがあります。 これは特にpが[0, 1]の範囲外のときに発生しますが、一部のイージング関数ではこの範囲内でも発生することがあります。 補間・加算・累積の最終結果が、値が使われるターゲット文脈で範囲外になった場合でも、その宣言が無効になることはありません。 その代わり、値はターゲット文脈で許可される範囲にクランプ（制限）されます。これは数式関数（§ 10.12 範囲チェック参照）と同様です。

注: 補間の結果が範囲外でも、加算や累積で結果が「修正」されて範囲内に戻る場合があります。 したがって、クランプはすべての補間関連操作の最終結果にのみ適用されます。

4. テキストデータ型

テキストデータ型には、 さまざまなキーワードや識別子、また文字列（<string>）、URL（<url>）などが含まれます。 定義済みキーワードの大文字・小文字や、プロパティごとに明示的に定められていない限り、 正規化処理は行われません（Unicode正規化もされません）。 プロパティの指定値や算出値は パース後のUnicode値そのまま（文字セット変換やエスケープを含む）となります。[UNICODE] [CSS-SYNTAX-3]

CSSの識別子（identifier）は、 一般的に<ident>で示され、 <ident-token>文法に準拠した文字の並びです。[CSS-SYNTAX-3] 識別子はクォートできません。 クォートすると文字列として解釈されてしまいます。 CSSプロパティは2種類の識別子を受け入れます：定義済みキーワードと著者定義識別子です。

注: <ident>生成規則はプロパティ値定義用ではありません。<custom-ident>を使うべきです。 これは他の構文要素の定義の便宜用です。

すべてのテキストデータ型は補間時に離散的に扱われ、加算不可です。

4.1. 定義済みキーワード

値定義欄では、あらかじめ意味が定義されたキーワードがリテラルで現れます。 キーワードは識別子であり、ASCII大文字小文字無視で解釈されます（すなわち[a-z]と[A-Z]は等価）。

Value: collapse | separate

table { border-collapse: separate }

4.1.1. CSS全体で使えるキーワード：initial、inherit、unset

上記の通り、 すべてのプロパティはCSS全体で使えるキーワードを受け入れます。 これらはすべてのCSSプロパティに共通する値計算を表します。 これらのキーワードは CSS カスケードと継承モジュールで規範的に定義されています。

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

4.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>が 「位置的に曖昧でない」ようにし、プロパティのキーワード値と衝突しないようにするべきです。 このような衝突は代わりに<dashed-ident>を使うことで回避できます。

4.3. 接頭辞付き著者定義識別子：<dashed-ident>型

一部の文脈では、著者定義識別子とCSS定義識別子の両方が受け入れられます。 慎重に処理しないと、新しいCSS定義値の追加が困難になり、UAは既存の使用例を調査し、新しい値が十分に使われていないと判断して 新たな意味を与えるかどうか賭けをすることになります。これにより既存ページが壊れるリスクがあります。

CSSにはこの2つの値空間を危うい形で混在させているレガシーケースが多々ありますが、 <dashed-ident>型は、著者定義識別子とCSS定義識別子を簡単に区別できるように設計されています。

<dashed-ident>生成規則は、 <custom-ident>であり、 その大文字小文字区別性も持ちながら、さらに先頭が2つのハイフン（U+002D HYPHEN-MINUS）で始まるという制限があります。

<dashed-ident>は著者定義名のみに予約されており、 CSS自体が<dashed-ident>を独自用途で定義することはありません。

.foo {
  --fg-color: blue;
}

@color-profile --foo { src: url(https://example.com/foo.icc); }
.foo {
  color: color(--foo 1 0 .5 / .2);
}

4.4. クォートされた文字列：<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\'.'

文字列は見た目や他の理由で複数行に分割することが可能ですが、その場合は改行自体をバックスラッシュ（\）でエスケープする必要があります。 改行はその後、文字列から削除されます。例えば、以下の2つのセレクターは全く同じ意味になります：

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

文字列は直接改行を表現できないため、文字列内で改行を含めたい場合はエスケープ「\A」を使ってください。（16進数AはUnicodeの改行文字（U+000A）ですが、CSSでは「改行」の一般的な意味を表します。）

4.5. リソースロケータ：<url>型

<url>型は、 url()やsrc()関数で記述され、 URL（リソースへの参照）を表します。

<url>の構文は次の通りです：

<url> = <url()> | <src()>

<url()> = url( <string> <url-modifier>* ) | <url-token>
<src()> = src( <string> <url-modifier>* )

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

レガシーの理由から、url()はURL自体をクォートせずに書くこともでき、その場合は特別なパース（<url-token>）が行われます。[CSS-SYNTAX-3] この特別なパース規則のため、url()はリテラルURLしか指定できません。src()はこの規則がないため、var()などの関数によるURL指定も可能です。

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

background: src("http://www.example.com/pinkish.gif");
--foo: "http://www.example.com/pinkish.gif";
background: src(var(--foo));

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

一部のCSSコンテキスト（@importなど）では、<url>を関数ラッパーなしの素の<string>で表すこともできます。 その場合、その文字列はurl()関数の中にその文字列が入っているのと全く同じように動作します。

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

4.5.1. 相対URL

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

注: HTMLドキュメントにおいては、 ベースURLは変更可能です。

<url>がプロパティの算出値に現れる場合、 それは前述の通り絶対URLに解決されます。 UAが絶対URLに解決できないURLの算出値は、指定値そのままとなります。

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

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

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

4.5.1.1. フラグメントURL

要素ID参照がベースURLの変化やシャドウDOMの有無にかかわらず機能するようにするため、 <url>は、フラグメントのみを含む場合特別な挙動を持ちます。

<url>の値がU+0023 NUMBER SIGN（#）で始まっている場合、 そのURLには追加でローカルURLフラグがセットされ、 URLのフラグメントに対するツリースコープ参照となります。

<url>をローカルURLフラグ付きでマッチさせる場合：

• URLのフラグメントが要素ID参照（たとえばメディアフラグメントではなく）の場合、 それをツリーのIDをツリースコープ名とする ツリースコープ参照として解決します。 具体的には、関連するノードツリーの子孫のうち、URLのフラグメントをIDにもつ最初の要素（ツリー順）に解決します。 （このツリースコープ参照は必要に応じてホスト側のツリーにも遡ります。）

  該当要素が見つからない場合、そのURLの解決は失敗します。

• それ以外の場合は、現在のドキュメントに対してフラグメントを解決します。

該当要素の検索への参照が必要かもしれませんが、 これはDocument専用であり、 ShadowRootには定義されていません。

注: このようなフラグメントは、現在のドキュメント （またはシャドウDOMの場合はスタイルシートが属するノードツリー）の内容に対して常に解決されます。 これは、base要素によるベースURLの変更や、 リンクされたスタイルシート内の相対URLがスタイルシートのURLを基準に解決されるといった他の解決方法を無視します。

<!DOCTYPE html>
<base href="http://example.com/">
...
<a href="#anchor" style="background-image: url(#image)">link</a>

シリアライズ時、ローカルURLフラグ付きurl()は フラグメントのみでシリアライズされなければなりません。

4.5.2. 空のURL

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

算出値は指定されたurl("")またはsrc("")となり、 シリアライズもその通りになります。

注: これはWebプラットフォーム上の他の埋め込みリソースでの空のurlの挙動と一致します。 また、編集ミスなどでurl()値が空になった場合、不要な再リクエストによるトラフィック増加を防ぎます。 空の値は、url()が現れるどの文脈でもほぼ確実に無効なリソースとなるためです。 Webプラットフォームのリンク機能では空のurlも許可されていますが、 将来CSSにハイパーリンク制御機能が追加されれば、その場合はこの制約が緩和される可能性があります。

4.5.3. URL修飾子

<url>は 追加の<url-modifier>を指定でき、 これによってURLの意味や解釈が変更されます。 <url-modifier>は<ident>または関数記法です。

本仕様は<url-modifier>を定義しませんが、他の仕様で定義されることがあります。

注: クォートされていない、またはurl()記法でラップされていない<url>は、<url-modifier>を指定できません。

4.5.4. URL処理モデル

CSSで表現されたURLを解釈する際は、 URLパーサーのencoding引数は省略（デフォルトのUTF-8を使用）しなければなりません。 これはスタイルシートのエンコーディングに関係ありません。

注: つまり、CSSで記述されたURLは、スタイルシート自身のエンコーディングに関係なく、常にパーセントエンコードで非ASCIIコードポイントをUTF-8でURLオブジェクトに変換します（したがって、URL値がネットワークリクエストなどに使われる場合は常に同様です）。 この処理はスタイルシートをデコードしてUnicode コードポイントに変換した後で行われることに注意してください。

5. 数値データ型

数値データ型は、量、インデックス、位置、その他の値を表現するために使用されます。 ある数値値の数量（数値的側面）を表現する際には多くの構文上のバリエーションが存在し得ますが、 指定値および算出値はこれらの違いを区別しません。 それらは値の抽象的な数量を表し、構文上の表現方法には依存しません。

数値データ型には、<integer>、<number>、<percentage>、 および次元（<length>、<angle>、<time>、<frequency>、<resolution>など）が含まれます。

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

CSSでの数値値の精度およびサポートされる範囲は実装依存であり、 値が使用されるプロパティやその他の文脈によって異なる場合があります。 しかし、CSS仕様内では無限の精度と範囲を前提としています。 範囲や精度の制限により明示的にサポートできない値の場合、 実装がサポートする最も近い値に変換されなければなりませんが、「最も近い値」の定義もまた実装依存です。

<angle>が実装依存のサポート範囲を超えて変換される必要がある場合は、 サポートされている360degの最も近い倍数にクランプされなければなりません。

5.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,∞]範囲を示します。） ただし、これらの記述も同様に拘束力を持ちます。

5.2. 整数：<integer>型

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

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

特に指定がない限り、 CSS仕様書上で最も近い整数に丸めるとは、 小数部分がちょうど0.5のときは+∞方向に丸めることを意味します。 （例：1.5は2に、-1.5は-1に丸められます。）

5.2.1. <integer>の計算と組み合わせ

特に指定がない限り、 指定された<integer>の算出値は指定された抽象整数値となります。

補間は、<integer>について V_result = round((1 - p) × V_A + p × V_B)と定義されます。 つまり、補間は<number>と同様に実数空間で行われ、結果は最も近い整数に丸められることで <integer>となります。

加算は <integer>に対し V_result = V_A + V_B

5.3. 実数：<number>型

数値値は<number>で表され、 小数部分を持つ実数を表します。

リテラルで記述する場合、 数値は整数または 0個以上の10進数字・ピリオド（.）・1個以上の10進数字の並びです。 オプションで「e」または「E」の後に整数を続けて10進指数を示す科学的記法も可能です。 これはCSS構文モジュールの<number-token>生成規則に対応します。[CSS-SYNTAX-3] 整数と同様、数値の最初の文字の直前には-や+を付けて符号を示すことができます。

<zero> は値が0のリテラル数値を表します。 <number>で値が0になる式（例：calc(0)）は <zero>には一致しません。リテラルな<number-token>のみ一致します。

5.3.1. <number>の計算と組み合わせ

特に指定がない限り、 指定された<number>の算出値は指定された抽象的な数値となります。

補間は <number>について V_result = (1 - p) × V_A + p × V_B

加算は <number>に対し V_result = V_A + V_B

5.4. 単位付き数値：次元値

一般的な用語としての次元は、 単位が付随する数値を指します。 これは<dimension>で表されます。

リテラルで記述する場合、 次元は数値の直後に単位識別子（識別子）が続きます。 これはCSS構文モジュールの<dimension-token>生成規則に対応します。[CSS-SYNTAX-3] キーワードと同様、単位識別子もASCII大文字小文字無視です。

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

5.4.1. 互換単位

CSS値のシリアライズ時には、 算出値が 互換単位（静的な乗算係数で関係付けられる単位。例：pxとinの96:1、font-sizeで計算されるemとpxなど）は すべて単一の正準単位に変換されます。 互換単位の各グループは、どの単位を正準単位としてシリアライズするか決めています。

解決値が使用値である場合、それをシリアライズする際には、 長さを表すすべての値型（パーセント、数値、キーワードなど）は長さと互換と見なします。 使用値を返す将来のAPIでも、距離・時間・周波数などを表す値は 関連する次元のクラスと互換とみなして正準化する必要があります。

5.4.2. 次元の組み合わせ

補間は 互換な 次元（例：2つの<length>値）で V_result = (1 - p) × V_A + p × V_Bと定義されます。

加算は 互換な次元に対して V_result = V_A + V_B

5.5. パーセンテージ：<percentage>型

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

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

パーセンテージ値は常に他の量（例えば長さ）に対して相対的です。 パーセンテージを許可する各プロパティは、パーセンテージが参照する量を定義します。 この量は同じ要素の他のプロパティ値や、祖先要素のプロパティ値、 フォーマット文脈の測定値（例：包含ブロックの幅）などであり得ます。

5.5.1. <percentage>の計算と組み合わせ

（font-sizeなど、<percentage>値を<length>に算出する場合など） 特に指定がない限り、 パーセンテージの算出値は指定されたパーセンテージです。

補間は <percentage>について V_result = (1 - p) × V_A + p × V_B

加算は <percentage>に対し V_result = V_A + V_B

5.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>はcalc()で組み合わせられないため、<number-percentage>は追加されません。

5.6.1. パーセンテージと次元の混合の計算と組み合わせ

パーセンテージ-次元混合の算出値は次のように定義されます：

• パーセンテージ成分がゼロまたは明示的に次元値に算出される場合は算出次元値

• 次元成分がゼロの場合は算出パーセンテージ

• それ以外はcalc()式の算出値

補間は パーセンテージ-次元値の組み合わせ（例：<length-percentage>、<frequency-percentage>、<angle-percentage>、<time-percentage>など）は

• 両方が純粋な<length>値であれば<length>の補間と同じ
• 両方が純粋な<percentage>値であれば<percentage>の補間と同じ
• それ以外は両値をcalc()式（次元+パーセンテージの和を表す。各成分は0でもよい）に変換し、 各成分を個別に （<length>/<frequency>/<angle>/<time>と<percentage>として）補間する

加算は <percentage>について 補間と同じですが 各成分を加算します（補間するのではなく）。

5.7. 比率：<ratio>型

比率値は<ratio>で表され、 2つの数値の比を表します。 一般的にはアスペクト比（幅と高さの関係）に使われます。

リテラルで記述する場合、 比率の構文は次の通りです：

<ratio> = <number [0,∞]> [ / <number [0,∞]> ]?

2つ目の<number>は省略可能で、 省略時は1が既定値となります。 ただし、<ratio>は常に2つの成分でシリアライズされます。

<ratio>の算出値は、与えられた2つの数値のペアです。

<ratio>内のいずれかの数値が0または無限大の場合、 それは異常比率（通常は何も起こらない）を表します。

2つの<ratio>を比較する必要がある場合は、 1つ目の数値を2つ目の数値で割り、その結果を比較します。 例：3/2は2/1より小さいです（1.5と2の比較）。 （つまり「縦長」アスペクト比は「横長」アスペクト比より小さいと見なされます。）

5.7.1. <ratio>の組み合わせ

<ratio>の補間は、 各<ratio>を1つ目の値÷2つ目の値で数値化し （例：3 / 2は1.5）、 その結果の対数をとり（例：1.5なら約0.176）、 それらの値を補間します。 補間中の結果は対数を逆算して<ratio>に戻し、 その値を1つ目の値、2つ目を1とみなして新しい<ratio>とします。

いずれかの<ratio>が異常比率である場合、補間はできません。

start  = log(5);   // ≈ 0.69897
end    = log(1.5); // ≈ 0.17609
interp = 0.69897*.5 + 0.17609*.5; // ≈ 0.43753
final  = 10^interp; // ≈ 2.73

注: 比率の対数で補間することで、結果がスケール非依存になり （5 / 1から300 / 200でも同じ）、 「横長」と「縦長」のバリエーションに対して対称性が保たれ （1 / 5から2 / 3でも途中は1 / 2.73程度になる）、 幅固定・高さ固定のどちらでも対称的です。 これらは他の多くの補間法が持たない性質です。

注: 対数の性質により、どの対数でも同じですが （例では常用対数ですが、自然対数でも最終結果は同じ）、 補間途中の値は異なります。

<ratio>の加算はできません。

6. 距離単位: <length> 型

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

0の長さの場合、単位識別子は省略可能です （すなわち、<number> 0として構文的に表現できます）。 ただし、0が<number>または<length>のいずれとしても解釈できる場合 （例えばline-heightなど）、 それは<number>として解釈されなければなりません。

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

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

使用値の長さがサポートできない場合には、 ユーザーエージェントは実際の値で近似しなければなりません。

長さ単位は相対と絶対の2種類があります。 長さの指定値（指定長さ）は その量と単位で表されます。 長さの算出値（算出長さ）は 指定された長さを絶対長さに解決したものであり、 その単位は区別されません： どの絶対長さ単位でも表現できます（ただし正準単位、pxでシリアライズされます）。

数値値のサポートされる精度と その精度に合わせてどのように丸められるかは 通常は実装依存ですが、<length>はborder-widthなど一部のプロパティで 視覚的な表示を合理的にするために特定の方法で丸められます。 （このアルゴリズムは個々のプロパティから明示的に呼び出されます。）

6.1. 相対長さ

相対長さ単位は他の長さに対する相対的な長さを指定します。 相対単位を使ったスタイルシートは様々な出力環境に容易にスケールできます。

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

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

6.1.1. フォント相対長さ：em, rem, ex, rex, cap, rcap, ch, rch, ic, ric, lh, rlh 単位

フォント相対長さは 使用する要素のフォントメトリクス （ローカルフォント相対長さの場合） またはルート要素のフォントメトリクス （ルートフォント相対長さの場合）を参照します。

em

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

このルール：

h1 { line-height: 1.2em }

は、h1要素の行の高さが そのh1要素のフォントサイズより20%大きくなることを意味します。 一方：

h1 { font-size: 1.2em }

は、h1要素のフォントサイズが h1要素が継承する算出フォントサイズより20%大きくなることを意味します。

rem

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

ex

最初に利用可能なフォントの使用済みxハイトに等しい。xハイトは通常、小文字「x」の高さに等しいためこの名がある。 ただし、exは「x」を含まないフォントにも定義される。 xハイトはフォントごとに異なる方法で取得できる。 一部のフォントには信頼できるxハイトの指標が含まれている。 信頼できるフォントメトリクスが利用できない場合、UAは小文字グリフの高さからxハイトを決定してもよい。 1つの手法は、小文字「o」グリフがベースラインよりどれだけ下に伸びているかを見て、その値を外枠の上端から引くこと。 xハイトを決定できない場合は0.5emとみなす。

rex

ルート要素におけるex単位の値に等しい。

cap

最初に利用可能なフォントの使用済みキャップハイトに等しい。キャップハイトはおおよそ大文字ラテン文字の高さに等しいためこの名がある。 ただし、capはラテン文字を含まないフォントにも定義される。 キャップハイトはフォントごとに異なる方法で取得できる。 一部のフォントには信頼できるキャップハイトの指標が含まれている。 信頼できるフォントメトリクスが利用できない場合、UAは大文字グリフの高さからキャップハイトを決定してもよい。 1つの手法は、大文字「O」グリフがベースラインよりどれだけ下に伸びているかを見て、その値を外枠の上端から引くこと。 キャップハイトを決定できない場合は、そのフォントのアセント値を使用する。

rcap

ルート要素におけるcap単位の値に等しい。

ch

欧文英数字の代表的な進み幅を表す。 使用フォントで“0”（ゼロ、U+0030）グリフの使用済み進み幅で測定される。 （進み幅は、要素のインライン軸におけるグリフの進み幅または高さのいずれか。）

注: この測定値は近似値であり（等幅フォントでは正確）、 1つの狭いグリフの進み幅の目安となる。 これにより想定グリフ数に基づく測定が可能。

注: グリフの進み幅はwriting-modeやtext-orientation、 フォント設定やtext-transform、その他グリフ選択や向きに影響するプロパティにも依存する。

“0”グリフの幅が取得できない場合は0.5em幅・1em高さとみなす。 よってch単位は一般的に0.5em、 立て組みの場合は1emになる （すなわちwriting-modeがvertical-rlまたはvertical-lrかつtext-orientationがupright）。

rch

ルート要素におけるch単位の値に等しい。

ic

CJK文字の代表的な進み幅を表す。 使用フォントで“水”（CJK水漢字、U+6C34）グリフの使用済み進み幅で測定される。

注: この測定値は通常は正確 （プロポーショナル全角グリフを持つフォントでは近似値） であり、単一の全角グリフの進み幅の目安となる。

イデオグラフ進み幅が取得できない場合は1emとみなす。

ric

ルート要素におけるic単位の値に等しい。

lh

使用する要素のline-heightプロパティの算出値に等しい。 normalは 最初に利用可能なフォントだけのメトリクスを用いて絶対長さに変換される。

rlh

ルート要素におけるlh単位の値に等しい。

注: 要素のheightをlhやrlh単位で指定しても、 実際の行数を制御できるわけではありません。 これらの単位は理想的な空行の理論サイズに基づく長さ計算だけが可能です。 実際の行ボックスのサイズは内容によって異なります。 実際の行数を制限したい場合はmax-linesプロパティを使うことができます。

font-*プロパティ値で使用される場合、 参照先要素のフォント相対長さは親要素の算出メトリクスを基準に解決されます。 （親がない場合はfontおよびline-heightプロパティの初期値に対応する算出メトリクスを基準にします。） 同様に、 lhやrlh単位が line-heightプロパティや font-*プロパティ値で使用される場合も、 親要素の算出line-heightおよびフォントメトリクスを基準に解決されます（親がない場合はfontとline-heightプロパティの初期値の算出メトリクスを基準）。 （他のフォント相対長さはline-heightで使用される場合、要素自身のメトリクスを基準に解決され続けます。）

要素以外の文脈 （メディアクエリなど）で使用される場合、 フォント相対長さ単位は fontとline-heightプロパティの初期値に対応するメトリクスを基準にします。 また、ルート要素が存在しない文書で指定された場合も、 ルートフォント相対長さは fontおよびline-heightプロパティの初期値のメトリクスを想定して解決されます。

注: chやicなどのフォント相対単位は、 必要なフォントがまだ読み込まれていない場合フォントのダウンロードを引き起こすことがあります。

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

一部のユーザーエージェントは、可読性を高めるために文書内のフォントサイズに追加の制限（最小フォントサイズの設定など）を適用できる場合があります。 こういった制限は影響を受けるプロパティの使用値にのみ適用されなければならず、 フォント相対長さの解決には影響してはなりません。 ただし、他の文脈 （メディアクエリなど）で 使用フォントメトリクスに影響する場合は フォント相対長さの解決に影響します。

注: 一般的に、ユーザーの好み（最小フォントサイズなど）を尊重することは望ましいです。 例えば(min-width: 40em)のようなメディアクエリでは 実際に表示されるフォントサイズを使うのが有用です。 しかし、こうした好みが 要素上のプロパティ値内のフォント相対長さに影響するのは Web互換性がありませんでした。 多くのページが、これらの単位が指定font-sizeの正確な倍数になることを想定しているためです。 実際のユーザー設定後の実際のフォントサイズではありません。

一部のユーザーエージェントはフォームコントロールのline-height値に制限を加えることがあります。 これらはlhやrlh単位には影響すべきではありません。 ただし子孫への影響は実装依存です。

6.1.2. ビューポート割合長さ：*vw, *vh, *vi, *vb, *vmin, *vmax 単位

ビューポート割合長さは、初期包含ブロックの大きさに対して相対的です。 これは ビューポート（連続メディアの場合） またはページ領域（ページメディアの場合）に基づきます。 初期包含ブロックの高さや幅が変わると、それに合わせてスケールされます。

6.1.2.1. ラージ・スモール・ダイナミック ビューポートサイズ

ビューポート割合長さ単位には4つのバリエーションがあり、 3つの（同一の場合もある）ビューポートサイズの概念に対応します。

ラージビューポート

ラージビューポート割合単位（lv*） およびデフォルトビューポート割合単位（v*） は、ラージビューポートサイズに基づいて定義されます： 動的に展開・格納されるUAインターフェイスがすべて格納された状態のビューポートサイズ。 これにより、著者はUI要素が格納されている状態で確実にページ全体を埋めるコンテンツを配置できますが、 UI要素が展開された場合にはコンテンツが隠れる場合があります。

ラージビューポート割合単位のサイズは ビューポート自体がリサイズされない限り固定（安定）です。

例：スマートフォンでは 画面スペースが限られているため、 ブラウザはページスクロール開始時にタイトルバーやアドレスバーの一部または全部を隠すことがあります。 ラージビューポート割合単位は これらがすべて格納された広い状態のスペースを基準にサイズ決定されるため、 それらUI要素が隠れた時にページ全体を埋めます。 ただし、UI要素が表示されている場合は それら単位でサイズや位置決めされたコンテンツが隠れる場合があります。

スモールビューポート

スモールビューポート割合単位（sv*） は、スモールビューポートサイズに基づいて定義されます： 動的に展開・格納されるUAインターフェイスがすべて展開された状態のビューポートサイズ。 これにより、著者はUI要素が表示されている場合でも ビューポート内に収まるコンテンツを配置できますが、 UI要素が格納された場合はページ全体を埋めない場合があります。

スモールビューポート割合単位のサイズは ビューポート自体がリサイズされない限り固定（安定）です。

例えば、height: 100svhとした要素は すべての動的UA UI要素が表示されているときに 画面にぴったり収まります。

これらのUI要素が隠れると、 要素の周りに余白が生じます。 スモールビューポート割合単位は 一般的には「安全」ですが、 ユーザーがページを操作し始めると最適なレイアウトにならない場合もあります。

ダイナミックビューポート

ダイナミックビューポート割合単位（dv*） は、ダイナミックビューポートサイズに基づいて定義されます： 動的に展開・格納されるUAインターフェイスの状態を動的に考慮したビューポートサイズ。 これにより、著者はUI要素の有無にかかわらず ちょうどビューポートに収まるコンテンツを配置できます。

ダイナミックビューポート割合単位のサイズは ビューポートが変わらなくても安定しません。 この単位を使うと、ユーザーがページをスクロールするなどした際に コンテンツがリサイズされる場合があります。 用途によってはユーザーの体験を妨げたり、パフォーマンスコストが発生することがあります。

UAはUI要素の展開・格納のアニメーション中、 ダイナミックビューポート割合単位の値を アニメーションせず、完全に展開または格納された状態とみなして単位値を計算してもよい。 （アニメーション中は格納状態を前提とすることが推奨されます。）

特定のUI要素の展開・格納が (A) すべてのビューポート割合長さ（および初期包含ブロック）のサイズを同時に変えるのか、 それとも(B) ラージビューポートサイズと スモールビューポートサイズの差分に寄与するのかは 主にUA依存です。 ただし：

• スクロールなどユーザー操作によって 頻繁に発生し、レイアウトの大幅な変化がユーザーに不快感を与える場合は 後者(B)に分類しなければなりません。

• 一定の安定状態があり、 レイアウトを調整した方がユーザーに有益な場合は 前者(A)に分類しなければなりません。

• さらにUAは、 動的に表示されてもレイアウトに一切影響せず （つまりどのビューポート割合長さにも影響を与えない）UI要素を持つこともできます。 （通常、オンスクリーンキーボードが該当します。）

すべての場合において、 overflowや scrollbar-gutterプロパティが ルート要素のいずれかの軸で 常にスクロールバーが表示される（またはスペースが常時確保される） （例：overflow: scroll、ただしoverflow: autoは除く）場合は、 その軸の算出値におけるビューポート割合長さは 初期包含ブロックに応じて減少します。 それ以外の場合、 そして常にメディアクエリの場合は、 ビューポート割合長さは スクロールバーが存在しないものとして （たとえそれが初期包含ブロックと異なっても）サイズ決定されます。

注: overflowプロパティの値がbody要素で設定されている場合、 ルート要素のスクロールバー表示に影響を与えることがあります。 ただし、このことはビューポート単位のサイズには影響しません。

6.1.2.2. 様々なビューポート相対単位

ビューポート割合長さ単位は以下の通りです：

vw

svw

lvw

dvw

それぞれラージビューポートサイズ、スモールビューポートサイズ、ラージビューポートサイズ、 およびダイナミックビューポートサイズ の幅の1%に等しい。

下記の例では、ビューポート幅が200mmの場合、 h1要素のフォントサイズは16mm（すなわち (8×200mm)/100）となります。

h1 { font-size: 8vw }

vh

svh

lvh

dvh

それぞれラージビューポートサイズ、スモールビューポートサイズ、ラージビューポートサイズ、 およびダイナミックビューポートサイズ の高さの1%に等しい。

vi

svi

lvi

dvi

ボックスのインライン軸において、 それぞれラージビューポートサイズ、スモールビューポートサイズ、ラージビューポートサイズ、 およびダイナミックビューポートサイズ のサイズの1%に等しい。

vb

svb

lvb

dvb

ボックスのブロック軸において、 初期包含ブロックのそれぞれラージビューポートサイズ、スモールビューポートサイズ、ラージビューポートサイズ、 およびダイナミックビューポートサイズ のサイズの1%に等しい。

vmin

svmin

lvmin

dvmin

*vw と *vh の小さい方に等しい。

vmax

svmax

lvmax

dvmax

*vw と *vh の大きい方に等しい。

注: 元々の（プリフィックスなしの）ビューポート単位は 定義されていました。その基準は初期包含ブロックでした。 連続メディアの場合、これは常に単一のビューポートサイズと一致します。 ブラウザクロームがスクロール時に動的に出し入れされる仕組みは後から導入され、 Safariに倣って多くのUAがこれらの単位をより大きいサイズにマッピングしました。 この方法は多くの場合見た目が良くなりますが、 重要なコンテンツ（ツールバーやヘッダー、フッターなど）を隠してしまう場合もあります。 そのため、このマッピングが最適だったかは完全には明らかではなく、 以前の仕様書ではUAがこれらデフォルト単位のマッピングを選択できるようにしていました。 しかし現時点ではラージビューポート割合単位へのマッピングが Web互換性のために必須とみなされています。

要素が存在しない場合やまだスタイルが適用されていない場合 （メディアクエリの評価時など）には、 *vi および *vb 単位は writing-modeプロパティの初期値を使って どの軸に対応するかを決定します。

6.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) と書けます（§ 10.1 基本的な算術: calc()参照）。

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

CSSデバイスでは、これらの寸法はアンカーされます：

1. 物理単位を物理的な測定値に結びつける、もしくは
2. ピクセル単位を基準ピクセルに結びつける。

印刷メディアで標準的な閲覧距離の場合、 アンカー単位は 物理単位 （インチ、センチメートル等）であるべきです。 スクリーンメディア（高解像度デバイスを含む）、 低解像度デバイス、 または異常な閲覧距離のデバイスの場合は、 アンカー単位をピクセル単位とすることが推奨されます。 その場合、ピクセル単位は デバイスピクセルの整数値に最も近い値になるよう 基準ピクセルに対応させることが推奨されます。

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

注: ピクセル単位および物理単位のこの定義は CSS1やCSS2の初期版とは異なります。 特に以前のCSSではピクセル単位と 物理単位は固定比率ではありませんでした： 物理単位は常に物理測定値に結びつけられ、 ピクセル単位は基準ピクセルに最も近くなるよう可変でした。 （この変更は、96dpiを前提にした既存コンテンツが多く、 それを崩すとコンテンツが壊れるためやむなく導入されたものです。）

注: 単位はASCII大文字小文字を区別しません。 シリアライズ時は小文字になります（例：1Q → 1q）。

基準ピクセルは、 96dpiのデバイスピクセル密度および 腕の長さ（約28インチ）離れた位置での1ピクセルの視角です。 腕の長さが28インチの場合、視角は約0.0213度となります。 腕の長さで読む場合、1pxは約0.26mm（1/96インチ）に相当します。

下の図は、閲覧距離が基準ピクセルのサイズに与える影響を示しています。 読書距離が71cm（28インチ）の場合、基準ピクセルは0.26mm、 3.5m（12フィート）の場合は1.3mmとなります。

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

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

7. その他の量

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

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

deg

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

grad

グラジアン（gradian）、別名「gon」または「grade」。 1周は400グラジアンです。

rad

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

turn

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

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

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

注: 互換性のため、 <angle>の一部の用途では、単独の0が0degを意味することがあります。 しかしこれは一般的には当てはまらず、 今後<angle>型の新たな用途でこのようなことが起こることはありません。

7.2. 継続時間単位: <time> 型と s、ms 単位

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

s

秒（Second）。

ms

ミリ秒（Millisecond）。1秒は1000ミリ秒です。

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

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

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

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

Hz

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

kHz

キロヘルツ（KiloHertz）。1キロヘルツは1000ヘルツです。

例えば音の高さを表す場合、200Hz（または 200hz）は低音、6kHz（または 6khz）は高音にあたります。

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

注: 単位はASCII大文字小文字を区別しません。 シリアライズ時は小文字になります（例：1Hz → 1hz）。

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

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

dpi

1インチあたりのドット数（dots per inch）。

dpcm

1センチメートルあたりのドット数（dots per centimeter）。

dppx

x

px単位あたりのドット数。

<resolution>単位は、 CSSのin、cm、またはpxに どれだけのドットが収まるかを示すことで、 グラフィカル表現における1つの「ドット」の大きさを表現します。 主な用途としては、[MEDIAQ]のresolutionメディアクエリや、 image-resolutionプロパティ（[CSS3-IMAGES] 定義）があります。

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

<resolution>値の許容範囲は、 明示的な範囲指定がある場合を除き、常に負の値を除外します。

CSSのinとpxの1:96固定比により、1dppxは96dpiと等価であることに注意してください。 これはCSSで画像を表示する際のデフォルト解像度に対応します。 詳細はimage-resolutionを参照。

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

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

一部のデータ型は、それぞれ専用のモジュールで定義されています。 ここでは、複数の仕様でよく使われる代表的なものを紹介します。

8.1. 色: <color> 型

<color>データ型は [CSS-COLOR-4] で定義されています。 UAは<color>を そこで定められている通りに解釈しなければなりません。

8.1.1. <color>の合成

補間は<color>に対して CSS Color 4 § 12. Color Interpolationで定義されています。 補間はプリマルチプライドされた色同士で行われます（CSS Color 4 § 12.3 アルファ付き補間参照）。

<color>型は加法ではありません。

注: CSS WGではユースケースを<color>の加算について募集しており、 将来的に<color>型を加法可能にすることも検討しています。

8.2. 画像: <image> 型

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

8.2.1. <image>の合成

注: <image>の補間は CSS Images 3 § 6 Interpolationで定義されています。

画像は加法ではありません。

8.3. 2次元位置指定: <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プロパティは3値構文も受け入れます。 これは他の長さやパーセンテージ成分と組み合わさった場合に構文上の曖昧さを生じるため、 一般的には禁止されています。

8.3.1. <position>の構文解析

他のキーワード、<length>、<percentage>などと 文法内で並んで指定された場合、<position>はグリーディーに構文解析されます。 可能な限り多くの構成要素を消費します。

8.3.2. <position>のシリアライズ

指定値の<position>をシリアライズする際：

1つだけ指定されている場合:

• 暗黙のcenterキーワードが追加され、 2要素値としてシリアライズされます。

2つ指定されている場合:

• キーワードはキーワードとしてシリアライズされます。

• <length-percentage>は <length-percentage>としてシリアライズされます。

• 要素は水平方向→垂直方向の順でシリアライズされます。

4つ指定されている場合:

• キーワードとオフセットの両方がシリアライズされます。

• 要素は水平方向→垂直方向の順でシリアライズされます。

注: <position>値は 決して1つだけの値としてシリアライズされません。 単一値で同じ挙動になる場合でも、 <position>の隣に<length>が来るなど、 一部の文法で構文上の曖昧さを避けるためです （例：transform-origin）。

注: 算出値は 常に2つのオフセット（キーワードなし）としてシリアライズされます。 算出値では構文上の区別が保存されないためです。

8.3.3. <position>の合成

補間は <position>に対して 各要素（x, y）ごとに独立して、 左上隅からのオフセットとして正規化された <length-percentage>で補間されます。

加算も同様に、 <position>の 各要素（x, y）ごとに独立して、 左上隅からのオフセットとして正規化された <length-percentage>で加算されます。

9. 関数記法

関数記法とは、 より複雑な型を表現したり、特別な処理を呼び出したりできる コンポーネント値の一種です。 構文は、関数名の直後に左丸括弧 （すなわち<function-token>） を書き、その後に関数の引数を書き、最後に右丸括弧で閉じます。 キーワード同様、関数名はASCII大小区別しません。 空白は丸括弧内部の直後にあっても良いですが、省略可能です。 関数は複数の引数を取ることができ、引数はCSSプロパティ値と同様の書式で記述します。 詳細は§ 2.6 関数記法の定義を参照してください。

注: 関数記法の中には、rgba()のように、不要なカンマを使っているレガシーなものもありますが、 通常カンマはリスト内の項目や、そうでなければ曖昧になる文法部分の区切りにだけ使われます。 引数を区切るためにカンマを使う場合、カンマの前後の空白はあってもなくても構いません。

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

数式関数はこの下で定義されています。 その他の関数記法は それぞれのモジュールで定義されています。 例えば<color>関数は [CSS-COLOR-4]や [CSS-COLOR-5]で定義されています。

10. 数式表現

数式関数 （calc()、clamp()、sin()など、この章で定義されているもの）は CSS数値値を数式として記述できるようにします。

数式関数は数値値を表し、 次のいずれかです：

• <length>、

• <frequency>、

• <angle>、

• <time>、

• <flex>、

• <resolution>、

• <percentage>、

• <number>、

• <integer>

...または<length-percentage>などの混合型であり、 そのような値が有効となる箇所で使うことができます。

10.1. 基本算術：calc()

calc()関数は、 加算（+）、減算（-）、乗算（*）、除算（/）、および丸括弧を使って 数値値に対して基本的な算術演算を行う数式関数です。

calc()関数は1つの計算式を含みます。 これは値と演算子が並んだ並びであり、必要に応じて丸括弧でグループ化され （<calc-sum>文法に一致）、 通常の演算子の優先順位ルール （*と/は+や-より優先し、 それ以外は左から右に評価）で式を評価した結果を表します。 calc()関数は 内部の計算式の結果を表します。

計算式の構成要素は （例：5pxのような）リテラル値、 他の数式関数、 あるいはvar()など、 有効な引数型（<length>など）に評価される他の式も使えます。

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

.fade {
  background-image: linear-gradient(silver 0%, white 20px,
                                    white calc(100% - 20px), silver 100%);
}

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

.aspect-ratio-box {
  --ar: calc(16 / 9);
  --w: calc(100% / 3);
  --h: calc(var(--w) / var(--ar));
  width: var(--w);
  height: var(--h);
}

10.2. 比較関数：min()、max()、clamp()

min()、max()、clamp()の比較関数は 複数の計算式を比較し、 そのうち1つの値を表します。

min()またはmax()関数は 1つ以上のカンマ区切りの計算式を持ち、 それぞれ最も小さい値（最も負）または最も大きい値（最も正）を表します。

clamp()関数は 3つの計算式（最小値・中央値・最大値）を取り、 中央値に最小値・最大値によるclampを適用したものを表します。 最小値・最大値が矛盾した場合は最小値を優先します。 （すなわちclamp(MIN, VAL, MAX)はmax(MIN, min(VAL, MAX))と同じ意味です。）

最小値・最大値のいずれか（または両方）に キーワードnoneを指定することもでき、 その側からのclampをしないことを示します。 （clamp(MIN, VAL, none)はmax(MIN, VAL)、 clamp(none, VAL, MAX)はmin(VAL, MAX)、 clamp(none, VAL, none)は単にcalc(VAL)と同じ意味です。）

これら3関数のすべてで、 引数の計算式は<number>、 <dimension>、<percentage>のいずれにもなれますが、 型の一貫性がとれていないと無効になります。 結果値の型はその一貫した型となります。

.type {
  /* font-sizeをvwとvhの平均の10倍にするが、12px未満にはしない */
  font-size: max(10 * (1vw + 1vh) / 2, 12px);
}

.type {
  /* font-sizeを12px～100pxの範囲に制限 */
  font-size: clamp(12px, 10 * (1vw + 1vh) / 2, 100px);
}

.type {
  /* font-sizeを最低12pxに制限 */
  font-size: clamp(12px, 10 * (1vw + 1vh) / 2, none);
}

10.3. ステップ値関数: round()、mod()、rem()

ステップ値関数であるround()、mod()、rem()は、 いずれも与えられた値を 別の「ステップ値」に従って 異なる方法で変換します。

round(<rounding-strategy>?, A, B?)関数は 丸め戦略を省略可能で指定し、 2つの計算式 A, B を受け取り、 Aの値を、丸め戦略に従って、 Aの上または下のBの整数倍のいずれか最も近い値に丸めて返します。 引数の計算式は<number>、<dimension>、<percentage>のいずれにもなれますが、 型の一貫性がとれていない場合は無効となります。 結果の型は一貫した型となります。

AがBの整数倍とちょうど等しい場合、round()はAそのものを返します （Aが0⁻か0⁺かも保持します）。 そうでない場合、Aに最も近いBの整数倍であるlower B（−∞側に近い）と upper B（+∞側に近い）の2つがあります。 次の<rounding-strategy>が そのどちらを選ぶかを決定します：

nearest

lower Bとupper Bのいずれか、Aとの絶対差が小さい方を選びます。 両者の差が等しい場合 （Aが2つの値のちょうど中間の場合）、 upper Bを選びます。

up

upper Bを選びます。

down

lower Bを選びます。

to-zero

lower Bとupper Bのうち、0との絶対差が小さい方を選びます。

lower Bがゼロの場合は0⁺、 upper Bがゼロの場合は0⁻とします。

<rounding-strategy>を省略した場合、 デフォルトはnearestです。 （いわゆる四捨五入。） Aの型が <number>と一致する場合は Bを省略でき、その場合はデフォルトで1となります。 それ以外でBを省略するのは無効です。

CSSOMはどのように丸めるか明記する必要があり、 CSS関数もデフォルトで同じ丸めを行うべきでしょう。 どの挙動がよいでしょうか？ [Issue #5689]

注: JavaScript等のプログラミング言語では 丸め戦略ごとに丸め関数を分けている場合があります。 JSのMath.floor()はCSSのround(down, ...)と同等です。 JSのMath.ceil()はCSSのround(up, ...)と同等です。 JSのMath.trunc()はCSSのround(to-zero, ...)と同等です。 JSのMath.round()はCSSのround(nearest, ...)または単にround(...)と同等です。

注: <rounding-strategy>のキーワードは block-step-sizeのキーワードと同じで、挙動も同じです。 （block-step-sizeにはto-zeroはありません； blockサイズは常に非負なので、to-zeroとdownは同じ意味になります。）

剰余関数であるmod(A, B)およびrem(A, B)も同様に2つの計算式 A, B を受け取り、 AからAの上下どちらかに最も近いBの整数倍を引いた差を返します。 引数の計算式は<number>、<dimension>、<percentage>のいずれにもなれますが、 同じ型でなければ無効です。 結果も引数と同じ型になります。

この2つの関数は非常に似ていますが、 両方の引数が正または負の場合は同じ結果になります： 関数の値はAからBの整数倍だけずらした値で ゼロ以上B未満の範囲内に収まります。 （具体的には、範囲はゼロを含みBを含みません。 さらに、Bが正なら0⁺から、Bが負なら0⁻から始まります。）

AとBが異符号の場合は挙動が異なります。 mod()（modulusの略）は 上記と同様にゼロとBの間に値を収めるBの整数倍を選びます （結果は必ずゼロかBと同じ符号でAと同じ符号にはなりません）。 一方rem()（remainderの略）は ゼロと−Bの間に値を収めるBの整数倍を選び、値の符号を変えません。

注: mod()とrem()は他の関数による定義も可能です： mod(A, B)はcalc(A - sign(B)*round(down, A*sign(B), B))と等価です （Bが正ならround(down)、負ならround(up)とするためのトリック）、 rem(A, B)はcalc(A - round(to-zero, A, B))と等価です。 （ただしこれらの式は0⁺と0⁻の扱いが常に正しいとは限りません—0⁻の意味は加算に対して可換ではないためです。）

10.3.1. 引数の範囲

round(A, B)で Bが0の場合、結果はNaNです。 AとBがともに無限大の場合も、結果はNaNです。

Aが無限大、Bが有限の場合は 結果は同じ無限大になります。

Aが有限、Bが無限大の場合、 結果は<rounding-strategy>およびAの符号によって異なります：

nearest

to-zero

Aが正または0⁺なら0⁺を返します。 それ以外は0⁻を返します。

up

Aが正（ゼロでない）なら+∞を返します。 Aが0⁺なら0⁺を返します。 それ以外は0⁻を返します。

down

Aが負（ゼロでない）なら−∞を返します。 Aが0⁻なら0⁻を返します。 それ以外は0⁺を返します。

mod(A, B)やrem(A, B)で Bが0の場合、結果はNaNです。 Aが無限大の場合もNaNです。

mod(A, B)のみの場合、 Bが無限大かつAとBが逆符号 （ゼロの符号も含む）の場合はNaNです。

注: その他の「無限大B」の場合は有効で、 単にAをそのまま返します。

10.4. 三角関数：sin()、cos()、tan()、asin()、acos()、atan()、atan2()

三角関数—sin()、cos()、tan()、asin()、acos()、atan()、atan2()は 各種基本的な三角関係を計算します。

sin(A)、cos(A)、tan(A)関数は いずれも1つの計算式を受け取り、 それは<number> もしくは<angle>でなければなりません。 引数をラジアンとみなして対応する三角関数を計算します。 （sin(45deg)、sin(.125turn)、sin(3.14159 / 4)はいずれも約.707で同じ値になります。） 戻り値は<number>で、 戻り値の型は入力計算式の型と一貫性を持たせます。 sin()とcos()は常に−1〜1の範囲の数を返し、 tan()は−∞〜+∞のいずれの数も返します。 （§ 10.9 型チェックで数式関数の∞処理詳細あり。）

asin(A)、acos(A)、atan(A)関数は 「arc」または「逆」三角関数であり、 対応する通常の三角関数の逆関数を表します。 どれも1つの計算式を受け取り、 それは<number>でなければなりません。 計算結果をラジアン数とみなし <angle>を表します。戻り値の型は入力計算式の型と一貫性を持たせます。 asin()の角度は[-90deg, 90deg]に、 acos()の角度は[0deg, 180deg]に、 atan()の角度は[-90deg, 90deg]に正規化されます。

atan2(A, B)関数は 2つのカンマ区切り計算式 A, B を受け取ります。 A, Bは<number>、<dimension>、<percentage>のいずれにもなれますが、 型の一貫性がとれていない場合は無効です。 この関数は正のX軸と点(B,A)のなす<angle>を返します。 戻り値の型は入力計算式の型と一貫性を持たせます。 返される角度は(-180deg, 180deg]の範囲（-180degより大きく180deg以下）に正規化されます。

注: atan2(Y, X)は 一般的にはatan(Y / X)と同じですが、 対象点が負成分を含む場合はより正確な値を返します。 atan2(1, -1)（点(-1, 1)）は135degを返し、 atan2(-1, 1)（点(1, -1)）は-45degを返します。 一方、atan(1 / -1)やatan(-1 / 1)はいずれも -45degとなります（内部計算がどちらも-1になるため）。

10.4.1. 引数の範囲

sin(A)、cos(A)、tan(A)で Aが無限大の場合、結果はNaNです。 （§ 10.9 型チェックで数式関数のNaN処理詳細あり。）

sin(A)やtan(A)で Aが0⁻の場合、結果は0⁻です。

tan(A)でAが漸近値（90deg、270degなど）の場合、 数値結果は実装依存です。 実装がこれらの入力を正確に表現できる場合は できるだけ 90deg + N*360degで+∞を、 -90deg + N*360degで−∞を返すべきですが、 実装が正確に表現できない場合は 実装可能な最も近い近似値として最も適切な数値結果を返します。 著者はtan()がこれら入力で特定の値を返すことに依存してはなりません。

asin(A)やacos(A)で Aが-1未満または1より大きい場合、結果はNaNです。

acos(A)で Aがちょうど1の場合、結果は0です。

asin(A)やatan(A)で Aが0⁻の場合、結果は0⁻です。

atan(A)で Aが+∞なら結果は90deg、 −∞なら-90degです。

atan2(Y, X)では、 すべての特殊な引数の組み合わせに対して下表の通りです：

注: これらの挙動は ほとんどのプログラミング言語の「標準的」定義に合わせており、 とくにJSの実装と一致することを意図しています。

10.5. 指数関数: pow()、sqrt()、hypot()、log()、exp()

指数関数—pow()、sqrt()、hypot()、log()、exp()—は、それぞれの引数で様々な指数演算を行います。

pow(A, B)関数は 2つのカンマ区切りの計算式 A, B を受け取り、 両方とも<number>でなければならず、 AをB乗した結果を返します。 戻り値は<number>です。 入力の計算式は型の一貫性が取れていなければ無効になり、 結果の型は一貫した型となります。

sqrt(A)関数は 1つの計算式を受け取り、 それは<number>でなければなりません。 値の平方根を返します。 戻り値は<number>であり、型は入力計算式の型と一貫性を持たせます。 （sqrt(X)とpow(X, .5)はほぼ同じですが、 エラー処理が一部異なります。sqrt()はよく使われるため便宜上用意されています。）

hypot(A, …)関数は 1つ以上のカンマ区切り計算式を受け取り、 各計算式を成分とするN次元ベクトルの長さを返します。 （つまり、引数の2乗和の平方根です。） 引数計算式は<number>、<dimension>、<percentage>のいずれにもなれますが、 型の一貫性が取れていなければ無効です。 結果の型は一貫した型となります。

log(A, B?)関数は 1つまたは2つの計算式（対数化する値とその底。省略時はe）を受け取り、 どちらも<number>でなければなりません。 戻り値はAのB底対数であり、 <number>型で戻され、型は入力計算式の型と一貫性を持たせます。

exp(A)関数は 1つの計算式（<number>でなければならない）を受け取り、 pow(e, A)と同じ値を返します。 戻り値は<number>型で、型は入力計算式の型と一貫性を持たせます。

:root {
  --h6: calc(1rem * pow(1.5, -1));
  --h5: calc(1rem * pow(1.5, 0));
  --h4: calc(1rem * pow(1.5, 1));
  --h3: calc(1rem * pow(1.5, 2));
  --h2: calc(1rem * pow(1.5, 3));
  --h1: calc(1rem * pow(1.5, 4));
}

10.5.1. 引数の範囲

pow(A, B)で、 Aが負かつ有限、Bも有限なら Bは整数でなければならず、そうでない場合は結果はNaNです。

AまたはBが無限大または0の場合は 以下の表の通りです：

sqrt(A)で Aが+∞なら結果は+∞。 Aが0⁻なら結果は0⁻。 Aが0未満なら結果はNaN。

hypot(A, …)で 入力のいずれかが無限大なら結果は+∞。

log(A, B)で Bが1または負なら結果はNaN。 Bが0より大きく1未満、または1より大きい場合は有効。 Aが負なら結果はNaN。 Aが0⁺または0⁻なら結果は−∞。 Aが1なら結果は0⁺。 Aが+∞なら結果は+∞。

exp(A)で Aが+∞なら結果は+∞。 Aが−∞なら結果は0⁺。

（§ 10.9 型チェックで数式関数のNaNや無限大の扱い詳細あり。）

10.6. 符号関連関数: abs()、sign()

符号関連関数—abs()とsign()—は、引数の符号に関する各種関数を計算します。

abs(A)関数は 1つの計算式 A を受け取り、 Aの絶対値を返します。 戻り値は入力と同じ型です。 Aの数値が正または0⁺ならAそのもの、 それ以外は-1 * Aです。

sign(A)関数は 1つの計算式 A を受け取り、 Aの数値が負なら−1、正なら+1、0⁺なら0⁺、0⁻なら0⁻を返します。 戻り値の型は<number>で、入力計算式の型と一貫性を持たせます。

注: これらの関数はいずれも 引数の完全に単純化／解決済みの値で動作します。 そのため一見直感に反する結果になる場合があります。 例えば10%は 解決先によって正にも負にもなり得ます。 例：background-positionでは 背景画像がエリアより大きい場合 正のパーセンテージは負の長さに、 逆も同様です。 したがってsign(10%)は 解決方法によって1にも-1にもなります！ （またはゼロ長さに対して解決されれば0にもなります。）

10.7. 数値キーワード

計算式内のキーワードは リテラルで表現しにくい値へのアクセスを提供します。 各キーワードは値・型・解決タイミングを定めます。

10.7.1. 数値定数: e、pi

三角関数・指数関数で多くの複雑な数値演算はできますが、 いくつかの計算は手作業で組み立てる必要があり、 その際よく使われる定数（eやπなど）があります。

著者がこれらの定数の桁を手入力しなくてもいいように、 いくつかは直接キーワードとして提供されています：

e

自然対数の底。約2.7182818284590452354。

pi

円周率。約3.1415926535897932。

これらのキーワードはどちらも<number>であり、 パース時に解決されます。

注: これらのキーワードは計算式内でのみ使用可能です。 例：calc(pow(e, pi) - pi)やmin(pi, 5, e)など。 計算式外では他のキーワード同様扱われます： animation-name: pi;は"pi"というアニメーションを指し、 line-height: e;は無効です （line-height: 2.7のようにはならず、 line-height: calc(e);は有効）。

10.7.2. 特殊数値定数: infinity、-infinity、NaN

計算式または計算式の部分木が無限大やNaNになった場合、 数値で表現できなくなります。 こうした特殊値のシリアライズを容易にするため、 以下の追加定数が定義されています：

infinity

正の無限大（+∞）

-infinity

負の無限大（−∞）

NaN

NaN（非数）

これらはすべて<number>であり、 パース時に解決されます。

CSSキーワードの通常のルール通り、 これらはASCII大文字小文字を区別しません。つまりcalc(InFiNiTy)も有効です。ただしNaNはこの正準表記でシリアライズされる必要があります。

注: これらのキーワードも<number>なので、 例えば無限大の長さが必要な場合は calc(infinity * 1px)のような式が必要です。

注: これらの定数は主に 無限大やNaN値のシリアライズを簡単・明示的にするために定義されていますが、 最大値の意味で使うこともできます。 これはまれですが、必要な場合は infinityの方が 非常に大きな数字を書くより意図が明確です。

10.7.3. 数値変数

他の仕様で、特定の文脈で計算式内で使える追加キーワードを定義できます。 例：相対色構文では 各カラーチャンネルの値を<number>として表すカラーチャンネルキーワードが定義されています。

このようなキーワードを定義する仕様は 各キーワードごとに次を定義しなければなりません：

• その値

• その型（<number>、<length>など）

• 解決タイミング（パース時・算出値時・使用値時）

10.8. 構文

数式関数の構文は以下の通りです：

<calc()>  = calc( <calc-sum> )
<min()>   = min( <calc-sum># )
<max()>   = max( <calc-sum># )
<clamp()> = clamp( [ <calc-sum> | none ], <calc-sum>, [ <calc-sum> | none ] )
<round()> = round( <rounding-strategy>?, <calc-sum>, <calc-sum>? )
<mod()>   = mod( <calc-sum>, <calc-sum> )
<rem()>   = rem( <calc-sum>, <calc-sum> )
<sin()>   = sin( <calc-sum> )
<cos()>   = cos( <calc-sum> )
<tan()>   = tan( <calc-sum> )
<asin()>  = asin( <calc-sum> )
<acos()>  = acos( <calc-sum> )
<atan()>  = atan( <calc-sum> )
<atan2()> = atan2( <calc-sum>, <calc-sum> )
<pow()>   = pow( <calc-sum>, <calc-sum> )
<sqrt()>  = sqrt( <calc-sum> )
<hypot()> = hypot( <calc-sum># )
<log()>   = log( <calc-sum>, <calc-sum>? )
<exp()>   = exp( <calc-sum> )
<abs()>   = abs( <calc-sum> )
<sign()>  = sign( <calc-sum> )
<calc-sum> = <calc-product> [ [ '+' | '-' ] <calc-product> ]*
<calc-product> = <calc-value> [ [ '*' | '/' ] <calc-value> ]*
<calc-value> = <number> | <dimension> | <percentage> |
               <calc-keyword> | ( <calc-sum> )
<calc-keyword> = e | pi | infinity | -infinity | NaN
<rounding-strategy> = nearest | up | down | to-zero

いくつかの文脈では、追加の<calc-keyword>値が有効として定義されることがあります。 （例えば相対色構文では、適切なチャンネルキーワードが許可されます。）

さらに、空白は+および -演算子の両側に必要です。 （*および/演算子はその前後に空白なしで使うことができます。）

上記のいくつかの数式関数には、<calc-sum>引数に含められる内容に追加の制約があります。 詳細は各関数の定義を参照してください。

UAは少なくとも32個の計算式や<calc-value>項、 および少なくとも32階層の入れ子（括弧や関数）をサポートしなければなりません。 任意個数の引数を受け付ける関数（例：min()）についても、少なくとも32個の引数をサポートしなければなりません。 計算式がサポート数を超える項・引数・入れ子を持つ場合は無効として扱わなければなりません。

10.9. 型チェック

数式関数は様々な型を持ち得ます。 例えば<length>、<number>など、 含まれる計算式によって決まります（下記参照）。 その型が許される任意の場所で使用できます。

また、数式関数が<number>に解決される場合、 <integer>しか受け付けない箇所でも使えます。 このとき値は解決時に最も近い整数に丸められます。

演算子は引数に基づき部分式を形成し、それぞれ型を持ちます。

注: 以前の仕様では 乗算・除算がとれる引数を制限していました。 これは（1px * 1emのような<length>²などの）複雑な中間型の生成や 0除算の構文時検出を避けるためでしたが、 本仕様ではこれらの制約を緩和しています。

数式関数自身も 内部の計算式に従って型を持ちます：

calc()

abs()

内部計算式の型。

min()

max()

clamp()

hypot()

round()

mod()

rem()

カンマ区切りの計算式の型を加算した結果。

asin()

acos()

atan()

atan2()

«[ "angle" → 1 ]»。

sign()

sin()

cos()

tan()

pow()

sqrt()

log()

exp()

«[ ]»（空マップ）。

上記のいずれかで型が失敗の場合、 数式関数は無効です。

数式関数は、 その型がどの生成物に一致するかに応じて、 <number>、<length>、<angle>、<time>、 <frequency>、<resolution>、<flex>、<percentage>のいずれかに解決されます。 （これらのカテゴリは相互に排他的です。） いずれにも一致しない場合、 数式関数は無効です。

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

注: <percentage>が <number>に対して相対的な場合 （例：opacityなど）は これらの数値と合成不可です。opacity: calc(.25 + 25%)は無効です。 これを許すと「単位の代数」処理に深刻な問題が生じ （<dimension>の乗除を許すなど）、 これまでの事例でも新規機能を提供しないためです。 （例：opacity: 25%とopacity: .25は同じ意味であり、単なる構文変換です。） ただし、opacity: calc(100% / 3);のような他の演算は有効です。

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

注: <number>が使用値時に<length>になるプロパティが少数存在します （特にline-heightやtab-size）。 しかし<number>がcalc()内で「長さ的」になることはありません。 常に<number>のままです。

注: Quirks Mode [QUIRKS]では、 通常は<length>しか受け付けないプロパティが <number>も受け付けるようになり、これをpx長さとして解釈します。 単位なしゼロと同様、 これは数式関数の構文解析や挙動には影響しませんが、 数式関数が<number>に解決される場合、 Quirks Modeでは有効となり、その結果がpx長さとして解釈されることがあります。

10.9.1. 無限大・NaN・符号付きゼロ

数式関数はIEEE-754セマンティクスに従い、 正・負ゼロ、正・負無限大、NaN（非数）を認識します。

ただし、これらの概念は計算式ツリー内でのみ保持されます。 トップレベル計算式 （他の数式関数に直接ネストされていない数式関数） がこれらの特殊値になる場合、下記の通り「検閲」され標準的な表現値に変換されます。

符号付きゼロ（ここでは0⁺または0⁻で示す）は CSSで直接記述できません。0、+0、-0はいずれも通常の「符号なし」ゼロとなり、 これらのルールでは正（0⁺）とみなされます。

符号付きゼロは次のように生成されます：

• 負のゼロ（0⁻）は、乗算または除算で 負数が1つだけある状態でゼロになる場合 （例：-5 * 0や1 / -infinity）に生成されます。

• 0⁻ + 0⁻や0⁻ - 0⁺は0⁻を生成します。 それ以外の加減算でゼロになる場合は0⁺となります。

• 0⁻を正数（0⁺含む）で乗除すると負（0⁻または−∞）、 0⁻を負数で乗除すると正になります。

  （つまり0⁻との乗除は通常の符号規則に従います。）

• 0⁺と0⁻を比較した場合、0⁻は0⁺より小さいとみなされます。 例：min(0⁺, 0⁻)は0⁻、max(0⁺, 0⁻)は0⁺、 clamp(0⁺, 0⁻, 1)は0⁺となります。

• 一部の数式関数の特定の引数組み合わせで0⁻が生成されます（例：round(-1, infinity)）。 それ以外のゼロ生成は正のゼロ（0⁺）となります。

符号付きゼロはトップレベル計算式からは抜け出せません。最終的に「符号なし」ゼロに変換されます。

無限大 （ここでは+∞または−∞で示す）は 数式定数のinfinityや-infinityで直接書くこともできますし、 計算結果としても発生します：

• 値をゼロで除算すると符号規則に従って+∞または−∞になります。

• ±∞の加減算は適切な無限大を生成します。

• 任意の値と±∞の乗算は適切な無限大を生成します。

• 任意の値を±∞で除算するとゼロになります。

• 一部の数式関数の特定の引数組み合わせで無限大が生成されます（例：pow(0, -1)は+∞）。

注: 以下のNaN生成規則は 無限大生成規則より優先されます。

無限大もトップレベル計算式からは抜け出せません。 文脈で許される最小または最大値にクランプされます（§ 10.12 範囲チェック参照）。

NaN（非数, "not a number"の略）は 値の定義ができない特定の演算結果です。 数式定数のNaNで直接記述したり、 計算結果としても発生します：

• 0/0、±∞/±∞、0*±∞、+∞+−∞、同符号の無限大同士の減算はNaNを生成します。

  これらの規則は他のどんな規則よりも優先されます。 例：0 / 0は+∞ではなくNaNです。

• 一部の数式関数の特定の引数組み合わせでNaNが生成されます（例：asin(2)はNaN）。

• 少なくとも1つのNaN引数を持つ任意の演算はNaNを生成します。

NaNもトップレベル計算式からは抜け出せません。 ゼロ値に変換されます。

10.10. 内部表現

内部表現としての数式関数は、計算ツリーです。 このツリーでは、分岐ノードは 演算子ノード であり、 数式関数（Min、Cos、Sqrtなど）や、 計算式の演算子（Sum、Product、Negate、Invert、これを calc-operatorノードと呼ぶ）に対応します。 葉ノードは、数値（数、寸法、パーセンテージなど）または数値型に解決される非数式関数です。

数式関数は関数ごとに 計算ツリーに変換されます：

calc()

内部表現は、引数をcalc()関数の 計算式の構文解析結果です。

その他の数式関数

その関数名と一致するoperatorノードが内部表現となります。 子ノードは各引数を計算式として構文解析したものとなり、順番は引数の順です。

10.10.1. 単純化

内部表現としての数式関数は、可能な限り積極的に単純化されます。 標準的な代数的単純化（乗算の分配、同単位の合成など）を用います。

（@font-face記述子など）プロパティ以外の文脈では、 数式関数は 指定値として単純化されます。

10.11. 算出値

算出値としての数式関数は、その計算ツリーを 単純化したものです。 ここでは算出値時点で得られるすべての情報を使います。 （例：emからpxへの変換比、プロパティによるパーセンテージの解決方法など。）

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

計算ツリーは 使用値時にも再度単純化され、 使用値時の情報により 数式関数は必ず単一の数値にまで簡約されます。

テーブルのセルやテーブル要素の幅・高さ計算の複雑さにより、 パーセンテージとゼロでない長さを混ぜた数式（幅・高さ）を テーブルカラム、カラムグループ、行、行グループ、セルにauto・fixedレイアウト両方で使う場合、 auto指定とみなさなければなりません。

10.12. 範囲チェック

数式関数内では構文解析時の範囲チェックは行われないため、 範囲外値も宣言を無効にはしません。 ただし、トップレベル計算式の計算結果は 対象文脈で許される範囲にクランプされなければなりません。 クランプは算出値で可能な限り行い、 それでも不十分な場合は使用値でクランプします。 （指定値にはクランプしません。）

注: calc()を受け付けるすべての文脈で、許容値は必ず閉区間で定義されていなければなりません。

注: 定義上、±∞はどのプロパティの許容範囲外であり、最小/最大値にクランプされます。 無限大をキーワード値として明示的に指定できるプロパティ （例：animation-iteration-count）でも ±∞は最終的にクランプされます。 数式関数はキーワード値には解決されないため、 プロパティの数値部分はやはり最小/最大値を持ちます。

さらに、数式関数で<number>に解決されるものを<integer>しか受け付けない場所で使った場合、 算出値・使用値は 上記クランプと同様に最も近い整数に丸められます。

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

10.13. シリアライズ

このセクションはまだ議論中です。

プロパティ以外の文脈 （例：@font-face記述子など）で使われる場合、数式関数は指定値として単純化されます。

シリアライズの詳細は[CSSOM]を参照。

10.14. 数式関数の合成

補間としての数式関数の合成は、 他の数値や数値関数との場合も含めて V_result = calc((1 - p) * V_A + p * V_B) で定義されます。 （単純化によってより短く・簡単な式になることがあります。）

加算としての数式関数の合成も、 他の数値や数値関数との場合も含めて V_result = calc(V_A + V_B) で定義されます。 （単純化によってより短く・簡単な式になることがあります。）

付録A: リスト値プロパティの連携

リスト値プロパティの中には、連動する効果を持つものがあります。 それぞれの値リストの項目が個々の効果に適用され、 各プロパティの同順位の項目は同じ効果を指します。 しばしば、連動する値はリスト値のショートハンドプロパティで まとめて指定することもできます。

代表的な例がリスト値background-*プロパティで、 複数の背景画像レイヤーを指定できます。 各プロパティで画像のサイズ・タイル・配置等を制御する場合、 そのリストのN番目の項がN番目の背景画像に適用されます。

連携リストプロパティグループは 連結値リストを生成します。 各項目ごとにグループ中の全プロパティから値を集め、 それらをまとめて1つの効果（例：背景画像レイヤーやアニメーション）として使います。 連結値リストは次のように組み立てられます：

• 連結値リストの長さは ある1つの連携リストプロパティ （連携リスト基底プロパティ）の 値リストの項目数で決まります。 （背景の場合はbackground-imageプロパティです。）

• 連結値リストのN番目の値は、 各連携リストプロパティの使用値について N番目の値を集めて構成します。

• 連携リストプロパティに値が多すぎる場合、 末尾の余分な値は使用されません。

• 連携リストプロパティに値が少なすぎる場合は、 値リストを繰り返して使用値を増やします。

• 連携リストプロパティの算出値はこうした切り捨てや繰り返しの影響を受けません。

付録B: IANA考慮事項

about:invalid URLスキームの登録

このセクションはabout:invalid URLを定義・登録します。 [RFC6694]で定義された登録手続きに従っています。

この登録の公式記録は http://www.iana.org/assignments/about-uri-tokens/about-uri-tokens.xhtml で確認できます。

付録C: クワーキーレングス

CSSがクワークスモードでパースされているとき、<quirky-length>は、特定のプロパティでのみ有効な<length>型の一種です：

• background-position

• border-spacing

• border-top-width

• border-right-width

• border-bottom-width

• border-left-width

• border-width

• bottom

• clip

• font-size

• height

• left

• letter-spacing

• margin-right

• margin-left

• margin-top

• margin-bottom

• margin

• max-height

• max-width

• min-height

• min-width

• padding-top

• padding-right

• padding-bottom

• padding-left

• padding

• right

• text-indent

• top

• vertical-align

• width

• word-spacing

これは、これらのプロパティを含む、または参照するプロパティ（例：backgroundのショートハンドや 関数記法（例：calc()）の内部など）では有効ではありません。 ただし、rect()関数がclipプロパティ内で使われる場合は例外です。

また、<quirky-length>は<length>として @supportsルール内で該当プロパティをパースする際は有効でなければなりませんが、 CSS.supports() メソッドで使う場合はそのプロパティに対して有効ではありません。

<quirky-length>は、構文的には<number-token>と同一であり、 同じ値のpx長さとして解釈されます。

（つまり、Quirks Modeでは該当プロパティのすべてのpx長さを単位なしで記述でき、単位なしゼロ長さと同様の扱いになります。）

謝辞

まず最初に、編集者は前レベルのモジュールへのすべての貢献者に感謝します。

次に、Level 4の改善に寄与したコメントや提案をくださった Anthony Frehner, Emilio Cobos Álvarez, Koji Ishii, Noam Rosenthal, Xidorn Quan 各氏にも謝意を表します。

変更点

最近の変更

（これはLevel 3以降の追加点のサブセットです。）

2023年12月18日WD以降の主な変更：

• none値をclamp()に追加。 (Issue 9713)

• パーセンテージの型推論の扱いを全般的に修正。 (Issue 10017)

• ビューポートパーセンテージ長さがoverflow: scrollに依存するよう復元し、さらにscrollbar-gutterへの依存を追加し、100単位が本当に初期コンテインイングブロックと一致できるようにした。 (Issue 6026)

• Aの型が<number>の場合、round()のB引数を省略可に。 (Issue 9668)

2023年10月27日WD以降の主な変更：

• 既定ビューポートパーセンテージ単位をlarge viewport-percentage unitsに固定。「既定ではデータ損失を避ける」という原則に反するものの、既存の相互運用性と、Web互換性による制約があるとの推定を踏まえたもの。 (Issue 6452)

• CSS文法生成ブロックの明文化。 (Issue 2921)

• パーセントエンコードURLの文字エンコーディングの明確化。 (Issue 9301)

2023年4月6日WD以降の主な変更：

• mix()を [css-values-5]に移動。 (Issue 9343)

• 色型を非加算型と定義。 (Issue 8576)

• 非プロパティ文脈は数式関数を指定値として扱うことを明記。 (Issue 7964)

• CSSからのURLは常にUTF-8で送信されることを明記。 (Issue 9301)

• 加算／累積時は加算／累積できない場合は2番目の値を使うよう修正。 (Issue 9070)

• フォント相対長さは font-*プロパティで使用時は常に親要素に対して解決されることを明記。 (Issue 8169)

• 引数1つのmin()およびmax()の単純化。 (Issue 9559)

2022年10月19日WD以降の主な変更：

• 「§ 2.6 関数記法の定義」を追加し、関数記法構文の定義方法を明文化。 (Issue 2921)
• border幅としてのsnapのアルゴリズム追加。 (Issue 5210)
• 文法・算出値の明確化（mix()）。 (Issue 8096)
• tan()の漸近値での挙動を未定義化。 (Issue 8527)
• 負の<resolution>値は定義上範囲外であることを明記。 (Issue 8532)
• 引数省略のmix()が有効であることを明確化。 (Issue 8556)
• トップレベル計算式で範囲クランプが行われることを明示。 (Issue 8158)
• <url()>および<src()>（および<url>）の定義を追加。
• フラグメントのみのURLをツリー作用範囲参照として言い換え。 (Issue 3320)

2021年12月16日WD以降の主な変更：

• url()のlocal url flag時の解決先を現在のノードツリーに変更（文書のベースURLの変更にかかわらず）。 (Issue 3320)
• NaNが数式関数から抜ける場合の検閲をinfinity→ゼロに変更。 (Issue 7067)
• 付録A: リスト値プロパティの連携を追加、このパターンの参照を容易に。 (Issue 7164)
• mix()は 宣言値全体でのみ有効に制限。 (Issue 6700)
• Fetch用語の最新化。 (Fetch PR 1413, CSS PR 7160)
• フォント相対長さはテキストシェーピングなしで計算されることを明記。
• 空URLのシリアライズはurl("")と定義。 (Issue 6447)
• <position>の指定値のシリアライズを定義。 (Issue 2274)
• numberの定義の修正で、小数点＋指数表記の組合せを許可。 (Issue 7248)
• 各関数のtypeは«[ "number" → 1 ]»でなく空マップを返すよう修正。 (Issue 7486)
• line-heightのUA制限時のlh/rlhへの影響を明記。 (Issue 3257)
• <function()>記法で関数記法を指すことを定義。 (Issue 5728)

2021年10月16日WD以降の主な変更：

• *vi および *vb 単位が、その要素自身の算出済みwriting modeに基づいて解決されるように変更。 （Issue 6873）
• § 4.5.4 URL処理モデルを追加し、CORS等との統合を定義。 (Issue 562)
• ビューポートパーセンテージ長さの挙動がインターフェイス変化の種類（AとB）へ逆に割り当てられていた点を修正。スクロールなどの頻繁な操作に伴い、大きなレイアウト変化がユーザーを混乱させるようなインターフェイス変化は 前者 (A) 後者 (B) に分類。
• 安定状態が十分に保たれるインターフェイス変化（再レイアウトが有益なもの）は 後者 (B) 前者 (A) に分類。
• calc()の項数・引数・入れ子数の最小値を32と明記。 (Issue 3462)
• mod(-0, infinity)はNaNを返すと定義。 (Issue 4723)
• toggle()とattr()を Level 5に移動。

2021年9月30日WD以降の主な変更：

• rex, rcap, rch、およびric単位を追加。
• toggle()でセミコロンを使うよう変更し、mix()と揃えた。 (Issue 6701)
• calc()の定義における文言の誤りを修正。 (Issue 6506)
• <quirky-length>の定義を[QUIRKS]から取り込んだ。 (Issue 6100)

2021年7月15日WD以降の主な変更：

• mix()記法を追加（補間値用）。
• <integer>、 <number>、 <percentage>、 <length> の各型での補間・算出値ルールを明文化。
• 非ゼロ長さがある場合のみ、パーセンテージ＋長さの混合で表のセルがautoサイズになることを明記。

2020年11月11日WD以降の主な変更：

• 色の補間参照を[CSS-COLOR-4]に更新（以前は[CSS-COLOR-3]）。
• svh、svw、svi、svb、svmin、svmax small viewport-percentage units、 lvh、lvw、lvi、lvb、lvmin、lvmax large viewport-percentage units、 dvh、dvw、dvi、dvb、dvmin、dvmax dynamic viewport-percentage unitsを追加。 (Issue 4329とIssue 6113)
• 過度に大きな<angle>値を360degの倍数にクランプ。 (Issue 6105)
• 合成値の範囲チェックのルールをCSS Transitions仕様から移植。 (Issue 6097)
• UA適用最小フォントサイズはfont-sizeの使用値にのみ適用され、フォント相対長さの解決には影響しないと明記。 (Issue 5858)
• min()やmax()のパーセンテージが部分的に単純化可能なことを明確化。 (Issue 6293)

レベル3以降の追加点

CSS Values and Units Level 3以降の変更：

• 数値の精度／範囲を明示的に未定義とした。
• 値型ごとの補間ルールを追加し、それぞれの算出値を明確化。
• 色の補間を[CSS-COLOR-4]参照に更新。

CSS Values and Units Level 3以降の追加：

• <dashed-ident>型を定義。
• <ratio>型を定義。
• src()を<url>型に追加。
• vi、vb、ic、cap、lh およびrlh長さ単位を追加。
• svh、svw、svi、svb、svmin、svmaxのsmall viewport-percentage unitsや、dvh、dvw、dvi、dvb、dvmin、dvmaxのdynamic viewport-percentage unitsを追加。
• x単位のdppxエイリアスを追加。
• min()、max()、 clamp()の比較関数を追加。
• round()、mod()、rem()、sin()、cos()、tan()、asin()、acos()、atan()、atan2()、pow()、sqrt()、hypot()、log()、exp()、abs()、sign()の各種数学関数を追加。
• e、pi、 infinity、-infinity、NaN定数を calc()で利用可能に。
• 単位の代数をcalc()に追加し、寸法の乗除を許可。
• calc()で<integer>が必要な箇所に小数を使った場合、自動的に最も近い整数に丸める仕様を追加。
• シリアライズの定義を数式関数に追加。
• 連携リストプロパティグループの汎用的な定義を追加し、 backgroundプロパティの連携動作の参照を容易にした。

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

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

本仕様はurl()およびsrc()関数（<url>）を定義しており、 CSSからネットワークリクエストを可能にします。 どの機能で使われるかによって、 ユーザーがネットワーク上のリソースにアクセスできるかどうかが露呈したり、 その内容（スタイルシート内のルール、画像サイズ、フォントのメトリクスなど）が露呈する可能性があります。 また、URL経由でデータを持ち出すことも可能です。

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

本仕様はユーザーの画面サイズ（ビューポートパーセンテージ長さ）、デフォルトフォントサイズ、 そしてユーザーのシステムにどのフォントがあるかなど一部の情報（フォント相対長さ）を 露呈する単位を定義します。

本仕様はurl()およびsrc()関数（<url>）を定義しており、 CSSからネットワークリクエストを可能にします。 どの機能で使われるかによって、 ユーザーがネットワーク上のリソースにアクセスできるかどうかが露呈したり、 その内容（スタイルシート内のルール、画像サイズ、フォントのメトリクスなど）が露呈する可能性があります。 また、URL経由でデータを持ち出すことも可能です。