CSS画像モジュール レベル3

1. はじめに

CSSレベル1および2では、 background-imageプロパティで使われるような画像値は、 単一のURL値でしか指定できませんでした。 このモジュールは2D画像を表現する追加の方法を導入します。 例えばグラデーションとして指定できます。

このモジュールはまた、ラスタ画像の操作、 およびサイズ指定や位置指定など、 画像のような置換要素をCSSレイアウトアルゴリズムで決定されるボックス内で制御するためのいくつかのプロパティも定義します。 また、画像や同様の置換要素のためのCSSの汎用的なサイズ決定アルゴリズムも定義します。

この小節（上記）は規範的ではありません。

1.1. モジュール間の関係

このモジュールは、<image>値型を定義および拡張します。 この型は[CSS-VALUES-3]で定義されています。 また、CSS1およびCSS2のbackground-image、cursor、list-style-imageの定義において、 <url>型を <image>で置き換え、 contentプロパティの値として <image>を<url>の代替として追加します。 CSS2.1以降のCSS仕様では、2D画像が必要な場面で<image>表記を用いることが想定されています。 （例：[CSS3BG]などを参照。）

このモジュールで定義されるプロパティのうち、 image-rendering だけが::first-lineおよび::first-letterに適用されます。

1.2. 値の定義

この仕様は CSSプロパティ定義の規約 （[CSS2]より）および 値定義構文 （[CSS-VALUES-3]より）に従います。 この仕様で定義されていない値型は、CSS Level 2 Revision 1 [CSS2]で定義されています。 他のCSSモジュールがこれらの値型の定義を拡張する場合があります。 例えば、[CSS-VALUES-3]は本モジュールと組み合わせることで initialキーワードをプロパティ値として追加します。

各プロパティ定義に記載された値に加え、 この仕様で定義されたすべてのプロパティは CSS全体キーワードもプロパティ値として受け付けます。 可読性のため明記はしていません。

2. 画像値：<image>型

<image>値型は2D画像を表します。 これはurl参照またはカラグラデーションで指定できます。 その構文は以下の通りです：

<image> = <url> | <gradient>

<image>は多くのCSSプロパティで使用できます。 例としてbackground-image、list-style-image、cursorプロパティなど（これらではプロパティ値内の<url>成分を置き換えます）。

画像が無効となる場合もあります。 例えば<url>が有効な画像形式でないリソースを指していたり、ロードに失敗した場合です。 無効画像は 透明の単色画像として描画され、 自然寸法を持ちません。 ただし、無効画像は 文脈によってはエラー処理の発動条件となります。 例えばlist-style-imageで無効画像の場合、 noneとして扱われ、 list-style-typeが代わりに描画されます。[CSS2]

画像がロード中の場合は ローディング画像となります。 ローディング画像は 無効画像ではありませんが、類似の挙動をします。 つまり、透明の単色画像として描画され、 自然寸法を持たず、 フォールバック描画が提供される文脈ではそれが発動する場合がありますが、 フォールバックリソースのロードは行いません。 また、ローディング画像がすでにロード済みの画像を置換している（例えば文書やスタイルシートの変更による）場合でUAがその情報を追跡しているならば、 既存の画像をローディング画像の代わりに描画し続けることができます。

部分的にロードされた画像（自然寸法は判明しているが画像データが完全には読み込まれていないもの）は、 ローディング画像として扱うか、 データの一部のみで描画された画像として扱うことができます。 例えばUAはインターレースGIFの最初のパスのピクセルデータがロードできた時点で描画を始めたり、 画像ヘッダ（サイズ情報を含む）がパースできた時点で描画し、 データが追加でロードされるごとに描画を更新したりすることがあります。 あるいは、画像全体がロードされるまで待ってから使用する場合もあります。

算出 <image> 値は 指定値であり、そこに含まれる<url>、<color>、 <length>が算出されたものになります。

2.1. 画像参照：url() 記法

画像を指定する最も簡単な方法は、URLで画像ファイルを参照することです。 これはurl()記法で行えます。 この記法は[CSS-VALUES-3]で定義されています。

background-image: url(wavy.png);

UAがURLの内容を画像としてダウンロード、パース、または正常に表示できない場合 （すなわち、画像が完全にデコード可能でない場合）、 それは無効画像として扱われなければなりません。

2.1.1. 参照または画像として曖昧なURL

URLは多くの文脈で多様なリソース型のために使われるため、 その解釈も多様です。 通常はURLが現れる文脈によって リソースの解釈が明らかになりますが、 場合によっては曖昧になることもあります。 例えば、 mask-imageの<url>値がSVGファイルを指している場合などは、 ファイル内の要素参照とも、<image>としても解釈できます。

曖昧画像URLとは、 <url>値であり、 <image>または要素参照のいずれかとして解釈可能なものです。 曖昧画像URLが フラグメントのみのURLである場合は、 要素参照として扱わなければなりません。 それ以外で曖昧画像URLが リソース内の要素で、その文脈に適切な型の要素を指している場合 （例：mask-imageプロパティなら mask要素など）、 要素参照と解釈します。 そうでない場合は<image>として扱われます。

曖昧画像URL概念を使う仕様は、 どの要素がURLの有効な参照先となるかや他の条件を定義しなければなりません。

2.1.2. 画像メタデータ

画像には 解像度や向きなどの レンダリング方法を指定するメタデータが含まれることがあります。 一部の画像フォーマットでは こうしたメタデータをファイル内の柔軟な位置に配置できますが、 画像データの後にメタデータが存在する場合、 UAによる画像の「プログレッシブデコード」や データストリーム中での表示能力が損なわれます。

この問題の影響を減らすため：

• 著者は そのようなメタデータが画像ファイル内で画像データより前に現れるよう 画像ファイルを作成しなければなりません。 （注：ほとんどの画像フォーマットはこれがデフォルトです。）

