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

1. はじめに

このセクションは規範的ではありません。

このモジュールは2D画像を表現する追加の方法を導入します。 たとえば、カラーフォールバック付きのURLや 円錐グラデーション、 または文書内の他の要素の描画として表現できます。

1.1. 値の定義

本仕様は、CSSプロパティ定義規約（[CSS2]）および値定義構文（[CSS-VALUES-3]）に従います。 この仕様で定義されていない値型は、CSS Values & Units [CSS-VALUES-3]で定義されています。 他のCSSモジュールとの組み合わせにより、これらの値型の定義が拡張される場合もあります。

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

2. 2D画像値: <image>型

<image>値型は2D画像を表します。これはurl参照、image記法、 またはグラデーション記法のいずれかとなります。 その構文は以下の通りです:

<image> = <url> | <image()> | <image-set()> | <cross-fade()> | <element()> | <gradient>

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

画像が無効な場合もあります。 例えば、<url>が有効な画像形式でないリソースや 読み込みに失敗した場合などです。 無効画像は、transparentな単色画像として描画され、自然サイズを持ちません。 ただし、無効画像は 場合によってエラーハンドリングを引き起こすことがあります。 例えば、無効画像がlist-style-imageの場合は、noneとして扱われ、 list-style-typeで代替描画されます。[CSS2]

画像が読み込み中の場合は 読み込み中画像となります。読み込み中画像は 無効画像ではありませんが、動作は類似しています。 単色のtransparent画像として描画され、自然サイズを持ちません。 フォールバック描画が用意されている場合はそれが利用されますが、 フォールバックリソースの読み込みは行ってはいけません。 また、もし読み込み中画像が 既に読み込まれている画像を置き換えている場合 （たとえば文書やスタイルシートの変更による場合）で UAがその情報を保持している場合は、 既に読み込まれている画像を読み込み中画像の代わりに描画し続けてもよいです。

部分的に読み込まれた画像（自然サイズは判明しているが画像データが完全でない場合）は、 読み込み中画像として扱うか、 部分データで描画された画像として扱うことができます。 例えばUAは、インターレースGIFの最初のパスのピクセルデータが読み込まれた時点や 画像ヘッダ（サイズ情報を含む）がパースされた時点で順次描画を更新したり、 あるいは全データが読み込まれるまで描画しないこともできます。

算出済み <image>値は、 指定値を <url>や<color>、 <length>を算出したものです。

2.1. 画像ファイル形式

UAは、<image>値から参照された場合、 <image>が有効なすべてのプロパティで 少なくとも以下の画像ファイル形式をサポートしなければなりません:

• PNG（[PNG]で規定）
• SVG（[SVG11]で規定）、 セキュア静的モードを使用 （詳細は[SVG-INTEGRATION]を参照）
• UAがアニメーション<image>をサポートする場合、 SVG（[SVG11]で規定）、 セキュアアニメーションモードを使用 （詳細は[SVG-INTEGRATION]を参照）

UAは他のファイル形式のサポートも可能です。

2.2. 画像参照: url() 記法

注: [css-images-3]からの変更はありません。

2.3. 外部画像の取得

スタイルシート用の外部画像を取得するには、 <url> urlとCSSスタイル宣言 declarationを受け取り、 スタイルリソースを取得（urlを指定、 ruleOrDeclarationはdeclaration、 destinationは"image"、 CORSモードは"no-cors"、 processResponseは以下の手順）を実行します: response resとnull、失敗または バイトストリームbyteStreamを受け取る場合: byteStreamがバイトストリームなら、そのストリームから画像を読み込みます。

2.4. 解像度・タイプネゴシエーション: image-set()記法

ユーザーのデバイスに最適な画像解像度を提供することは困難な場合があります。 理想的には、画像は表示されるデバイスの解像度に合わせるべきですが、 これはユーザーごとに異なる可能性があります。 しかし、どの画像を送信するかの判断には他の要素も関与します。 例えば、ユーザーが低速なモバイル回線の場合、 より大きく適切な解像度の画像を待つよりも 低解像度の画像を受け取る方を好むかもしれません。 image-set()関数を使うことで、 著者はこれらの問題の多くを気にせず、 複数の解像度の画像を指定し、UAに適切なものを選択させることができます。

この解決策は解像度がファイルサイズの代理となることを前提としていますが、 そのためベクター画像の多解像度セットや、 ベクター画像とラスタ画像の混在（例: アイコン）には適切に対応できません。 例えば、高解像度用にベクター、低解像度用に最適化ビットマップ、 低帯域用には高解像度でも小さいベクターを使うなどが考えられます。

image-set()の構文は次の通りです:

