1. はじめに
[css-variables-1]仕様は、「カスケーディング変数」の概念を定義しました。 これはカスタムプロパティの値から作られる著者定義の変数であり、 var()関数を使って任意の他のプロパティに代入できます。
本仕様は、これに関連しつつもより単純な環境変数の概念を定義します。 「カスケーディング変数」は、対応するカスタムプロパティの値が異なるとページ内で変化しますが、 環境変数は特定のドキュメント全体で「グローバル」であり、値はどこでも同じです。 env()関数を使ってその値を任意の場所に代入でき、 これはvar()関数と似ています。
これらの「グローバル」変数は、カスケーディング変数と比較して利点と欠点の両方があります：
-
多くの変数はページ全体で変化しないことを想定しています。 それらはテーマを設定したり、特定の数値の補助として使われます。 こうした用途には環境変数をカスタムプロパティの代わりに使うことで、 適切な意図を伝えることができます。 これはドキュメントの著者（特に複数人で編集する場合）にも、 ユーザーエージェントにも有益であり、 UAはこれらの変数を最適な方法で保存できます。
-
環境変数は特定の要素の値に依存しないため、 参照元となる要素が明示できない場所、たとえば@mediaルール内などでも使用できます。 こうした場所ではvar()関数は使えません。
-
ユーザーエージェント自身からの情報（例: ビューポートの余白など、デフォルトでレイアウトを避けるべき領域）は env()を介して取得できますが、 var()は要素依存なので、 こうした情報を流し込むのには適切ではありませんでした。
ほとんどの環境変数は単一の値を持ちますが、
一部は「インデックス付き」で複数の値を一度に表現します。
たとえば、viewport-segment-*変数では複数のペインのサイズや位置などです。
こうしたインデックス付き変数を参照するには、変数名の後に1つ以上の整数を付けて指定します。
例：viewport-segment-width 1 0のようにして、
可能なリストやグリッドから1つの値を選択します。これは従来のプログラミング言語でvalues[0]のように要素を取り出すのに似ています。
2. 環境変数
CSSの環境変数は、<declaration-value>（0個以上のCSSトークンの並び、ほぼすべてのトークンが使用可能）に関連付けられた名前であり、 カスタムプロパティに似ています。環境変数はユーザーエージェントやユーザーによって定義できます。 （後者の場合、名前は<custom-property-name>となり、カスタム識別子の標準に従い`--`で始まります。）
UA定義の環境変数のセットはスクリプトから見えるべきか？
もしそうなら、これらを公開するためのDocument上のAPIを定義すること。
著者が環境変数を追加する方法を定義すること。 できればJSとCSSの両方から。 CSSルールとJS定義の混在は簡単に混乱を招くことに注意（CSSFontFaceRuleとFontFaceの例のように）
以下のUA定義環境変数が公式に定義されており、必ずサポートされなければなりません。 追加のUA定義環境変数は、このリストに追加されるまでサポートしてはなりません。
2.1. セーフエリアインセット変数
| 名前 | 値 | 次元数 |
|---|---|---|
| safe-area-inset-top | <length> | 0（スカラー） |
| safe-area-inset-right | <length> | 0（スカラー） |
| safe-area-inset-bottom | <length> | 0（スカラー） |
| safe-area-inset-left | <length> | 0（スカラー） |
セーフエリアインセットは、ビューポートの端からの上・右・下・左のインセットで矩形を定義する4つの環境変数です。矩形ディスプレイの場合はすべて0ですが、非矩形ディスプレイの場合、ユーザーエージェントが選択した矩形を形成し、その矩形内のすべてのコンテンツが表示され、いずれかのインセットを減らすと非矩形ディスプレイの特性により矩形内の一部コンテンツが見えなくなるようにします。これにより、制作者は必要なコンテンツのレイアウトをセーフエリア内に限定できます。
2.2. セーフエリア最大インセット変数
| 名前 | 値 | 次元数 |
|---|---|---|
| safe-area-max-inset-top | <length> | 0（スカラー） |
| safe-area-max-inset-right | <length> | 0（スカラー） |
| safe-area-max-inset-bottom | <length> | 0（スカラー） |
| safe-area-max-inset-left | <length> | 0（スカラー） |
セーフエリア最大インセットは環境変数で、セーフエリアインセット変数と連動しています。 セーフエリアインセット変数が動的値であるのに対し、 最大インセットは静的値であり、 動的なUAインターフェイスが格納されたときの 対応する動的値の最大値を表し、 レイアウトビューポートサイズが大きいビューポートサイズとなります。
2.3. ビューポートセグメント変数
| 名前 | 値 | 次元数 |
|---|---|---|
| viewport-segment-width | <length> | 2 |
| viewport-segment-height | <length> | 2 |
| viewport-segment-top | <length> | 2 |
| viewport-segment-left | <length> | 2 |
| viewport-segment-bottom | <length> | 2 |
| viewport-segment-right | <length> | 2 |
ビューポートセグメントは、ビューポートの論理的に独立した領域の位置とサイズを定義する環境変数です。ビューポートが1つ以上のハードウェア機能（折り目や複数ディスプレイ間のヒンジなど）によって分割されると、セグメントが作られます。 セグメントは、制作者が論理的に独立したものとして扱えるビューポートの領域です。
ビューポートセグメント環境変数は2次元を持ち、ハードウェアによる分割で作られる2次元グリッド内のx・y位置を表します。 左端のセグメントはx=0、右隣はx=1となり、同様に上端はy=0などとなります。
注: 特定のハードウェア構成では、仕切り自体がビューポート内で論理的な空間を占める場合があります。仕切りのサイズは、ビューポートセグメントの位置から計算できます。
これらの変数は、2つ以上のセグメントがある場合のみ定義されます。 ハードウェアによるビューポート分割がない場合はビューポート単位を使うべきです。そうしないと、複数セグメント対応デバイスで意図通りに表示されません。
2.4. 推奨テキストズーム
| 名前 | 値 | 次元数 |
|---|---|---|
| preferred-text-scale | <number> | 0（スカラー） |
preferred-text-scale 環境変数は、ユーザーが好むテキスト拡大率（OSやUAの「標準」フォントサイズに対する調整値）を表します。 （text-size-adjustが効果を持つデバイスでは、 text-size-adjust: autoによって適用される拡大率です。）
たとえば、text-size-adjust:autoでテキストサイズが2倍になる場合は、 env(preferred-text-scale)は2となります。
注: pem単位はこの情報と同じ意味です。1emはcalc(1em * env(preferred-text-scale))と完全に等価です。 直接サイズ指定したい場合は、bsemの方が便利な長さ単位です。
通常、制作者は以下のいずれかを選択します：
-
text-size-adjust: calc(100% * env(preferred-text-scale));と指定し、 ページ内のテキスト全体がユーザーの好みに自動的に拡大されるようにし、必要であれば非テキスト要素もスケールします。
-
またはtext-size-adjust:noneとし、この環境変数やpem単位を統一的に使ってテキストやUIをユーザーの好みにスケールします。
3. 環境変数の利用: env()記法
環境変数の値をCSSコンテキストで代入するには、 env() 関数を使用します：
env() = env( <custom-ident> <integer [0,∞]>*, <declaration-value>? )
env()関数は、 どの要素のどのプロパティの値の一部としても、また任意のatルールの記述子の値の一部としても、 その他CSS値が許可される様々な場所で利用できます。
-
例えば、MQ構文の任意の部分も置き換えできるべき。
-
セレクタも置き換えできるようにすべきか？
-
ルールレベルでも機能させて、宣言ブロックの再利用のように任意の内容を挿入できるべきか？
env()の最初の引数は、代入される環境変数の名前を指定します。 1つ目の引数に続く整数は、その変数が配列的な環境変数であれば、 その次元に対するインデックスを表します。 カンマの後の引数は、指定されていればフォールバック値となり、 参照された環境変数が存在しない場合に 代入値として使われます。
注: フォールバック値の構文はカスタムプロパティ同様、カンマが使えます。 例：env(foo, red, blue)はred, blueをフォールバック値として定義します。 つまり、最初のカンマ以降、関数の終わりまでがフォールバック値と見なされます。
プロパティが1つ以上のenv()関数を含み、 それらの関数が構文的に正しければ、 パース時点ではプロパティ全体の構文が有効と見なされます。 実際の構文検証は、env()関数が代入された後、計算時に行われます。
記述子が1つ以上のenv()関数を含み、 それらの関数が構文的に正しければ、 パース時点では宣言全体の構文が有効と見なされます。 実際の構文検証は、env()関数が代入された後に行われます。
どのタイミングで代入が行われるか定義すること。 var()の代入よりも前でなければならない。 あるいはenv()の代入をパース時に行い、 未知の変数名なら構文エラーとすべきか？ var()のように計算時に行う理由はとくにない—これはカスタムプロパティの値が継承されてから var()で参照できるようにするためだった。
env()が他に使える場所が判明したら、その代入タイミング・方法も定義すること。
3.1. ショートハンドプロパティにおける環境変数
env()の代入がパース時に行われるなら、これは不要。
env()関数も ショートハンドプロパティに関して var()関数と同様の困難を引き起こします。 env()がショートハンドプロパティで使われた場合、 CSS Variables 1 § 3.2 ショートハンドプロパティにおける変数で定義されたものと同じ効果を持ちます。
4. プライバシーに関する考慮事項
本仕様で定義される環境変数は潜在的にプライバシーに影響しうる情報です。 なぜなら、それらはページで元々利用できなかった追加情報を表しうるためです。 特に、ユーザーがページを閲覧しているデバイスに関する追加情報を 露出することで、フィンガープリントのベクトルとなる可能性があります。
これまでのところ、本仕様で定義された環境変数はCSSWGによるレビューを経て、 公開しても問題ないと判断されています。
5. セキュリティに関する考慮事項
この仕様はデバイスに関する新たな情報の一部を 読み取り専用で提供します。
本仕様で定義される環境変数は、 セキュリティ上機微な情報は何も露出しません。