• ユーザーエージェントは 画像データ開始後に現れるレイアウトに影響するメタデータ（向きや解像度など）を 無視するべきです。 （注：色空間情報などレイアウトに影響しないメタデータには影響しません。）

  ファイル内のどこにメタデータがあったかをデコーダが報告しないなど その位置を基にメタデータを無視できない場合、 常にメタデータを使用しなければなりません。 （特に、画像が「小さい」場合だけメタデータを使い、 「大きい」場合はダウンロードが遅れて非表示にする、などは許されません。）

3. グラデーション

グラデーションとは、ある色から別の色へと滑らかに変化する画像です。 これは背景画像やボタンなど、さまざまな場面で微妙な陰影をつけるためによく使われます。 この節で説明するグラデーション関数は、 著者が簡潔な構文でこのような画像を指定できるようにし、 UAがページ描画時に自動的に画像を生成できるようにします。 <gradient>の構文は以下の通りです：

<gradient> =
  <linear-gradient()> | <repeating-linear-gradient()> |
  <radial-gradient()> | <repeating-radial-gradient()>

グラデーションは、具体的なオブジェクトサイズという ボックス内に描画されます（これをグラデーションボックスと呼びます）。 ただし、グラデーション自体には自然寸法はありません。

グラデーションは、開始点と 終了点、 グラデーションライン （グラデーションの種類によっては線、光線、螺旋など）を定義し、 この線上の各点に色を指定することで指定します。 色は滑らかに補間されて線上の他の場所も塗りつぶされ、 各グラデーション型はグラデーションラインの色を実際のグラデーションに適用する方法を定義します。

3.1. 線形グラデーション：linear-gradient() 記法

線形グラデーションは、直線状のグラデーションラインを指定し、 その線上に複数の色を配置して作成されます。 画像は無限のキャンバスを作り、 グラデーションラインに垂直な線で塗りつぶすことで構成されます。 塗りつぶし線の色はグラデーションラインとの交点の色となります。 これによって各色から次の色まで滑らかに変化する効果が生まれ、 指定した方向へ進みます。

3.1.1. linear-gradient()構文

linear-gradient()記法は CSSで線形グラデーションを指定します。 その構文は以下の通りです：

<linear-gradient()> = linear-gradient( [ <linear-gradient-syntax> ] )

<linear-gradient-syntax> = [ <angle> | to <side-or-corner> ]? , <color-stop-list>

<side-or-corner> = [left | right] || [top | bottom]

関数の第1引数はグラデーションラインを指定し、 これによりグラデーションの方向とカラーストップの配置が決まります。 省略可能で、省略時はto bottomが既定値となります。

グラデーションラインの方向は2通りで指定できます：

<angle>を使う場合

この引数では0degが上方向を指し、 正の角度は時計回り回転を表します。 したがって90degは右方向となります。

<angle> がゼロの場合は単位識別子を省略できます。

キーワードを使う場合

引数がto top、to right、to bottom、to leftのいずれかの場合、 グラデーションラインの角度は 0deg、90deg、180deg、270degとなります。

引数がto top leftのようにボックスの隅を指定している場合は、 グラデーションラインは 指定された隅と同じ象限を指すような角度となり、 グラデーションボックスの隣接2隅を通る直線に垂直になります。 これにより50%のカラーストップは隣接隅2カ所を通ります（例参照）。

グラデーションボックスの中心から 指定角度で両方向に線を延長します。 終了点は、グラデーションラインに垂直な線を引いたとき、 指定方向のグラデーションボックスの隅と交わる点です。 開始点も同様に、反対方向で決定します。

注記：このモジュールの次のレベルでは、 グラデーションの方向をテキスト方向やwriting-modeに相対的に指定できる機能が提供される予定です。

この例は、上記ルールに基づくグラデーションラインの計算方法を視覚的に示しています。 ここではグラデーションラインの開始点と終了点、 実際のグラデーションが background: linear-gradient(45deg, white, black);を持つ要素によって生成されています。

開始点と終了点はボックス外側にあるものの、 コーナーでちょうど純白、対角のコーナーでちょうど純黒となるように精密に配置されています。 これは意図的なもので、線形グラデーションでは常にこのようになります。

グラデーションのカラーストップは典型的には 開始点〜終了点のグラデーションライン上に配置されますが、 必須ではありません。 グラデーションラインは両方向に無限に延長可能です。 開始点と終了点は単なる基準点であり、 開始点は0%や0pxなどの色位置指定の基準、終了点は100%の基準です。 カラーストップは0%より前や100%より後にも指定できます。

線形グラデーションの任意の点の色は、 その点を通るグラデーションラインに垂直な唯一の直線を見つけ、 その直線が交わるグラデーションライン上の色がその点の色となります。

3.1.2. 線形グラデーションの例

以下のすべてのlinear-gradient()の例は、幅200px高さ100pxのボックスに背景として適用されているものと仮定します。

linear-gradient(yellow, blue);
linear-gradient(to bottom, yellow, blue);
linear-gradient(180deg, yellow, blue);
linear-gradient(to top, blue, yellow);
linear-gradient(to bottom, yellow 0%, blue 100%);

linear-gradient(135deg, yellow, blue);
linear-gradient(-45deg, blue, yellow);