<image-set()> = image-set( <image-set-option># )
<image-set-option> = [ <image> | <string> ]
                     [ <resolution> || type(<string>) ]?

HTMLのpictureと同等の機能にするために "w"と"h"の寸法指定も追加すべきです。

<string>は、image-set()内で <url>を表します。

image-set()関数は 直接でも間接でも自身の中にネストできません （他の<image>型の引数としてなど）。

<image-set-option>は、image-set()関数が表すことのできる候補画像のひとつを定義し、 3つの部分から構成されます:

• 画像参照（必須）。 これはURLや、linear-gradient()などのCSS生成画像も指定できます。

• <resolution>（省略可）。 これはUAがどの<image-set-option>を選ぶかの判断材料となります。 画像参照がラスタ画像の場合はその自然解像度も指定し、 他の情報源による自然解像度を上書きします。

  指定がない場合は、どの<image-set-option>を使用するかの選択において 1xとして扱われます。 また、画像の自然解像度もデフォルトで1xとなりますが、 他の情報源が自然解像度を与える場合はそちらを優先します。

• type( <string> )関数（省略可）は、 画像のMIMEタイプを<string>で指定します。

  <string>を 有効なMIMEタイプ文字列としてパースした結果が 無効であるか、または有効だがサポートされる画像形式でない場合、 <image-set-option>は有効なオプションとして定義されません。 （これはimage-set()関数自体の有効性には影響しません。）

  この指定は画像自体には影響しません。 たとえば、<image-set-option>として url("picture.png") 1x type("image/jpeg") のように指定しても、 選択された場合はリンク先のPNG画像が表示され、 たとえJPEGと宣言されていても画像自体は変わりません。

  指定しない場合は <image-set-option>に影響しません。

image-set()関数は、1つ以上の<image-set-option>のリストを持ち、 その中からどの画像を表現するかを決定するため、1つだけ選択しなければなりません：

1. まず、<image-set-option>のうち type()値で未知または非対応のMIMEタイプを指定しているものをリストから除外します。

2. 次に、リスト内で前のオプションと同じ<resolution>を持つ<image-set-option>を除外します。

3. ここで<image-set-option>が1つも残っていない場合、 この関数は無効画像を表します。

4. 最後に、残った<image-set-option>の中から、 ディスプレイの解像度や接続速度など、UAが重要と判断する基準に基づき、 どれを読み込むかUA独自に選択します。

5. その後、image-set()関数は選択された<image>の<image-set-option>を表します。

UAは、ページのライフサイクルの中で、<image-set-option>のうち どれを使用するかを、判断基準が十分に変化した場合には変更してもよいです。

background-image: image-set( "foo.png" 1x,
                             "foo-2x.png" 2x,
                             "foo-print.png" 600dpi );

background-image: image-set( "foo.avif" type("image/avif"),
                             "foo.jpg" type("image/jpeg") );

background-image: image-set( linear-gradient(cornflowerblue, white) 1x,
                             url("detailed-gradient.png") 3x );

2.5. 画像フォールバックとアノテーション: image()記法

image() 関数を使うと、作者は以下が可能です:

• メディアフラグメントを使って画像の一部をクリップする

• 単色を画像として使用する

• 指定したurlの画像がダウンロードやデコードできない場合に単色画像へフォールバックする

• 画像のメタデータで指定された画像の向きを自動的に反映させる

image() 記法の定義は以下の通りです:

image() = image( <image-tags>? [ <image-src>? , <color>? ]! )
<image-tags> = [ ltr | rtl ]
<image-src> = [ <url> | <string> ]

<string>をimage()で使う場合、それは<url>を表します。 CSSのURLで一般的な通り、相対URLは絶対URLへ解決されます （Values & Units [CSS-VALUES-3]で記載） 指定されたimage()値が算出されるときに解決されます。

画像にEXIFなどのメタデータで向きが指定されている場合は、 UAはそのメタデータに従って画像を回転または反転し、正しい向きに表示しなければなりません。

2.5.1. 画像フォールバック

image()でURLと<color>の 両方が指定された場合、URLが無効画像または読み込み中画像を表すときは、 image()関数はURLが指定されていないかのように動作し、 § 2.5.3 単色画像で指定された単色画像を生成します。

URLのみが指定され（<color>なし）、 それが無効画像または読み込み中画像を表した場合、 image() 関数も同じものを表します。

body      { color: black; background: white; }
p.special { color: white; background: url("dark.png") black; }

body      { color: black; background: white; }
p.special { color: white; background: image("dark.png", black); }

2.5.2. 画像フラグメント

image()で指定されたURLがリソースの一部 （例: メディアフラグメント識別子の利用） を表す場合、その部分が文脈から切り出され、独立した画像として利用されます。

background-image: image('sprites.svg#xywh=40,0,20,20')

作者がCSSの将来互換パースルールを活用して画像スライスのフォールバックを提供できるように、 image()記法をサポートする実装は xywh=#,#,#,#形式のメディアフラグメント識別子を image()で指定した画像に対し必ずサポートしなければなりません。[MEDIA-FRAGS]

background-image: url('swirl.png'); /* 古いUA用 */
background-image: image('sprites.png#xywh=10,30,60,20'); /* 新しいUA用 */

URLが実装で理解できない、またはその画像種別で有効でないフラグメント識別子構文を使う場合、 そのURLは無効画像として扱わなければなりません。

注: このエラーハンドリングはimage()限定であり、 URLの定義自体にはありません（後方互換性のため）。

2.5.3. 単色画像

image() 関数で<color> 引数のみ（URLなし）が指定された場合、 指定色の単色画像（自然サイズなし）を表します。

background-image: image(rgba(0,0,255,.5)), url("bg-image.png");

2.5.4. 双方向対応画像

<image-src>sを列挙する前に、 作者は画像の方向性を指定できます（HTML要素にdir属性を追加するのと同様）。 方向付き画像が逆のdirectionを持つ要素上で使われた場合は、 インライン方向で画像を反転する必要があります （例えばインライン方向がX軸ならscaleX(-1)で変形したかのように）。

注: これを宣言しなければ 画像には方向性が一切付与されず、 周囲要素の方向性も考慮されません。

<ul style="list-style-image: image(ltr 'arrow.png');">
  <li dir='ltr'>My bullet is on the left!</li>
  <li dir='rtl'>MY BULLET IS ON THE RIGHT!</li>
</ul>

⇒ My bullet is on the left!
  !THGIR EHT NO SI TELLUB YM ⇐

2.6. 画像の合成: cross-fade()記法

画像間の遷移を行う際、 CSSでは開始画像と終了画像を合成した中間画像を明示的に指定する必要があります。 これはcross-fade()関数で実現されます。 どの2つの画像を合成するか、 遷移がどの程度進んだかを示します。

注: 作者はcross-fade() 関数を使って、単色で画像に色を付けたり、 ラジアルグラデーションと合成してページの特定エリアをハイライト表示したりなど、 シンプルな画像操作にも利用できます。

cross-fade()の構文は次の通りです:

cross-fade() = cross-fade( <cf-image># )
<cf-image> = [ <image> | <color> ] && <percentage [0,100]>? 

この関数は 1つ以上の画像を合成して生成された画像を表します。

<percentage>は 画像同士をブレンドする際、それぞれの画像がどれだけ残るかを表します。 <percentage>は0%から100%まででなければなりません。 それ以外は無効です。

パーセンテージを省略した場合、 指定されたすべてのパーセンテージを合計し100%から引き、 結果を0%で切り捨て、 その値を省略された画像数で等分して算出時に割り当てます。

<color>を指定した場合は、 それは「自動」サイズ（合成画像のサイズ決定には関与しない。詳細は後述）を持つ単色画像を表します。

2.6.1. cross-fade()のサイズ指定

cross-fade()で表される画像のサイズは、 関数に与えた<image>引数のサイズの重み付き平均となります。 <color>引数は影響しません。 算出方法は以下の通りです:

2.6.2. cross-fade()の描画

cross-fade()で表される画像は、 関数の各引数の重み付き平均として算出されます:

2.6.3. 複雑なcross-fade()の単純化

WGの決議により、 画像の「等価性」を定義し、算出値時に「同じ」画像を合成して比率を合算する。

WGの決議により、 直接ネストしたcross-fade()は算出値時に パーセンテージを配分しフラット化する。cross-fade(A 10%, cross-fade(B 30%, C 70%) 90%) はcross-fade(A 10%, B 27%, C 63%)となる。

2.7. 要素を画像として利用: element()記法

element() 関数を使うと、文書内の要素を画像として利用できます。 参照先要素の見た目が変わると、画像も自動的に変化します。 例えばスライドショーの次/前のスライドのライブプレビューを作ったり、 キャンバス要素を参照して凝ったグラデーションやアニメーション背景を作る用途などに利用できます。

注: element()関数は参照要素の見た目のみを複製し、 実際の内容や構造は複製しません。 作者はこれを装飾目的のみに使うべきであり、 重要な内容を持つ要素をページ全体で複製するためにelement()を使ってはいけません。 その場合は要素を文書内に複数挿入してください。

element()の構文は次の通りです:

element() = element( <id-selector> )

<id-selector>はIDセレクターです [SELECT]。

外部文書（例: SVGペイントサーバ）内の要素を参照する必要はあるか？ それともurl()で十分か？

この名前はGCPMのやや似た関数と衝突している。 何らかの解決が必要。

要素の「リフレクション」を 背景画像や疑似要素で行いたい。 サイクル検出を引き起こさないよう特別な扱いが必要。

overflow:paged時、 ビュー内の単一ページをどう指定する？

element() 関数は引数でマッチした要素を参照します。 まずelementSourcesマップからIDを検索し、 見つからなければ文書内を検索します。 複数の要素が一致した場合は最初の要素を参照します。

element()関数が表す画像は、要素が文書内で可視かどうかにより異なります:

描画されている要素であり、 置換要素の子孫でなく、 スタッキングコンテキストを生成している場合

関数は参照要素の装飾境界ボックスと等しい自然サイズの画像を表します:

• CSSレンダリングモデルで描画される要素の場合、 装飾境界ボックスは主ボックスの全フラグメントの border-image areaを すべて含む最小の軸揃え矩形です
• SVGレンダリングモデルで描画される要素の場合は SVGで定義された装飾境界ボックス

注: 画像はデフォルトで境界外をクリップするため、 box-shadowなど装飾が装飾境界ボックス外にはみ出してもクリップされます。

画像は参照要素およびその子孫を（文書内と同じサイズで） 無限のtransparentキャンバス上に描画し、 装飾境界ボックスの端が画像の端に一致するよう位置決めします。

要素にある程度のスタッキングコンテキストが必要なのは効率的実装のためと思われる。 完全なスタッキングコンテキストが必要か？疑似スタッキングコンテキストで十分か？ 通常はスタッキングコンテキストである必要があるか、それともelement()描画時だけそうすればよいか？

参照要素または祖先にtransformが適用されている場合、 画像描画時にはそのtransformを無視しなければなりません。[CSS3-TRANSFORMS]

参照要素がページをまたいで分断されている場合は、 ページ内容領域をページ分割方向に連結したかのように表示します（ページ端は初期包含ブロックの開始端に揃える）。行やカラムで分断された場合は装飾境界ボックスで描画します。

実装は参照要素の既存ビットマップデータを再利用しても、画像サイズに応じて高品質で再生成しても構いません （例: 参照要素がSVGフラグメントなら）。 後者の場合でも画像内のレイアウトは変更してはいけません。 つまり、画像は参照要素と同じ見た目でなければなりません（ラスタライズ品質を除く）。

やや極端な例ですが、 p 要素を文書内の別の場所の背景として再利用できます:

<style>
#src { color: white; background: lime; width: 300px; height: 40px; position: relative; }
#dst { color: black; background: element(#src); padding: 20px; margin: 20px 0; }
</style>
<p id='src'>I’m an ordinary element!</p>
<p id='dst'>I’m using the previous element as my background!</p>

描画されていない要素だがペイントソースを提供する場合

関数は自然サイズとペイントソースの見た目を持つ画像を表します。 ホスト言語がペイントソースのサイズ・見た目を定義します。

例えばelement() 関数でHTML文書内のSVG <pattern>要素を参照できます:

<!DOCTYPE html>
<svg>
  <defs>
    <pattern id='pattern1'>
      <path d='...'>
    </pattern>
  </defs>
</svg>
<p style="background: element(#pattern1)">
  I’m using the pattern as a background!
  If the pattern is changed or animated,
  my background will be updated too!
</p>

HTMLでは canvas, img, video などの要素がペイントソースを提供します。 これにより、CSSは例えば表示されていないcanvasに描画した内容を参照できます:

<!DOCTYPE html>
<script>
  var canvas = document.querySelector('#animated-bullet');
  canvas.width = 20; canvas.height = 20;
  drawAnimation(canvas);
</script>
<canvas id='animated-bullet' style='display:none'></canvas>
<ul style="list-style-image: element(#animated-bullet);">
  <li>I’m using the canvas as a bullet!</li>
  <li>So am I!</li>
  <li>As the canvas is changed over time with Javascript,
      we’ll all update our bullet image with it!</li>
</ul>

その他

関数は無効画像を表します。

例えば、次のようなelement()の使い方はいずれも透明な背景になります:

<!DOCTYPE html>
<p id='one' style="display:none; position: relative;">one</p>
<iframe src="http://example.com">
  <p id='two' style="position: relative;">I’m fallback content!</p>
</iframe>
<ul>
  <li style="background: element(#one);">
    display:noneの要素は描画されず、P要素はペイントソースを提供しません。
  </li>
  <li style="background: element(#two);">
    IFRAMEのような置換要素の子孫もelement()で利用できません。
  </li>
  <li style="background: element(#three);">
    "three"というIDの要素が存在しないため、これも透明画像になります。
  </li>
</ul>

要素は、関連付けられたボックスを持たない場合、描画されていないとみなされます。 例えば要素や祖先がdisplay:noneの場合などです。 ホスト言語は他にも描画されていないとみなす条件を定義できます。 例えばSVGでは、<defs>要素の子孫すべては描画されていないとみなされます。

<!DOCTYPE html>
<script>
function navigateSlides() {
  var currentSlide = ...;
  document.querySelector('#prev-slide').id = '';
  document.querySelector('#next-slide').id = '';
  currentSlide.previousElementSibling.id = 'prev-slide';
  currentSlide.nextElementSibling.id = 'next-slide';
}
</script>
<style>
.slide {
  /* element()可能にするにはスタッキングコンテキストが必要 */
  position: relative;
}
#prev-preview, #next-preview {
  position: fixed;
  ...
}
#prev-preview { background: element(#prev-slide); }
#next-preview { background: element(#next-slide); }
</style>
<a id='prev-preview'>Previous Slide</a>
<a id='next-preview'>Next Slide</a>
<section class='slide'>...</section>
<section class='slide current-slide'>...</section>
...

2.7.1. ペイントソース

ホスト言語は一部の要素がペイントソースを提供すると定義できます。 ペイントソースは固有の見た目を持ち、レイアウトや描画なしでも具体的オブジェクトサイズが得られるため、 描画されていない場合でも画像として使えます。

HTMLでは img, video, canvas 要素がペイントソースを提供します。

SVGでは、ペイントサーバを提供する要素がペイントソースとなります。注: SVG1.1では <linearGradient>、<radialGradient>、 <pattern> 要素がペイントソースを提供します。 これらは仕様で説明される通りに描画され、座標系は次のように定義されます:

objectBoundingBox

座標系の原点は描画先の具体的オブジェクトサイズ矩形の左上隅で、 幅や高さも具体的オブジェクトサイズと同じです。 1つのユーザー座標は具体的オブジェクトサイズの幅・高さとなります。

userSpaceOnUse

座標系の原点は描画先の具体的オブジェクトサイズ矩形の左上隅で、 幅や高さも具体的オブジェクトサイズと同じです。ユーザー座標はCSSのpx単位と等価なサイズです。

注: 今後のバージョンで、外部文書のペイントソースや、 スクリプト専用で文書に挿入しないものを参照する方法が定義される予定です。

2.7.2. 文書外ソースの利用: ElementSources インタフェース

element()関数は通常は文書内の要素を選択しますが、 ペイントソースを提供する要素は 文書内に挿入されていなくても構いません。 例えばHTMLの canvas 要素はスクリプトだけで生成・管理・描画でき、 文書に直接挿入する必要はありません。

必要なのは要素を参照できる方法だけです。 IDセレクターでは文書外の要素は選択できません。 elementSourcesマップオブジェクトでこれを実現します。

partial namespace CSS {
  [SameObject] readonly attribute any elementSources;
};

elementSourcesマップ内で キーが文字列で、値がペイントソースを提供するオブジェクトの場合は element()関数で参照できます。

element()が<id-selector>を使う場合は、 そのID値（先頭の#を除く）を 最初にelementSourcesマップで検索します:

• 見つかり、それがペイントソースを提供する場合は element()関数はそのペイントソースを表します。
• 見つかるが、ペイントソースを提供しない場合は element()関数は無効画像となります。
• マップにIDが見つからない場合は、通常通り文書内を検索します。

このIDセレクターの再利用はMozillaの挙動に合わせている。 文法の先頭にすぐ<custom-ident>を持ってくるのは避けたいため。 もう1つの案は、言語定義キーワード+<custom-ident>とすること。 例: element(external fancy)など。 名前案募集中。

<script>
var bg = document.createElement('canvas');
bg.height = 200;
bg.width = 1000;
drawFancyBackground(bg);
CSS.elementSources.set('fancy', bg);
</script>
<style>
h1 {
  background-image: element(#fancy);
}
</style>

2.7.3. サイクル検出

element()関数は、要素自身を背景に使うなど 無意味な循環関係を作ることができます。 こうした関係は依存グラフを管理し一般的なサイクル検出アルゴリズムを使えば確実に検出・解決できます。

依存グラフは次のようなエッジで構成されます:

• すべての要素はその子孫に依存する
• A要素のプロパティがelement()でB要素を参照している場合、 AはBに依存する
• ホスト言語が要素が他の要素描画を参照する手段を定義している場合、 参照元要素は参照先要素に依存する。 例: SVGの<use>要素は参照先に依存する

このグラフに循環があれば、 その循環に関与するelement()関数は無効画像となります。

3. グラデーション

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

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

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

グラデーションは、開始点と終了点、そしてグラデーションライン（グラデーションの種類によっては直線、半直線、または螺旋になる場合もあります）を定義し、 このライン上の各点で色を指定することで表現します。 それらの色は滑らかに補間されて線全体を塗りつぶし、 各グラデーション型ごとにこのグラデーションラインの色を使って、実際のグラデーション画像を生成します。

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

このレベルでは<color-interpolation-method>引数が linear-gradient()およびrepeating-linear-gradient()に追加されました。 これはグラデーションライン上の色補間時に使う色空間や経路を指定します。 詳細はCSS Color 4 §  12. 色補間参照。

<linear-gradient-syntax> =
  [ [ <angle> | <zero> | to <side-or-corner> ] || <color-interpolation-method> ]? ,
  <color-stop-list>
<side-or-corner> = [left | right] || [top | bottom]

3.1.1. 色空間が補間に与える影響：例

このセクションは規範的ではありません。

色空間が補間に与える影響は大きい場合があります。

グラデーション補間に極座標色空間（polar）を使うと、 色停止点の色相が大きく離れている場合でも 彩度の低下を避けることができます。 極座標色空間での補間は本質的にクロマを保存しますが、 中間色がガマット外になりやすいため、 その場合はガマットマッピングで戻されます。

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

3.2.1. <color-interpolation-method> の追加

このレベルでは、<color-interpolation-method>引数が radial-gradient()およびrepeating-radial-gradient()に追加されました。 これはグラデーションライン上で色補間を行う際に使用する色空間と経路を指定します。 詳細は CSS Color 4 §  12. 色補間 を参照してください。

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

3.2.2. <radial-size> の拡張

このレベルでは、<radial-size> のオプションを circle() や ellipse() の<basic-shape>値の追加分も含めて拡張しています：

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

2つの要素からなる値は、circle を <radial-shape> として指定した場合は無効です。 それ以外の場合は楕円の水平方向（1番目）と垂直方向（2番目）の半径を示します。

circle の場合、 <percentage>値は グラデーションボックスの幅と高さの「スケーリングされた対角線」に対して解決されます：sqrt(width² + height²)/sqrt(2)。

3.3. 円錐グラデーション: conic-gradient() 記法

円錐グラデーションは、円の中心を指定する点が放射状グラデーションと似ていますが、色停止点が中心から伸びる直線上ではなく 円周上に配置される点が異なります。 そのため、中心から外側に進むごとに色が変化するのではなく、中心の周囲を回転するごとに色が滑らかに変化します。

円錐グラデーションは、回転角、グラデーションの中心、そして色停止点リストを指定することで定義します。 線形・放射状グラデーションでは色停止点が<length>で指定されますが、 円錐グラデーションでは<angle>で指定します。 その後、中心から放射状にすべての方向へ線を引き、 各線の色はグラデーションラインと交差する点の色と等しくなります。

注: このグラデーションが「conic」「conical」と呼ばれるのは、 色停止点を左右で大きく明度差を付けると、上から見た円錐のようなパターンになるためです。 「angle」グラデーションとも呼ばれることがあり、 放射線の回転角を変化させることで生成されます。

この例は、conic-gradient(at 25% 30%, white, black 60%) をどのように描画するかを視覚的に示しています。色停止点の位置は常に角度へ解決されるため、at 25% 30% の効果はグラデーションの2次元平行移動のみであり、グラデーションの描画自体には影響しません。

3.3.1. conic-gradient() の構文

円錐グラデーションの構文は以下の通りです：

conic-gradient() = conic-gradient( [ <conic-gradient-syntax> ] )
<conic-gradient-syntax> =
  [ [ [ from [ <angle> | <zero> ] ]? [ at <position> ]? ] || <color-interpolation-method> ]? ,
  <angular-color-stop-list>

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

<angle> | <zero>

グラデーション全体をこの角度だけ回転させます。 省略時は 0deg です。 <angle> が0の場合は単位指定子を省略できます。

<position>

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

通常、円錐グラデーションでは0degでの鋭い切り替わりは望ましくありませんが、最初と最後のカラーストップを同じ色にすることで回避できます。これを自動化するキーワードを導入しても良いかもしれません。

グラデーションのクリッピング用に半径（内半径・外半径）があると便利か？その場合、カラーストップ位置にも長さ指定を許容できる。

楕円型円錐グラデーションは有用か？グラフィックスライブラリでサポートされている？

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

カラーストップは、グラデーションライン上に配置されます。このラインはグラデーション中心を円状に取り巻いており、 0%と100%の位置はどちらも0degになります。 線形グラデーションと同様に、 0degはページの上方向を指し、 角度が増えるにつれて円を時計回りに移動します。

注: グラデーションラインはスパイラル（螺旋）を形成し、 そのうち0degから360degまでの区間だけが描画されていると考える方が分かりやすいかもしれません。 これにより、描画範囲外の角度が「重なる」ことに関する混乱を避けられます。

カラーストップは0%より前や100%より後に配置することもできますが、 これらの領域は直接描画には使われません。 ただしそうした位置のカラーストップも、補間や繰り返し（繰り返しグラデーション参照）を通じて 描画範囲内のカラーストップの色に影響を及ぼすことがあります。 例えば、conic-gradient(red -50%, yellow 150%) は 0degで赤みの強いオレンジ色（具体的には #f50）から始まり、 360degでオレンジがかった黄色（#fa0）に変化する円錐グラデーションを生成します。

グラデーションの任意の点での色は、まずグラデーション中心を基点とし その点を通る唯一の直線（レイ）を見つけます。 その後、このレイがグラデーションラインと交差する位置の色がその点の色となります。

3.3.3. 円錐グラデーションの例

以下のすべてのconic-gradient()の例は、特に記載がない限り 幅300px・高さ200pxのボックスに適用されているものとします。

background: conic-gradient(#f06, gold);
background: conic-gradient(at 50% 50%, #f06, gold);
background: conic-gradient(from 0deg, #f06, gold);
background: conic-gradient(from 0deg at center, #f06, gold);
background: conic-gradient(#f06 0%, gold 100%);
background: conic-gradient(#f06 0deg, gold 1turn);

background: conic-gradient(white -50%, black 150%);
background: conic-gradient(white -180deg, black 540deg);
background: conic-gradient(hsl(0,0%,75%), hsl(0,0%,25%));

background: conic-gradient(from 45deg, white, black, white);
background: conic-gradient(hsl(0,0%,75%), white 45deg, black 225deg, hsl(0,0%,75%));

background: conic-gradient(white 45deg, black 225deg, white 405deg);

background: radial-gradient(closest-side, gray, transparent),
            conic-gradient(red, magenta, blue, aqua, lime, yellow, red);
border-radius: 50%;
width: 200px; height: 200px;

background: radial-gradient(closest-side, gray, transparent),
            conic-gradient(in hsl longer hue, red 0 100%);
transform: scaleX(-1);
border-radius: 50%;
width: 200px; height: 200px;

background: conic-gradient(yellowgreen 40%, gold 0deg 75%, #f06 0deg);
border-radius: 50%;
width: 200px; height: 200px;

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

linear-gradient()、radial-gradient()、conic-gradient() に加え、この仕様は repeating-linear-gradient()、 repeating-radial-gradient()、 repeating-conic-gradient() の値を定義します。 これらの記法は、それぞれの非繰り返し型と同じ値を取り、同じ意味で解釈されます。

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

background: repeating-conic-gradient(gold, #f06 20deg);

background: repeating-conic-gradient(
        hsla(0,0%,100%,.2) 0deg 15deg,
        hsla(0,0%,100%,0) 0deg 30deg
    ) #0ac;

background: repeating-conic-gradient(black 0deg 25%, white 0deg 50%);
background-size: 60px 60px;

background: conic-gradient(black 25%, white 0deg 50%, black 0deg 75%, white 0deg);
background-size: 60px 60px;

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

グラデーション内の色は、カラーストップ（<color>とグラデーションライン上の対応位置）と、カラートランジションヒント（2つのカラーストップ間の中間点を表す位置） を使って指定します。これらはグラデーションライン上に配置され、ライン上のすべての点の色を定義します。 （各グラデーション関数は グラデーションラインの形状と長さ、 開始点と終了点を定義します。上記参照。）

グラデーションフィールド全体の色は、グラデーション関数で指定されたように グラデーションライン上の特定の点に結びつけることで決まります。 UAは「ディザリング」を行い（個々のピクセルをグラデーションライン上の近隣色でランダムに切り替える）、 より滑らかなグラデーションにすることがあります。

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

カラーストップやトランジションヒントは カラーストップリストで指定します。 これは1つ以上のカラーストップの間に オプションのトランジションヒントを挟んだリストです:

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

<angular-color-stop-list> =
  <angular-color-stop> , [ <angular-color-hint>? , <angular-color-stop> ]#?
<angular-color-stop> = <color> <color-stop-angle>?
<angular-color-hint> = <angle-percentage> | <zero>
<color-stop-angle> = [ <angle-percentage> | <zero> ]{1,2}

<color-stop> = <color-stop-length> | <color-stop-angle>

2つの位置を持つカラーストップは、 同じ色でそれぞれの位置にカラーストップを2つ指定するのと同じ意味になります。

注: 通常、この場合2つの位置の間は単色の「帯」になりますが、 longerな<color-interpolation-method>を使うと その間が虹のようにグラデーションになります。

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

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

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

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

各カラーストップ位置では、 グラデーションラインの色はそのカラーストップの色になります。 最初のカラーストップより前は グラデーションラインは最初のカラーストップの色、 最後のカラーストップより後は グラデーションラインは最後のカラーストップの色です。 それ以外の各ペア間では グラデーションラインの色は2つのカラーストップの色の間で補間されます。 補間は指定された色空間で行われ、不足成分の扱いは CSS Color 4 § 12.2 Interpolating with Missing Componentsに、 色相補間はCSS Color 4 § 12.4 Hue Interpolationに、 プレマルチプライドアルファはCSS Color 4 § 12.3 Interpolating with Alphaに従います。 グラデーション関数で<color-interpolation-method>が指定されていない場合、 補間に使う色空間はデフォルトのOklab（[css-color-4]で定義）になります。

注: <color-interpolation-method>は ストップ間の色だけに影響します。 最初より前/最後より後の色は 補間方法に関わらず最初/最後のストップと同じ色です。

linear-gradient(in oklch, red, #888, green)

デフォルトでは、この補間は線形です — 2つのカラーストップの間で 25%、50%、75%の位置なら それぞれ2色の25%、50%、75%混合色になります。

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

注: トランジションヒントは「中間色」（2つのカラーストップの50%混色）がどこに現れるかを指定する。 ヒントがちょうど2つのカラーストップの中間にある場合は上記の補間手順は通常の線形補間と同じ結果になる。 それ以外の場合は、2つの色停止点間で滑らかな指数曲線となり、中間色がヒントで指定した位置に現れる。

background: linear-gradient(to right, red 0%, blue 100%);

background: linear-gradient(to right, red 0%, 25%, blue 100%);

複数のカラーストップが同じ位置にある場合、リストの最初の色から最後の色へ瞬時に切り替わる（無限に狭い変化）ため、その位置で色が急激に変化する。

3.5.3. カラーストップの自動補完

各used位置のカラーストップを決定する際、次の手順を順番に適用する:

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

これらの規則を適用した後は、すべてのカラーストップおよびトランジションヒントに明確な位置と色が割り当てられ、順序は昇順に揃う。

注: 単位（px、em、%など）を混在させると、カラーストップが意図せず前に移動してしまう場合があるので注意。 たとえば background-image: linear-gradient(yellow 100px, blue 50%) は背景エリアが200px以上なら補完は発生しないが、 150pxならblueのカラーストップは75pxに相当し、yellowのカラーストップより前になるため、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. 1D画像値：<image-1D>型とstripes()記法

<image>値は2次元（2D）画像を表し、 <color>は0次元（0D）画像（いずれの軸にも変化しない）とみなすことができますが、 文脈によっては、抽象的で方向を持たない単一軸上の色を指定する 一次元（1D）画像が必要な場合があります。 この軸をペイントラインと呼びます。 <image-1D>型はこのような1D画像を表し、 stripes() 関数記法も含みます：

<image-1D> = <stripes()>
<stripes()> = stripes( <color-stripe># )
<color-stripe> = <color> && [ <length-percentage> | <flex> ]?

stripes() 関数は、1D画像をカンマ区切りにした色付きストライプのリストとして定義し、 各ストライプは指定された順にペイントライン上に隙間なく並べられます。

各<color-stripe>は、指定された<color>と太さを持つ単色のストライプを定義します。 太さを省略した場合、既定値は1frです。 太さの値の解釈は次の通りです：

<percentage [0,100]>

パーセンテージの太さはtotal widthに対する割合となります。 0%から100%まで（両端含む）の値のみ有効です。

<length [0,∞]>

負の長さ値は無効です。

<flex>

<flex>はtotal widthに対する比率として評価されます。 その関数内のすべての<flex>エントリ合計に対する割合であり、 非<flex>エントリの太さを引いた残り（引き算結果がマイナスなら0とする）に対して分配されます。 <flex>値の合計が1fr未満の場合、 残りの長さに合計の値を掛けたものが分配に使われます。

total widthはstripes()関数が使われる文脈で定まります。 ストライプ合計がtotal widthより小さい場合、 残りの長さのペイントラインは透明な黒で塗られ、最後にtransparentを指定したのと同じになります。 合計が大きい場合、total widthを超えたストライプやその一部は切り捨てられます。

この関数の算出値は、 各ストライプを算出色と、<flex> または算出済み<length-percentage>として与えた順序付きリストです。

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

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

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

fill

置換コンテンツは要素の内容ボックス全体を埋めるようにサイズ調整されます。 オブジェクトの具体的オブジェクトサイズは、その要素の使用幅・高さとなります。

none

置換コンテンツは要素の内容ボックスに合わせてリサイズされません。 オブジェクトの具体的オブジェクトサイズは、サイズ指定なしのデフォルトのサイズ決定アルゴリズムと、 置換要素の使用幅・高さを既定オブジェクトサイズとすることで決まります。

contain

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

もしscale-downフラグが指定された場合は、noneまたはcontainを指定した場合のうち、 より小さい具体的オブジェクトサイズになる方でサイズが決定されます。

注: noneとcontainはどちらもコンテンツの自然なアスペクト比を尊重するため、「小さい」の定義が一意になります。

cover

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

もしscale-downフラグが指定された場合は、 noneまたはcoverを指定した場合のうち、 より小さい具体的オブジェクトサイズになる方でサイズが決定されます。

注: noneとcoverはどちらもコンテンツの自然なアスペクト比を尊重するため、「小さい」の定義が一意になります。

scale-down

contain scale-downと同じ意味です。

コンテンツが置換要素の内容ボックスを完全に埋めない場合、未充填部分には置換要素の背景が表示されます。 置換要素は常に内容ボックスでコンテンツをクリップするので、コンテンツがはみ出すことはありません。 オブジェクトを内容ボックス内でどう位置決めするかはobject-positionプロパティを参照してください。

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

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

6. 画像処理

6.1. 画像解像度の上書き: image-resolution プロパティ

画像解像度は、 単位長さあたりの画像ピクセル数（例: ピクセル/インチ）として定義されます。 一部の画像フォーマットは画像の解像度情報を記録できます。 この情報は、フォーマット時に画像の実際のサイズを決定する際に役立つ場合があります。 ただし、この情報が間違っていることもあり、その場合は無視されるべきです。 デフォルトでは、CSSは1画像ピクセルをCSSのpx単位1つ分とみなします。 ただし、image-resolutionプロパティで他の解像度を使うこともできます。

image-set()記法は画像の自然解像度を変更でき、理想的にはこのプロパティを設定しなくても自動的に反映されるべきです。 どう対応するのがよいでしょうか？ 初期値をauto（「1dppx。ただしCSSで別指定があればそれに従う」）にする？ image-resolutionがCSSで別の方法で解像度指定された画像には無効となると明記する？ それともimage-set()は常に1dppx画像を生成すると明記する？

image-resolutionプロパティは、 要素内または上で使われるすべてのラスター画像の推奨解像度を指定します。 これはコンテンツ画像（置換要素や生成コンテンツなど）にも装飾画像（background-imageなど）にも影響します。 画像の推奨解像度は画像の自然寸法を決定するのに使われます。 値の意味は以下の通りです：

<resolution>

推奨解像度を明示的に指定します。 この場合の「ドット」は1画像ピクセルを指します。

from-image

画像の推奨解像度は画像フォーマットで指定されたもの（自然解像度）となります。 画像自身が解像度を指定しない場合は、明示指定があればそれを、なければ1dppxを使います。

注: CSS Images 3 § 2.1.2 画像メタデータは、どのメタデータが利用できるかに制限を設けています。

snap

"snap"キーワードがある場合、算出<resolution>（あれば）は、 1画像ピクセルが整数個のデバイスピクセルに対応するよう最も近い値へ丸められます。 解像度が画像から取得された場合、使用される自然解像度も同様に調整されます。

SVGなどのベクターフォーマットは自然解像度を持たないので、このプロパティはベクター画像には影響しません。

img.high-res {
  image-resolution: 300dpi;
}

img { image-resolution: from-image }

img { image-resolution: from-image 300dpi }
img { image-resolution: 300dpi from-image }

img { image-resolution: 300dpi }

img { image-resolution: 300dpi snap; }

img { image-resolution: snap from-image; }

7. 補間

このセクションでは、本仕様で定義された新しい値型の補間方法について説明します。 これはCSS TransitionsやCSS Animationsなどのモジュールで利用されます。

もし以下のアルゴリズムが単に2つの値を「補間する」「遷移する」とだけ記載し詳細がない場合は、 Transitions仕様で述べられている通りに補間すべきです。 それ以外の場合、アルゴリズム内で変数tが参照されることがあります。 これは0%から100%まで変化する数値で、遷移の進行状況を示します。 遷移のduration、経過時間、タイミング関数に基づいて決まります。 たとえば線形タイミング関数、duration: 1sの場合、0.3s経過時点のtは30%となります。

7.1. <image>の補間

すべての画像は補間可能ですが、 一部特殊な画像型（グラデーションなど）は独自の補間ルールを持つことがあります。 一般的には、画像はstart imageのサイズにスケーリングし、2つをクロスフェードしながらend imageのサイズへ遷移させて補間します。

具体的には、補間の各時点での画像は cross-fade( (100% - t) start image, end image) と等価です。

画像なしへの補間（例："background-image: url(foo);" から "background-image: none;" など）の特例処理が必要。

7.2. cross-fade()の補間

cross-fade()の3つの成分はそれぞれ独立に補間されます。 これにより入れ子のcross-fade()記法ができる場合もあります。

7.3. <gradient>の補間

この節は要レビュー・改善。 特にlinear-gradient()の扱いが不完全で、 「グラデーションラインの長さ」（0%〜100%間の距離）を始点終点間で明示的に補間する必要があると思われます。 そうしないと途中で伸びてから縮むようなアニメになる場合があります。

グラデーション画像もCSSトランジションやアニメーションで直接補間でき、 一方のグラデーションからもう一方へなめらかにアニメーションできます。 補間できるグラデーションにはいくつか制約があります：

1. 始点・終点両方のグラデーションは同じ関数で記述されている必要があります。 （例：linear-gradient()からlinear-gradient()への遷移は可ですが、 linear-gradient()から radial-gradient()や repeating-linear-gradient()への遷移は不可。）

2. 始点・終点両方のグラデーションは同じ数の<color-stop>を持つ必要があります。 この目的では、すべてのrepeatingグラデーションは無限個のカラーストップを持つものとみなされるため、 repeatingグラデーション同士は一致します。

3. どちらのグラデーションも<length>と<percentage>のカラーストップを混在させてはなりません。

この3つすべてを満たす場合、下記のように補間します。 3つ目だけ失敗した場合は50%の時点でパッと切り替える（将来の仕様で別指定がない限り）。 最初2つのどちらかでも失敗した場合は、cross-fade()による汎用画像補間と同様の方法で補間します。

注: 50%で急激に切り替えるのは、cross-fadeに依存しないようにするためで、将来的により賢い補間規則を追加できるようにするためです。

1. 始点・終点両方のグラデーションを明示形へ変換：

   線形グラデーションの場合:

   • 方向が<angle>で指定されていれば、それが明示形です。

   • そうでなければ、方向を[0deg,360deg)の<angle>に変換し、同等の描画になるようにします。

     始点・終点両方でキーワード指定だった場合、対応する角度の差が180deg超なら、小さい角度側に360deg加算します。例: "to left"（270deg）から"to top"（0deg）への遷移なら、時計回り1/4回転で遷移します（反時計回り3/4回転にはならない）。

   放射グラデーションの場合:

   • サイズが2つの<length>または<percentage>の場合は明示形です。

   • そうでない場合は等価な最終形状になる2つの<length>へ変換します。 <radial-shape>がcircleなら ellipseに変換します。

2. 各コンポーネントおよびカラーストップを独立に補間します。 線形グラデーションのコンポーネントは角度のみ。 放射グラデーションは中心の水平・垂直位置と、軸長（水平・垂直）です。

3. カラーストップ補間は、始点と終点グラデーションの各カラーストップを同じインデックス同士で対応付けます。 repeatingグラデーションの場合、最初の指定ストップ同士を対応させ、残りも繰り返し・シフトしてインデックスを揃えます。 その後、各ペアごとに位置・色を独立に補間します。

7.4. stripes()の補間

グラデーション同様、2つのstripes()も補間でき、1つの画像からもう1つの画像へのスムーズなアニメーションが可能です。 stripes()の補間にはいくつか制約があります：

1. 始点・終点両方の画像が同じ数の<color-stripe>を持つこと。

2. 補間される各ストライプの太さは同じ型であること。 つまり両方とも<length-percentage>型か、<flex>型のいずれかで揃っていること。

この2つを満たす場合は下記の方法で補間します。 2つ目だけ失敗した場合は50%の時点で急に切り替える（将来の仕様で別途指定がない限り）。 1つ目が失敗した場合はcross-fade()と同様の汎用画像補間を用います。

注: 50%で急に切り替えるのはcross-fade依存を避け、将来より良い補間規則追加を可能にするためです。

1. 各コンポーネントおよびストライプを独立に補間する。

2. ストライプ補間は、始点と終点画像の各ストライプをインデックスで対応させ、それぞれの太さ・色を独立に補間する。

8. シリアライズ

このセクションは、本仕様で導入されたすべての新しいプロパティと値型のシリアライズ方法について説明します。 これはCSSオブジェクトモデル [CSSOM]とのインターフェイスのためのものです。

このモジュールで定義された関数をシリアライズする場合は、 それぞれの個別文法に従い、定義順で出力、 意味が変わらない限り省略可能な部分は省略し、 空白区切りトークンは単一スペースで連結、カンマの直後にもスペース1つだけ入れて出力します。

cross-fade()については、 必ず<percentage>をシリアライズしてください。

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

linear-gradient(rgb(255, 0, 0), rgb(255, 255, 0), rgb(0, 0, 0) 100px)

付録A: 廃止機能およびエイリアス

実装は-webkit-image-set()を、image-set()の構文時エイリアスとして受理しなければなりません。 （これは有効な値であり、引数もimage-set()と同じで、 パース時にimage-set()へ変換されます。）

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

注: [css-images-3]からの変更点はありません。

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

注: [css-images-3]からの変更点はありません。

11. 変更点

2023年2月17日 作業草案以降の変更点

• 外部URLのstyleリソース取得に関する説明を整理 (Issue 12065, Issue 12068, Issue 12086, Issue 12147)

• cross-fade()が1つ以上の引数を受け付けるようにした (Issue 11530)

• 角度付きカラーストップ/ヒントで>zero>を許可

• グラデーション回転で>zero>を明示的に許可

• ダブルポジションでストライプになる注釈修正。ストップリストの前後色注釈追加。 (Issue 11381)

• 最初・最後のストップ補完を手順分離し、単一ストップ時の挙動を明確化 (Issue 10092)

• カラーストップ1つでもOKにした (Issue 10092)

• cross-fade()の引数順をcolor-mix()と統一 (Issue 9405)

• stripes()関数の例画像を追加 (PR 9749)

• radial-gradient(circle)に<percentage>を追加し、 radial-gradient(ellipse)に<radial-extent>を2つ指定できるようにして radial-gradient()を circle()やellipse() <basic-shape>と整合させた。 (Issue 824)

• ニュートラル色と補間時のhue欠落例を追加 (Issue 4928)

• CSS Color 4のhue補間と欠落成分処理へのリンクを明示的に追加 (Issue 4928)

• image-set()で解像度/型省略を許可

• CSS Images 4のグラデーション定義にPR #8021の修正を適用 (Issue 9147)

• デフォルトのグラデーション補間色空間を明示 (Issue 7947)

• 重複していたrepeatingグラデーション定義を修正 (Issue 8797)

• repeatingグラデーション型の基本構文を追加 (Issue 8775)

• 型違いのstripes()補間の挙動を修正 (Issue 8614)

• urlリクエスト修飾子を追加し、リクエストパラメータを有効化 (PR 8222)

• image-set()の選択肢がすべて削除された場合は無効画像と明示 (Issue 8266)

2017年4月13日作業草案以降の変更点

• § 3.5 グラデーションカラーの定義の大幅な編集書き直し。

• 新しい<image-1D>データ型とstripes()関数を追加。 (Issue 2532)

• すべてのグラデーション関数に<color-interpolation-method>を追加。 (Issues 6094, 6667)

• 新しいobject-view-boxプロパティを追加。 (Issue 7058)

• image-set()の定義を[css-images-3]から引き継ぎ、以下を行った：

  • type()をimage-set()に追加。 (Issue 656)

  • -webkit-image-set()互換エイリアスを追加。 (Issue 6285)

• cross-fade()の定義を[css-images-3]から引き継ぎ、以下を行った：

  • cross-fade()が1つ以上の引数を取ることを明確化。

  • 画像だけでなく色も混合可能にアップデート。

  • 新しい関数引数のサイズや描画方法を詳細に定義。

  • cross-fade()画像ブレンディングの誤った定義を修正。

  • 計算の簡略化・比較に関する課題を追加。 (Issue 2852)

  (議事録, Changeset)

• 補間とシリアライズの記述を[css-images-3]から移行。

• 画像データの後に配置された画像メタデータは無視することを定義。詳しくはCSS Images 3 § 2.1.2 Image Metadataを参照。 (Issue 4929)

• 画像のローディングを定義。 (Issue 1984)

  • loading imageの定義を[css-images-3]からコピー。

  • ローディング・エラー処理をimage()の動作に統合。

  • 新しい画像が読み込まれる間、UAが古い画像を表示し続けてよいことを明示。

  • § 2.3 外部画像の取得を正しく定義。 (Issue 562, Pull Request 6715)

• CSS インターフェースをnamespaceへ変更。 (Issue 437)

• <angle> 値をconic-gradient()で単位なしゼロでも許可。 (Issue 1162, Changes)

• scale-downをobject-fitの他の値と組み合わせ可能に。 (Issue 1578)

• 不足していた<element()>を<image>データ型に追加。 (issue 5170)

• elementSourcesのIDL定義を修正。

• カラーストップ位置が必須となる文法エラーを修正。 (Issue 1334)

• プロパティ定義表をアップデート：

  • 「算出値」「アニメーション型」行を各モジュールで整合・表現厳密化・誤り修正。

  • 適切な箇所で新しいCSSブラケット付き範囲記法を使用。

  • 「メディア」行を削除。

• 「intrinsic dimensions」を、natural dimensionsに改名し、intrinsic sizesとの混同を回避。 (Issue 4961)

• <image>の算出値定義を[css-images-3]からコピー。 (Issue 4042)

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

• 各種マークアップ修正、プロパティ構文修正、インライン課題、スペル修正、例修正・改善、細かい編集修正。

• モジュールタイトル短縮。

2012年9月11日作業草案以降の変更点

• カラー補間ヒントを追加

• グラデーションカラーストップの2箇所指定構文を追加

• コニックグラデーションに開始角度を追加

• カラーストップの位置は色の前にも書けるように

• [css-images-3]と同一のテキストは参照に差し替え

• -webkit-image-set()エイリアス追加

Level 3以降の変更点

• image()記法を追加（Level 3から繰越）

• image-resolutionプロパティを追加（Level 3から繰越）

• element()記法を追加（Level 3から繰越）

• コニックグラデーションを追加

• すべてのグラデーション関数に<color-interpolation-method>を追加