linear-gradient(yellow, blue 20%, #0f0);

linear-gradient(to top right, red, white, blue)

3.2. 放射状グラデーション：radial-gradient() 記法

放射状グラデーションでは、 線形グラデーションのようにグラデーションボックスの片側から他方へ色が滑らかに変化するのではなく、 1点から発生し、円形または楕円形に外側へ滑らかに広がります。

radial-gradient() 記法は、グラデーションの中心（0% の楕円が位置する場所）と、終端形状（100% の楕円）の大きさと形を指定することで、放射状グラデーションを定義します。 カラーストップはリストとして与えられ、 linear-gradient() と同様です。 グラデーション中心 から 終端形状 へ（場合によってはそれを超えて）進行しながら、 指定されたカラーストップに従って、均等に拡大された同心楕円が描画・着色されます。

3.2.1. radial-gradient()構文

放射状グラデーションの構文は次の通りです：

<radial-gradient()> = radial-gradient( [ <radial-gradient-syntax> ] )

<radial-gradient-syntax> =
  [ <radial-shape> || <radial-size> ]? [ at <position> ]? ,
  <color-stop-list>

<radial-size> = <radial-extent> | <length [0,∞]> | <length-percentage [0,∞]>{2}

<radial-extent> = closest-corner | closest-side | farthest-corner | farthest-side

<radial-shape> = circle | ellipse

radial-gradient(5em circle at top left, yellow, blue)

注：将来的なレベルでは、-webkit-gradient()関数のようにグラデーションのフォーカスを動かす機能が追加されるかもしれません。 「from <position>」「from offset <offset>」については、提案とIssue 1575を参照してください。

各引数の定義は次の通りです：

<position>

グラデーションの中心を決定します。 <position>値型 （background-positionでも使われます）は[CSS-VALUES-3]で定義されており、 オブジェクト領域の中心点を基準に、グラデーションボックスを配置領域として解決されます。 省略時はcenterが既定値です。

<radial-shape>

circle または ellipse のいずれかを指定できます。 これによりグラデーションの終了形状が円か楕円か決まります。 <radial-shape>が省略された場合は、 <radial-size>が単一の<length>なら終了形状は円、 それ以外は楕円が既定値です。

<radial-size>

グラデーションの終了形状のサイズを決定します。 省略時はfarthest-cornerが既定値です。 明示的に、またはキーワードで指定できます。 キーワード定義のために、グラデーションボックスの辺は両方向に無限に延長されるものとします。

終了形状が楕円の場合、その軸は水平方向と垂直方向に揃えられます。

circleおよびellipseの両グラデーションは、以下の<radial-extent>値を受け付けます：

closest-side

終了形状は、 グラデーション中心に最も近いグラデーションボックスの辺にちょうど接するようにサイズ決定されます。 形状が楕円の場合、各軸ごとに最も近い辺に正確に接します。

farthest-side

closest-sideと同様ですが、 終了形状は最も遠い辺を基準にサイズ決定されます。

closest-corner

終了形状は、 グラデーション中心に最も近いグラデーションボックスの隅を通るようにサイズ決定されます。 形状が楕円の場合、終了形状はclosest-sideを指定した場合と同じアスペクト比になります。

farthest-corner

closest-cornerと同様ですが、 終了形状は最も遠い隅を基準にサイズ決定されます。 形状が楕円の場合、終了形状はfarthest-sideを指定した場合と同じアスペクト比になります。

<radial-shape>がcircleまたは省略の場合は、 <radial-size>を次のように明示できます：

<length [0,∞]>

円の半径を明示的に指定します。負値は無効です。

注：パーセンテージはここでは使用できません。 パーセンテージは楕円グラデーションのサイズ指定にのみ使えます。 どの寸法に対する割合とみなすか答えが複数考えられるため、この制限があります。 将来のレベルで円サイズのパーセンテージ指定や、どの寸法を基準にするかのより明示的な制御が提供されるかもしれません。

<radial-shape>がellipseまたは省略の場合、<radial-size>には次のように明示できます：

<length-percentage [0,∞]>{2}

楕円のサイズを明示的に指定します。 最初の値が水平半径、2番目が垂直半径です。 パーセンテージ値はグラデーションボックスの対応する寸法に対する割合です。 負値は無効です。

radial-gradient() = radial-gradient(
  [ [ circle               || <length [0,∞]> ]                          [ at <position> ]? , |
    [ ellipse              || <length-percentage [0,∞]>{2} ]            [ at <position> ]? , |
    [ [ circle | ellipse ] || <radial-extent> ]                     [ at <position> ]? , |
    at <position> ,
  ]?
  <color-stop-list>
)

3.2.2. カラーストップの配置

カラーストップは、線形グラデーションのグラデーションラインのように、1点から一方向に無限に伸びる「光線」状のグラデーションライン上に配置されます。 グラデーションラインの開始点はグラデーションの中心にあり、右方向へ伸び、 終了点はこのグラデーションラインが終了形状と交わる点です。 カラーストップは0%より前にも配置できますが、 負領域は直接描画には利用されません。 ただし、そこに配置されたカラーストップは補間や繰り返しによって非負領域の色に影響を与えます（繰り返しグラデーション参照）。 例：radial-gradient(red -50px, yellow 100px)は、中心が赤みがかったオレンジ（#f50）から黄色へ変化する楕円グラデーションになります。 100%を超える位置は中心からそれだけ遠い位置を示します。

任意の点のグラデーションの色は、まずその点を通り、終了形状と同じ中心・向き・アスペクト比を持つ唯一の楕円を特定し、その楕円がグラデーションラインと交わる位置の色とします。

3.2.3. 縮退した放射状グラデーション

位置・サイズ・形状の組み合わせによっては、半径0の円や楕円が作られることがあります。 例えば中心がグラデーションボックスの辺上にあり、closest-sideやclosest-cornerが指定された場合や、サイズ・形状を明示しどちらかの半径が0の場合です。 このような縮退ケースでは、グラデーションは次のように描画されなければなりません：

終了形状が半径0の円の場合：

終了形状がごく小さい半径（0より大きい任意の非常に小さい値）の円であるかのように描画します。これによりグラデーションは円状に見え続けます。

終了形状の幅が0の場合（高さは問わず）：

終了形状がごく小さい幅（0より大きい任意の非常に小さい値）と非常に大きい高さの楕円であるかのように描画します。これによりグラデーションは中心を対称軸とした水平方向の線形グラデーションのように見え、パーセント指定のカラーストップはすべて0pxに解決されます。

それ以外で終了形状の高さが0の場合：

終了形状がごく小さい高さ（0より大きい任意の非常に小さい値）と非常に大きい幅の楕円であるかのように描画します。これにより、グラデーションは最後のカラーストップの色（繰り返しなら平均色）で塗りつぶされた単色画像のように見えます。

3.2.4. 放射状グラデーションの例

以下のすべての例は幅200px高さ100pxのボックスに適用されています。

radial-gradient(yellow, green);
radial-gradient(ellipse at center, yellow 0%, green 100%);
radial-gradient(farthest-corner at 50% 50%, yellow, green);

radial-gradient(circle, yellow, green);

radial-gradient(red, yellow, green);

radial-gradient(farthest-side at left bottom, red, yellow 50px, green);

radial-gradient(closest-side at 20px 30px, red, yellow, green);
radial-gradient(20px 30px at 20px 30px, red, yellow, green);

radial-gradient(closest-side circle at 20px 30px, red, yellow, green);
radial-gradient(20px 20px at 20px 30px, red, yellow, green);

3.3. 繰り返しグラデーション：repeating-linear-gradient()およびrepeating-radial-gradient()記法

linear-gradient()やradial-gradient()に加え、 この仕様ではrepeating-linear-gradient()とrepeating-radial-gradient()値も定義します。 これらの記法は、それぞれ対応する非繰り返し型と同じ値を受け付け、同様に解釈されます。

<repeating-linear-gradient()> = repeating-linear-gradient( [ <linear-gradient-syntax> ] )
<repeating-radial-gradient()> = repeating-radial-gradient( [ <radial-gradient-syntax> ] )

ただし描画時には、カラーストップが両方向に無限に繰り返され、 それぞれの位置は、最後と最初に指定したカラーストップの位置の差の倍数だけシフトされます。 例：repeating-linear-gradient(red 10px, blue 50px)は、linear-gradient(..., red -30px, blue 10px, red 10px, blue 50px, red 50px, blue 90px, ...)と同等です。 最後と最初のカラーストップは各グループの境界で必ず一致するため、グラデーションが同じ色で始まり終わらない場合はその部分で急激な切り替わりが生じます。

repeating-linear-gradient(red, blue 20px, red 40px)

repeating-radial-gradient(red, blue 20px, red 40px)

repeating-radial-gradient(circle closest-side at 20px 30px, red, yellow, green 100%, yellow 150%, red 200%)

最初と最後のカラーストップ間の距離が0でないが、出力デバイスの物理解像度で忠実に描画できないほど十分に小さい場合、実装はグラデーションの平均色を求め、その平均色で塗りつぶした単色画像として描画しなければなりません。

最初と最後のカラーストップ間の距離が0の場合（または実装上の制限で0と見なされる場合）、 実装は、同じ数・色のカラーストップを持つが最初と最後のカラーストップが任意の非ゼロ距離だけ離れており、それ以外は等間隔であるグラデーションの平均色を求め、その平均色を単色画像として描画しなければなりません。

繰り返し放射状グラデーションの終了形状の幅が0でなく高さが0、または実装上の制限で高さが0に近い場合も、平均色を求め、その単色画像として描画しなければなりません。

注：縮退した放射状グラデーションの節で、終了形状の幅が0の場合の調整方法を説明しています。

グラデーションの平均色を求めるには、以下の手順を実行します：

1. premultiplied RGBA色の空リストlistと、最初と最後のカラーストップ間の距離total-lengthを用意する。

2. 隣接する各カラーストップのペアごとに、 2点間の距離の半分をweightとし、これをtotal-lengthで割る。 listに2つのエントリを追加する。 1つ目は最初のカラーストップの色をpremultiplied sRGBAで表し、全成分をweight倍したもの。 2つ目も同様に2つ目のカラーストップで計算する。

3. listの各成分を合計し、平均色として返す。

注： 実装は任意のアルゴリズムを使えますが、上記と同じ結果を出す必要があります。

repeating-linear-gradient(red 0px, white 0px, blue 0px);

repeating-linear-gradient(red 0px, white .1px, blue .2px);

3.4. グラデーションの色の定義

グラデーション内の色は、カラーストップ（<color>とグラデーションライン上の対応する位置） およびカラートランジションヒント（2つのカラーストップ間の色遷移の中間点を示す位置） をグラデーションライン上に配置することで指定され、 ライン上の各点の色が定義されます。 （各グラデーション関数は、グラデーションラインの形状や長さ、 開始点・終了点も定義します。前述参照。）

グラデーション領域全体の色は、グラデーション関数によって定義されたグラデーションライン上の特定の点に結びつけて決定されます。 UAはグラデーション色をわずかに「ディザリング」（グラデーションライン上の近接色でランダムにピクセルを切り替える）し、より滑らかなグラデーションを実現してもよいです。

3.4.1. カラーストップリスト

カラーストップおよびトランジションヒントは、 カラーストップリストで指定します。 これは2つ以上のカラーストップを、任意のトランジションヒントと交互に並べたリストです。

<color-stop-list> =
  <linear-color-stop> , [ <linear-color-hint>? , <linear-color-stop> ]#
<linear-color-stop> = <color> <length-percentage>?
<linear-color-hint> = <length-percentage>

パーセント値は、グラデーションラインの開始点から終了点までの長さに対して解決され、 0%が開始点、100%が終了点となります。 長さはグラデーションライン上で開始点から終了点方向に沿って測定されます。

カラーストップやトランジションヒントの位置は通常、 開始点と終了点の間に配置されますが、 必須ではありません。 グラデーションラインは両方向に無限に延長されており、どこにでも位置を指定できます。

カラーストップの位置が省略された場合は、自動的に位置が割り当てられます。 カラーストップリストの最初または最後のカラーストップには、それぞれグラデーションラインの開始点または終了点が割り当てられます。 それ以外の場合は、前後のストップの中間位置が割り当てられます。 連続する複数のストップが位置を持たない場合は、前後の位置付きストップ間で等間隔に配置されます。 詳細は§ 3.4.3 カラーストップの「補正」を参照してください。

3.4.2. グラデーションラインの着色

各カラーストップ位置では、 グラデーションラインはそのカラーストップの色になります。 最初のカラーストップより前では、グラデーションラインは最初のカラーストップの色、 最後のカラーストップ以降は最後のカラーストップの色です。 2つのカラーストップ間では、グラデーションラインの色は2つのカラーストップの色をプリマルチプライドRGBA空間で補間したものとなります。

既定ではこの補間は線形です。2つのカラーストップ間の25%、50%、75%の位置では、それぞれ2色の25%、50%、75%ブレンド色になります。

ただし、2つのカラーストップ間にトランジションヒントが指定された場合、補間は非線形となり、ヒントによって制御されます：

注：トランジションヒントは、「中間色」（2つのカラーストップの50%ブレンド色）をどこに配置するかを指定します。 ヒントがちょうど2つのカラーストップの中間にある場合は、上記補間アルゴリズムで通常の線形補間となります。 それ以外の場所にある場合は、周囲のカラーストップ間をスムーズな指数カーブでつなぎ、「中間色」がヒントの位置に現れるようになります。

カラーヒントの利用例を図示する例を追加すること。

複数のカラーストップが同じ位置にある場合は、 リスト内で先に指定されたものから後に指定されたものへの無限小の遷移を生じさせます。 その位置で色が滑らかに変化せず、突然切り替わる効果となります。

linear-gradient(90deg, red, transparent, blue)

3.4.3. カラーストップの「補正」

各使用値としてのカラーストップの位置を解決する際は、以下の手順を順番に適用します：

1. 最初のカラーストップに位置がなければ0%に設定する。最後のカラーストップに位置がなければ100%に設定する。
2. あるカラーストップまたはトランジションヒントの位置が、 それ以前のカラーストップやトランジションヒントの指定位置より小さい場合、 その位置をそれ以前で最大の指定位置に修正する。
3. まだ位置が未指定のカラーストップがあれば、 連続する位置なしストップの区間ごとに、 前後の位置付きカラーストップの間で等間隔となるよう位置を割り当てる。

これらのルール適用後、すべてのカラーストップやトランジションヒントには明確な位置と色が付き、昇順に並びます。

注： px, em, % など異なる単位を混在させると、カラーストップが意図せず前のストップより前に動く場合があるため注意が必要です。 例：background-image: linear-gradient(yellow 100px, blue 50%) は、背景領域の高さが200px以上なら補正は発生しませんが、 150pxなら青カラーストップの位置は75pxとなり、黄色カラーストップより前になるため100pxに修正されます。 こうしたカラーストップの順序はレイアウトを行わないと決定できないため、 アニメーションやトランジションでは滑らかに補間されません。

1. linear-gradient(red, white 20%, blue)
   =1=>
   linear-gradient(red 0%, white 20%, blue 100%)

2. linear-gradient(red 40%, white, black, blue)
   =1,3=>
   linear-gradient(red 40%, white 60%, black 80%, blue 100%)

3. linear-gradient(red -50%, white, blue)
   =1,3=>
   linear-gradient(red -50%, white 25%, blue 100%)

4. linear-gradient(red -50px, white, blue)
   =1,3=>
   linear-gradient(red -50px, white calc(-25px + 50%), blue 100%)

5. linear-gradient(red 20px, white 0px, blue 40px)
   =2=>
   linear-gradient(red 20px, white 20px, blue 40px)

6. linear-gradient(red, white -50%, black 150%, blue)
   =1,2=>
   linear-gradient(red 0%, white 0%, black 150%, blue 150%)

7. linear-gradient(red 80px, white 0px, black, blue 100px)
   =2,3=>
   linear-gradient(red 80px, white 80px, black 90px, blue 100px)

4. CSSにおける画像とオブジェクトのサイズ指定

CSSで使用される画像は、さまざまなソースから取得される場合があります： バイナリ画像フォーマット（gif, jpegなど）、 専用のマークアップフォーマット（SVGなど）、 そして本仕様で定義されているlinear-gradient()値型のようなCSS固有のフォーマットです。 また、ドキュメントには他にも多様な種類のオブジェクト （たとえば動画、プラグイン、入れ子のドキュメントなど）が含まれることがあります。 これらの画像やオブジェクト （以下、単にオブジェクトと呼びます） は、CSSに対して多様なサイズ情報を提供することも、まったく持たないこともあります。 この節では、オブジェクトとCSSレイアウトアルゴリズム間の一般的なサイズ交渉モデルを定義します。

4.1. オブジェクトサイズ用語

この扱いを定義するために、 いくつかの用語を定義し、 様々な概念を参照しやすくします：

自然寸法

自然寸法とは、 自然高さ、 自然幅、 および自然アスペクト比（幅と高さの比率） の組であり、各値は与えられたオブジェクトによって存在する場合と存在しない場合があります。 これらの自然寸法は、オブジェクト固有の推奨サイズを表します。 つまり利用される文脈に依存しません。 CSSは一般に自然寸法の求め方を定義しません。

ラスタ画像は3つすべての自然寸法を持つオブジェクトの例です。 拡大縮小を前提に設計されたSVG画像は自然アスペクト比だけを持つこともありますし、 SVG画像は自然幅または自然高さのみで作成されることもあります。 本仕様で定義されるCSSグラデーションは、自然寸法を全く持たないオブジェクトの例です。 もう一つの例として、HTMLの iframe 要素などの埋め込みドキュメントがあります。 多くのオブジェクト（たとえばほとんどの画像）は2つだけの自然寸法を持つことはできません。 なぜならいずれか2つがあれば自動的に3つ目が決まってしまうからです。 ただし一部の置換要素（フォームコントロールなど）は、 自然幅と自然高さのみを持ち、 自然アスペクト比を持たない場合もあります。

オブジェクトが縮退した自然アスペクト比 （いずれかの値が0または無限大）を持つ場合は、自然アスペクト比を持たないものとして扱います。

もしオブジェクト（アイコンなど）が複数のサイズを持つ場合、最も大きいサイズ（面積で）がその自然寸法として扱われます。 そのサイズで複数のアスペクト比がある場合や、複数のアスペクト比がありサイズがない場合は、デフォルトオブジェクトサイズのアスペクト比に最も近いアスペクト比が使用されます。 これは、デフォルトオブジェクトサイズ内にcontain制約で収めたときに最大の面積となるアスペクト比を選ぶことで決定します。 もし最大面積のサイズが複数ある場合は、その中で最も幅が広いサイズが自然寸法として選ばれます。

自然幅と 自然高さをまとめて 自然サイズ と呼びます。

指定サイズ

オブジェクトの指定サイズはCSSによって与えられます。 たとえばwidthやheight、 background-sizeプロパティなどです。 指定サイズは幅・高さが明確に決まる場合もあれば、制約条件の集合やそれらの組み合わせの場合もあります。

具体的オブジェクトサイズ

具体的オブジェクトサイズは、 オブジェクトの自然寸法、 指定サイズ、 そのオブジェクトが使われる文脈のデフォルトオブジェクトサイズを組み合わせて、 幅と高さが絶対的に決まる矩形を生成したものです。

デフォルトオブジェクトサイズ

デフォルトオブジェクトサイズは、 高さと幅が絶対値で決まっている矩形であり、 自然寸法と指定サイズの両方が一部欠けている場合に 具体的オブジェクトサイズを決定するために使われます。

4.2. CSS⇋オブジェクト交渉

オブジェクトは、以下のオブジェクトサイズ交渉アルゴリズムでCSSによりサイズ・描画されます：

1. オブジェクトがドキュメント内に指定されたとき （たとえばurl()付きbackground-imageや src 属性付きimg要素など）、 CSSはオブジェクトに自然寸法を問い合わせます。

2. 自然寸法、指定サイズ、 そのオブジェクトが使われる文脈のデフォルトオブジェクトサイズを使って、 CSSは具体的オブジェクトサイズを計算します。 （次節参照。） これでオブジェクトを描画する領域のサイズと位置が決定されます。

3. CSSはオブジェクトに対し、 具体的オブジェクトサイズで自身を描画するよう依頼します。 CSSはオブジェクトの自然寸法と 具体的オブジェクトサイズが異なる場合の描画方法は定義しません。 オブジェクトは何らかの方法でサイズを具体的オブジェクトサイズに合わせるか、 独自の制約を満たすためにそれより大きく/小さく描画する場合もあります。

4. CSSで特に指定がない限り、 オブジェクトは具体的オブジェクトサイズでクリップされます。

4.3. 具体的オブジェクトサイズの解決

現在、オブジェクトのサイズ指定ルールは、 それぞれの利用文脈ごとに記述されています。 この節では、よく使われるサイズ制約とその解決方法を定義し、 今後の仕様が個別にサイズ解決を再定義せずに参照できるようにします。

4.3.1. デフォルトのサイズ決定アルゴリズム

デフォルトのサイズ決定アルゴリズムは、 オブジェクトの具体的オブジェクトサイズを求めるためによく使われる一連のルール群です。 これは、オブジェクトの自然寸法と、 拘束なしまたは明確な幅・高さのみを持つ指定サイズが同時に与えられる場合の解決を行います。

一部のオブジェクトサイズ指定ルール （たとえばlist-style-image）は デフォルトのサイズ決定アルゴリズムと完全に一致します。 他のルール（たとえばborder-image）は デフォルトのサイズ決定アルゴリズムを利用しつつ、最終的な具体的オブジェクトサイズを得る前に追加のサイズ決定ルールを適用します。

デフォルトのサイズ決定アルゴリズムは次の通りです：

• 指定サイズが明確な幅・高さ両方の場合、 具体的オブジェクトサイズはその幅・高さとします。

• 指定サイズが幅または高さのみ（両方でない）なら、 具体的オブジェクトサイズはその幅または高さとします。 もう一方の寸法は次のように決定します：

  1. オブジェクトが自然アスペクト比を持つ場合、 具体的オブジェクトサイズの欠けている寸法は、そのアスペクト比と既知寸法から計算します。

  2. そうでなく、オブジェクトの自然寸法に欠けている寸法が存在する場合は、 その値をオブジェクトの自然寸法から取得します。

  3. それ以外の場合は、具体的オブジェクトサイズの欠けている寸法はデフォルトオブジェクトサイズから取得します。

• 指定サイズに制約が全くない場合：

  1. オブジェクトが自然高さまたは幅を持つ場合、 その自然寸法を指定サイズとした場合と同様にサイズを決定します。

  2. それ以外の場合は、contain制約としてデフォルトオブジェクトサイズに合わせてサイズを決定します。

4.3.2. cover/contain制約サイズ決定

他にもよく使われる指定サイズとしてcontain制約とcover制約があり、 いずれも指定された制約矩形に対し、オブジェクトの推奨アスペクト比で解決されます：

• contain制約は、 具体的オブジェクトサイズを オブジェクトの自然アスペクト比で持つ最大の矩形とし、 かつその幅・高さが制約矩形の幅・高さを超えないものとします。

• cover制約は、 具体的オブジェクトサイズを オブジェクトの自然アスペクト比で持つ最小の矩形とし、 かつその幅・高さが制約矩形の幅・高さを下回らないものとします。

いずれの場合も、オブジェクトが自然アスペクト比を持たない場合は、 具体的オブジェクトサイズは指定された制約矩形となります。

4.4. CSSオブジェクトサイズ指定の例

4.5. オブジェクトのサイズ指定：object-fit プロパティ

object-fitプロパティは、置換要素の内容をその使用幅・高さで定められたボックスにどのように収めるかを指定します。

fill

置換内容は要素の内容ボックスを満たすようにサイズ調整されます。 オブジェクトの具体的オブジェクトサイズは要素の使用幅・高さになります。

contain

置換内容は自然アスペクト比を維持しつつ、要素の内容ボックス内に収まるようにサイズ調整されます。 具体的オブジェクトサイズは、要素の使用幅・高さに対するcontain制約として解決されます。

cover

置換内容は自然アスペクト比を維持しつつ、要素の内容ボックス全体を覆うようにサイズ調整されます。 具体的オブジェクトサイズは、要素の使用幅・高さに対するcover制約として解決されます。

none

置換内容は要素の内容ボックス内に収まるようにはリサイズされません。 デフォルトのサイズ決定アルゴリズム（指定サイズなし・デフォルトオブジェクトサイズは要素の使用幅・高さ）で具体的オブジェクトサイズを決定します。

scale-down

noneまたはcontainが指定されたかのようにコンテンツをサイズ調整し、より小さい具体的オブジェクトサイズを選びます。

注： noneとcontainの両方とも、内容の自然アスペクト比を尊重するため、「より小さい」概念は明確です。

内容が置換要素の内容ボックスを完全に満たさない場合、空いた領域には置換要素の背景が表示されます。 置換要素は常に内容を内容ボックスでクリップするため、内容がはみ出すことはありません。 内容のボックス内での位置指定にはobject-positionプロパティを参照してください。

注： object-fit プロパティは [SMIL10]のfit属性や、 <meetOrSlice>パラメータ、 preserveAspectRatio 属性（[SVG11]）と類似の意味を持ちます。

注： オブジェクトサイズ交渉アルゴリズムによれば、 具体的オブジェクトサイズ（またはこの場合、内容のサイズ）は オブジェクト自体を直接スケーリングするものではなく、表示キャンバスのサイズ情報としてオブジェクトに渡されるだけです。 そのサイズ内でどう描画するかは画像フォーマット依存です。 特にラスタ画像は常に指定サイズにスケーリングされ、 SVGは与えられたサイズを「SVGビューポート」として使い、ルート<svg>要素の属性値で描画方法を決定します。

4.6. オブジェクトの位置指定：object-position プロパティ

object-positionプロパティは、置換要素をボックス内でどのように配置するかを決定します。 <position>値型 （background-positionでも使用） は[CSS-VALUES-3]で定義されており、 具体的オブジェクトサイズをオブジェクト領域・内容ボックスを配置領域として解決されます。

注： ボックスの未充填部分は要素の背景が表示されます。

5. 画像処理

5.1. 画像のページ上での向き指定：image-orientation プロパティ

カメラを横向きにしたまま撮影した場合や、スキャナーで文書の位置が正しくない場合など、生成される画像が「横向き」や逆さまになる場合があります。 image-orientationプロパティは、画像ソースデータに「帯域外」で回転を適用して正しく画像を表示できるようにするためのものです。

このプロパティは実装において任意です。

このプロパティは、要素の画像に直交回転を適用し、文書内で使用される前に向きを調整します。 これはコンテンツ画像 （例：置換要素や生成コンテンツ）やSVG要素が参照する画像ソース （例：feImage）、 さらにCSSルールで適用された装飾画像 （background-imageや他の<image>プロパティ）にも適用されます。 UAのナビゲーションツールバーやメニューなど文書外での画像レンダリングには適用されません。

注： このプロパティは、任意の回転や水平方向・垂直方向の反転といったレイアウト変形指定を意図するものではありません。 （その目的には[CSS-TRANSFORMS-1]を参照。） また、印刷時の縦横向きによる回転など正しい向きで印刷するためには不要であり（それはレイアウト処理の一部）、[CSS3PAGE]参照。 誤った向きの画像の補正にのみ使うべきです。

値の意味は以下の通りです：

none

追加の回転は行いません。 画像はエンコードされたままの向きで表示されます。

from-image

画像のメタデータ（EXIF等）に向き情報が含まれている場合、 この値は画像を正しい向きにするために必要な角度となります。 必要に応じてこの角度は<angle>値として上記の丸め・正規化処理が行われます。 メタデータに向き指定がなければ、この値はnoneになります。

注： § 2.1.2 画像メタデータは使用できるメタデータに制限を課しています。

<angle> || flip

正の<angle>は画像を右（時計回り）に回転し、 負の値は左に回転します。 <angle>が省略された場合は0degです。

flipを指定した場合は、回転後に画像を水平方向に反転します。

この値はコンテンツ画像にのみ適用され、装飾画像はfrom-imageとして扱われます。 この値は廃止予定であり、[CSS-PRINT]に準拠する実装を除きオプションです。

注： この値は、from-imageが生成できる8通りのEXIF向きを手動で再現できます。

このプロパティの算出値は、<angle>を最も近い1/4回転に丸め（曖昧な場合は正の方向へ）、その後値を1turnで剰余（[0turn, 1turn)の半開区間）します。

noneおよびfrom-image以外の値は、実装は任意、CSSとしては非推奨です。

すべてのCSSレイアウト・レンダリング処理は、回転後の画像を使い、画像が最初からその向きでエンコードされていたかのように扱います。 これにより例えば：

• 自然高さ・幅は、回転前ではなく回転後の画像寸法から求められます。

• height（width）プロパティは、画像の回転後の垂直（水平）寸法に適用されます。

• 画像カーソルのホットスポット座標も回転後の画像を基準にします。

• ボーダー画像（border-image参照）は回転後に分割されます。

• [CSS-TRANSFORMS-1]等の他の変形も、image-orientation適用後に適用されます。

img.ninety     { image-orientation: 90deg }
...
<img class="ninety" src=...>

注： このプロパティは以前はnoneが初期値でした。 from-imageを初期値とした方が、一般的により良いユーザー体験と最小限の破壊的変更になると考えられています。 今後UAでの互換データが確認されれば、他の用途が明確でない限りこのプロパティは「誤った向きの補正」以外の値はCSSから除外される可能性があります。

5.2. 画像の拡大縮小方法の決定：image-rendering プロパティ

image-renderingプロパティは、画像が拡大・縮小される際に、どの特性を優先して保持すべきかについてユーザーエージェントにヒントを与え、適切なスケーリングアルゴリズム選択を補助します。 要素に指定した場合、その要素のすべての画像プロパティ（背景画像、リストスタイル画像、または置換要素の内容が画像であって拡大縮小が必要な場合など）に適用されます。 image-renderingプロパティの値の意味は以下の通りです：

auto

スケーリングアルゴリズムはUA依存です。

smooth

画像の見た目を最大限に美しくするアルゴリズムで拡大縮小すべきです。 特に色を「滑らかに」するバイリニア補間などが許容されます。 写真のような画像を想定しています。

high-quality

smoothと同じですが、より高品質な拡大縮小を優先します。 システムリソースが制約されている場合、high-qualityが指定された画像は、他の値の画像よりも品質劣化が遅くなるよう優先的に扱われるべきです。

この値はシステムリソースが制約されているとき、画像品質の劣化を防ぐものではありません。 あくまでautoより優先的に拡大縮小リソースを割り当てるという希望を表明するのみです。 ページ内すべての画像にhigh-qualityを指定した場合は、全てautoと同等で、区別されません。

high-qualityの効果を最大限得たい場合は、ページ内でも特に重要な画像のみに指定してください。

pixelated

元のピクセル感をできるだけ保持するように拡大縮小されますが、目標サイズが元サイズの整数倍でない場合に歪みを避けるため最小限のスムージングが許されます。

各軸ごとに、目標サイズに最も近く、かつ0より大きい自然サイズの整数倍をまず求めます。 その整数倍サイズまでnearest neighborで拡大し、残りのサイズ分はsmooth同様に拡大します。

注： 自然サイズの整数倍では、crisp-edgesと同じ結果になります。 非整数倍では、ピクセルアートでも通常より良い見た目になりますが、「2段階描画」のためパフォーマンスコストが発生します。

crisp-edges

コントラストやエッジを保ち、色のスムージングやぼかしを避けて拡大縮小します。 線画のような画像を想定しています。

UAが選択するnearest neighborや、元画像の色をぼかさず・混合せずに拡大縮小できる他のアルゴリズムでも可です。 ただし斜線や曲線も「巨大なピクセル」ではなく滑らかに描画できる場合があります。

注： 新しいサイズが元画像の整数倍でない場合、nearest neighborは「エイリアシング」バグを起こす可能性があり、元画像で同じ太さだった線が拡大先では位置によって太くなったり細くなったりすることがあります。 多くの場合、pixelatedの方がより適切な描画になります。

pixelatedの最初のステップ以外、このプロパティは特定のスケーリングアルゴリズムを規定しません。 例えばimage-rendering: autoなら、UAは既定でバイリニア補間を使い、高負荷時はnearest-neighbor、静止画像にはLanczos補間など高品質アルゴリズムに切り替えても構いません。

例えば、以下の小さな画像を：

これを3倍に拡大すると、image-renderingの値によって下記のように見えます：

前例と同じく3倍拡大時は、pixelatedも純粋なnearest neighborも同じ結果になります。 しかし整数倍以外では動作が異なります：

pixelatedはピクセルを単純に拡大した「見た目」をよく維持しますが、わずかなぼかしが入り、smoothよりはるかに少ないぼかしです。 一方、nearest neighborはぼかしを全く発生させませんが、エイリアシングでピクセルサイズが不ぞろいに見えます。

このプロパティは以前optimizeSpeedとoptimizeQualityも受け付けましたが、これらは廃止されました。UAはこれらを有効値として受け付けつつ、crisp-edgesおよびsmoothと同じ挙動とし、著者は使用しないでください。

6. 補間

<image>値の補間は本レベルでは定義されません。 実装はそれらを突然遷移させなければなりません（50%進行時に他の非対応補間と同様に切り替え）、 ただし将来の仕様で別途定義があればそれを優先します。

注： CSS Images Level 4ではグラデーション用の専用補間と、その他の画像のクロスフェード補間が定義される予定です。

7. シリアライズ

この節では、本仕様で導入されたすべての新しいプロパティや値型のシリアライズについて述べます（CSS Object Model [CSSOM]との連携のため）。

本モジュールで定義される任意の関数をシリアライズするには、該当する文法に従い、その順序通りにシリアライズし、意味を変えない範囲で構成要素を省略し、スペース区切りのトークンは1つのスペースで連結し、カンマ後は必ず1つスペースを入れます。

Linear-Gradient( to bottom, red 0%,yellow,black 100px)

linear-gradient(red, yellow, black 100px)

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

この仕様は新たなプライバシー上の懸念を導入しません。

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

この仕様ではクロスオリジン画像のレンダリングがデフォルトで許可されており、それら画像の一部情報（特に自然寸法や解像度）がプログラムから取得可能となります。

謝辞

グラデーション定義への貢献者としてWebkitチーム、Brad Kemper、Brian Manthos、Alan Gresleyに感謝します。またobject-fit、object-position、image-orientationへのMelinda Grantの取り組みにも感謝します。 さらにL. David Baron、Kang-Hao Lu、Leif Arne Storset、Erik Dahlstrom、Øyvind Stenhaugによる丁寧なレビュー・コメント・修正に感謝します。

変更点

2019年10月10日候補勧告以降の変更点

2020年12月17日CRD以降の主な変更：

• &&による並び替えを<linear-color-stop>から削除 (Issue 8021)

• pixelatedで、歪みを避けるため最近傍ピクセル倍数までsmooth拡大を明示 (Issue 5837)

• nearest neighborをcrisp-edgesの実装として明示的に許可 (Issue 6038)

• 文法生成ルールの編集上の修正や誤字修正

2019年10月10日CR以降の主な変更点：

• 縮退アスペクト比の扱いを定義 (Issue 4572)

• 画像データの後に現れるレイアウト影響メタデータの無視を定義 (Issue 5165)

• グラデーションでディザリングを明示的に許可 (Issue 4793)

• image-orientationが装飾画像・コンテンツ画像の両方に適用されることを明示 (Issue 5245)

• 「intrinsic dimensions」をnatural dimensionsに名称変更（intrinsic sizesとの混同回避のため） (Issue 4961)

2012年4月17日候補勧告以降の変更点

主な変更点：

• image()記法はLevel 4へ先送り

• image-resolutionプロパティはLevel 4へ先送り

• image-orientationプロパティを廃止・任意・リスクありに指定。また以下を追加：

  • from-imageおよびnoneキーワードの追加

  • flip値の追加

  • 「mod→丸め」の順に変更。

• image-renderingプロパティを追加

• <resolution>型を[CSS-VALUES-3]へ移動

• 無効画像・部分的にロードされた画像の扱いをより明確化

• <image>の一般的な算出形を定義

• 画像か要素参照か曖昧なURLの概念と扱いを定義

• linear-gradient()で0度時は単位省略可（互換性のため）と明確化

• 縮退した繰り返し放射状グラデーションの扱いを微調整

• トランジションヒントを<color-stop-list>に追加し、グラデーションカラーストップの記述を新しい説明に合わせて編集

• すべてのプロパティ定義表に「正規順序」「アニメーション型」を追加

• <image>値の補間・シリアライズ定義を追加

• その他細かな明確化

コメントへの対応状況も参照可能です。