この文書は「 CSS Image Values and Replaced Content Module Level 3(Candidate Recommendation 2012-04-17)」の日本語訳です。日本語訳は参考情報であって、公式な文書ではありません。また、翻訳に誤りがありえます。

この翻訳は訳者の都合により現在、もとの草案が更新されても更新する予定にありません。

その他注意書きや訳者への連絡先については、CSS2.1勧告の日本語訳についてを参照ください。

W3C

CSS 画像の値と置換コンテンツモジュール レベル3

2012-04-17 W3C Candidate Recommendation(勧告候補)

This Version:
http://www.w3.org/TR/2012/CR-css3-images-20120417/
Latest Version:
http://www.w3.org/TR/css3-images/
Editor's Draft:
http://dev.w3.org/csswg/css3-images/
Previous Version:
http://www.w3.org/TR/2012/WD-css3-images-20120112/
Disposition of Last Call Comments:
http://dev.w3.org/csswg/css3-images/issues-lc-2012
Issue Tracking:
http://www.w3.org/Style/CSS/Tracker/products/27
Feedback:
www-style@w3.org with subject line “[css3-images] … message topic …
Editors:
Elika J. Etemad (Mozilla)
Tab Atkins Jr. (Google)

概要

CSSは、画面、紙、スピーチなどで、構造化文書(HTMLやXMLなど)のレンダリングを記述するための言語である。このモジュールは、<image>型と置換要素に関連するCSSレベル3の機能を含む。これはCSSレベル2[CSS21]の機能を含んで拡張し、CSSレベル1[CSS1]を基礎とする。CSS2と比較した主な拡張機能は、<image>型への<url>型の一般化、‘<image>’型の追加、画像とCSSの他の置換コンテンツに対する一般的なサイズ変更アルゴリズム、および置換要素とCSSのレイアウトモデルの相互作用を制御する複数のプロパティである。

この文書の位置付け

この節は、公開時点におけるこの文書のステータスについて説明する。他の文書がこの文書に取って代わるかもしれない。W3Cが現在公開しているリストとテクニカルレポートの最新版は、W3C technical reports index at http://www.w3.org/TR/で見つけることができる。

Candidate Recommendationは、広く精査され、実施のための準備ができている文書である。W3Cは、この仕様の実装と、コメントを奨励する。この文書に関する議論は、公開メーリングリストwww-style@w3.orgアーカイブ参加の手引きを参照)上で行うことが望ましい。Eメールを送る際には、サブジェクトに“css3-images”を追加してほしい。できればこのように:“[css3-images] …コメントの要約…

Candidate Recommendationでの公開はW3Cメンバーの支持を意味するものではない。これは草案文書であり、いつでも更新、他の文章による置き換えや廃止扱いにされうる。進行中の作業以外のものとしてこの文章を引用することは不適切である。

この文書は(Style Activityの一部である)CSS Working Groupによって作成された。

この文書は2004年2月6日のW3C特許ポリシーの下で活動するグループによって作成された。W3Cは、グループの成果物に関するあらゆる開示特許の公開リストを管理する。ここには、特許開示にあたっての指示も含まれている。特許について十分に知識のある人物が、仕様にEssential Claim(s)が認められると判断した場合は、W3C特許ポリシーの第6章に従い情報を開示する必要がある。

この文書は、Last Call Working Draft(2012年1月12日)に基づいており、コメントの処分の結果を反映する変更を含む。

仕様がProposed Recommendationに進行できる前に、CRの終了条件が満たされなければならない。仕様は、2012年10月15日までProposed Recommendationにはならない。テストスイートと実装レポートがCandidate Recommendation期間中に行われる。

次の機能はat riskである:

  1. image()表記
  2. object-fit’、‘object-position’、‘image-orientation’、および‘image-resolution’プロパティ

目次

1. 概論

この節は規範的ではない。

CSS1およびCSS2において、‘background-image’プロパティで使用される画像の値は、単一のURL値によってのみ指定できた。このモジュールは、2次元画像を表現する追加の方法を導入する。たとえば、URIの示すフォールバックのリストとして、 またはグラデーションとして。

このモジュールはまた、ラスター画像を操作するための、およびCSSレイアウトアルゴリズムによって決定されるボックス内の画像のような置換要素のサイズ変更または位置決めするための複数のプロパティを定義する。また、画像およびその他の置換要素に対するCSSのサイズ変更アルゴリズムを汎用的な方法で定義する。

1.1. モジュール間の相互関係

このモジュールは、CSS3VALで定義される‘<image>’値の型を定義し拡張する[CSS3VAL]。さらに、このモジュールは、‘background-image’の‘<url>’型およびCSS1とCSS2の‘list-style-image’定義を置き換え、‘content’プロパティ値の‘<url>’の代わりとして‘<image>’を追加する。このモジュールは、2次元画像が予期される場所で‘<url>’の代わりに‘<image>’表記を使用するCSS2.1を越えたCSSの仕様を考える。(たとえば[CSS3BG]を参照。)

このモジュールで定義されるプロパティのうち、‘image-resolution’のみが ::first-lineおよび::first-letterを適用する。

1.2.

この仕様はCSS2.1由来のCSSプロパティの定義規約に従う[CSS21]。この仕様で定義されない値型は、CSS 2.1[CSS21]。他のCSSモジュールはそれらの値型の定義を拡張してもよい。たとえば[CSS3COLOR]が、この仕様と結合した場合、この仕様で用いられるように<color>値型の定義を拡張する。

さらに、これらの定義で列挙されるプロパティ指定値、この仕様で定義されるすべてのプロパティはまた、それらプロパティ値のようにinheritキーワードを受け入れる。読みやすさのために、明示的に繰り返さない。

2. 解像度の単位: <resolution>型

この仕様は<resolution>値型の一部として、次の単位を定義する:

dpi
インチあたりのドット
dpcm
センチメートルあたりのドット
dppx
px’単位あたりのドット

<resolution>’単位は、‘in’、‘cm’、 ‘px’CSSに収まるどのようにこれらの点の多く示すことにより、グラフィカルな表現の単一の"ドット"の大きさを表す。用途については、たとえばメディアクエリーでの‘resolution[MEDIAQ] または以下で定義される‘image-resolution’プロパティ。

CSSでの‘px’と‘in’は、CSSでは1:96の固定比率のため、‘1dppx’は‘96dpi’に等しいことに注意する。これはCSSで表示される画像のデフォルトの解像度に対応する。‘image-resolution’参照。

次の@media規則は、メディアクエリを使用している。[MEDIAQ] CSS‘px’単位ユニットごとに2以上のデバイスピクセルを使用するデバイスに特別なスタイル規則を割り当てる:

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

3. 画像の値: ‘<image>’型

<image>’値型は、2次元画像を示す。これは、URL参照画像表記 またはグラデーション表記をすることができる。その構文は次のとおり:

<image> = <url> | <image-list> | <element-reference>  | <gradient>

<image>’は、‘background-image’、‘list-style-image’、‘cursor’プロパティを含む、多くのCSSプロパティで使用できる[CSS21] (プロパティ値で‘<url>’コンポーネントを置き換える場所で)。

一部の場合、画像は、妥当な画像フォーマットでないリソースを指す‘<url>’のように、無効である。無効な画像は、内在寸法をもたない塗りつぶし色‘transparent’の画像としてレンダリングされる。ただし、無効な画像は、‘image()’表記として一部の文脈の中で特別な動作を持つ。

3.1. 画像参照および画像スライス: ‘<url>’型および‘url()’表記

画像を示すための最も簡単な方法は、URLで画像ファイルを参照することである。これは、CSS2.1で定義されるurl()’表記ですることができる[CSS21]

次の例では、背景画像は‘url()’構文で指定されている:

background-image: url(wavy.png);

UAがダウンロード、解析、または別の方法で画像としてURLで正常に内容を表示できない場合、無効な画像として扱われなければならない。

3.2. 画像のフォールバックと注釈: ‘image()

image()’関数は著者に以下を許可する:

image()’表記は次のように定義される:

<image-list> = image( [ <image-decl> , ]* [ <image-decl> | <color> ] )
<image-decl> = [ <url> | <string> | <element-reference> ]

ちょうどあたかもurl()’表記が使用されたかのように、‘image()’の内側の各‘<string>’または‘<url>’は画像を表す。CSSでのURLに対して通常、相対URLが絶対URLに解決される(値と単位[CSS3VAL]で説明されるように)。指定された‘image()’値が算出された場合に。

3.2.1. 画像フラグメント

image()’で指定されたURLが、リソースの一部を表す(たとえばメディアフラグメント識別子を使用する)場合、その部分は、文脈から切り取られ、スタンドアロンの画像として使用される。

たとえば、以下の画像(*)とCSSを与える:

[9 circles, with 0 to 8 eighths filled in]
background-image: image('sprites.svg#xywh=40,0,20,20')

要素の背景は、8等分ずつ埋められていく円で、(40px,0px)から始まり、20pxの幅と高さがある画像の一部となる。

(*) <img>のSVGサポートが必要。SVGを直接見るには画像をクリック。

著者が、画像スライスに対するフォールバックを提供するためにCSSの前方互換性解析規則を活用できるよう、‘image()’表記をサポートする実装は、‘image()’経由で指定される画像に対するメディアフラグメント識別子のxywh=#,#,#,#形式をサポートしなければならない[MEDIA-FRAGS]

画像フラグメントは、‘url()’表記でも使用できることに注意する。しかし、メディアフラグメント表記を解釈しないレガシーUAは、フラグメントを無視して、単に画像全体を表示する。

image()’表記はUAにメディアフラグメントをサポートすることを要求するので、著者は、画像のフラグメントURLを使用する際、フォールバックを提供するために、CSSの前方互換構文解析規則を活用できる:


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

3.2.2. 画像のフォールバック

関数が無効な画像でない最初の画像を表す場合、複数の‘<image-decl>’はコンマで区切りで指定できる。最後の引数は、最終のフォールバックとして機能するよう‘<color>’を指定できる。たとえば‘background-image’に対して、先行する‘<image-decl>’がいずれも使用できない場合、これは十分なコントラストを確保するために使用できる。最後の引数が‘<color>’の場合、それは内在寸法を持つ指定された色の塗りつぶし色の画像を表す。提供される‘<image-decl>’のすべてが無効な画像であり、フォールバック色が最後の引数として提供されなかった場合、全体の‘image()’関数は無効な画像として扱われなければならない。

以下の規則は、可能であればUAに‘wavy.svg’の読み込み、失敗すれば‘wavy.png’を読み込み、さらに失敗すれば‘wavy.gif’を表示する。たとえば、ブラウザがSVG画像をレンダリングする方法がわからないかもしれず、またPNGはサーバー移動のため一時的に404(ブラウザが画像としてデコードできない、HTMLの404ページを返す)であるかもしれず、よって、問題が修正されるまでGIF形式が使用される。

background-image: image("wavy.svg", 'wavy.png' , "wavy.gif");

画像の読み込みに失敗した場合でも、フォールバック色は依然として読み取り可能なテキストを保証するために使用ができる。たとえば、透明でない矩形な画像の場合、次のコードは正常に動作する:

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

画像が読み込まない場合、背景色は白いテキストが読み取り可能であることを保証するために存在する。しかし、画像が透明性を少し持つ場合、おそらく望まない形で、黒はその背後に見えるだろう。‘image()’関数はこのように書く:

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

画像を読み込む場合、黒はまったく表示されないが、画像が何らかの理由で失敗した場合、黒は現れ、白い背景の設定に対して白いテキストを防ぐだろう。

URLは、実装が理解しないフラグメント識別子の構文を使用したり、画像の種類に対する有効性を考慮しない場合、URLは無効な画像を表すものとして扱われなければならない。レガシーな適合性の理由のために、このエラー処理は、URLの定義でなくimage()に制限される。

たとえば、将来の仕様がフラグメント識別子をもつアニメーションGIFの特定のフレームを参照する方法を定義した場合、著者は、フォールバック画像をダウンロードする古いブラウザの代わりに、GIFのフレームを使用する新しいブラウザを準備して、次のようにを書くことができる:

background-image: image('cat_meme.gif#frame=5', 'lolcat.png');

3.2.3. 無地の画像

時には、直接‘<color>’型を受け入れないプロパティや関数に対して無地の画像が必要とするかもしれない。‘image()’関数は、次の用途で使用できる。任意のURLなしで色のみを指定することにより、関数が選ばれた色の無地の画像を表すためにすぐにフォールバックする。

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

上記において、背景は、青い透過色と重ねる画像"bg-image.png"となる。

4. グラデーション

グラデーションは、ある色から別の色へとなめらかにフェードする画像である。これらは一般に背景画像、ボタン、および他の多くのものでかすかな変化に対して使用される。この節で説明するグラデーションの表記は、ページをレンダリングする際に、UAが自動的に画像を生成できるよう、著者に簡潔な構文でこのような画像を指定できるようにする。<gradient>の構文は次のとおり:

<gradient> = [ 
	<linear-gradient> | <radial-gradient> | 
	<repeating-linear-gradient> | <repeating-radial-gradient> ]

この仕様で定義される他の<image>型と同様に、グラデーションは画像を受け付ける任意のプロパティで使用できる。たとえば:

グラデーションは実在オブジェクトサイズの寸法をもつボックス内に描かれ、グラデーションボックスと呼ばれる。しかし、グラデーション自体は内在寸法を持たない。

たとえば、背景としてグラデーションを使用する場合、デフォルトでグラデーションは要素のパディングボックスのグラデーションボックスのサイズを描画する。‘background-size’に‘100px 200px’のような値を明示的に設定する場合、グラデーションボックスは100pxの幅と200pxの高さになるだろう。同様に、‘list-style-image’として使用されるグラデーションに対して、ボックスはそのプロパティに対するデフォルトオブジェクトサイズである1emの正方形となるだろう。

4.1. 線形グラデーション: ‘linear-gradient()’表記

線形グラデーションは、グラデーションの線を指定することによって作成され、その後、複数の色がそのラインに沿って配置される。画像は無限のキャンバスを作成することによって構築され、2つが交差する場所でグラデーション線の色である描かれた線の色とともに、グラデーション線に垂直の線で画像を塗る。これは、指定された方向に進んで、次の各色から滑らかなフェードを生成する。

4.1.1. linear-gradient() 構文

線形グラデーション構文は次のとおり:


<linear-gradient> = linear-gradient(
	[ [ <angle> | to <side-or-corner> ] ,]? 
	<color-stop>[, <color-stop>]+
)

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

関数の最初の引数は、グラデーションラインを指定する。これは、グラデーションの方向を与え、カラーストップを配置する方法を決定する。これは省略されてもよい。その場合、デフォルトで‘to bottom’となる。

グラデーションラインの方向は、2つの方法で指定されてもよい:

角度を使用
この引数の目的に対して、‘0deg’は上向きを指し、正の角度は時計回りを表す。よって、‘90deg’は右向きを指す。
キーワードを使用

引数が‘to top’、‘to right’、‘to bottom’、または‘to left’の場合、グラデーションラインの角度はそれぞれ、‘0deg’、‘90deg’、‘180deg’、‘270deg’となる。

引数が代わりに‘to top left’ようなボックスの角を指定した場合、グラデーションラインは、指定された角と同じ象限を指すように角度を付けなければならず、2つの隣り合う角を交差するグラデーションボックスの中心を通るグラデーションラインに垂直に描画されなければならない。

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

このモジュールの次のレベルが、現在のテキスト方向と書字モードを基準に、グラデーションの方向を定義する機能を提供することが期待される。

[An image showing a box with a background shading gradually from white in the bottom-left corner to black in the top-right corner.  There is a line, illustrating the gradient line, angled at 45 degrees and passing through the center of the box.  The starting point and ending point of the gradient line are indicated by the intersection of the gradient line with two additional lines that pass through the bottom-left and top-right corners of the box.]

この例は、上記の規則からグラデーションラインを計算する方法を視覚的に示すものである。これは、‘background: linear-gradient(45deg, white, black);’を持つ要素によって生成される実際のグラデーションに沿って、グラデーションラインの始点と終点を示す。

始点と終点はボックスの外側であるけれども、これらは正確に置かれ、グラデーションは角で正確に純粋な白であり、そして反対側の角で正確に純粋な黒であることに注意する。これは意図的であり、常に線形グラデーションで真になるだろう。

グラデーションのカラーストップは、一般にグラデーションライン上の始点と終点との間に配置されるが、これは必須ではない―グラデーションラインは両方向に無限に伸びる。始点と終点は、単なる任意の位置の目印である―始点は、0%、0pxと定義し、カラーストップを指定する場合に配置されるなど、および終点は100%が配置される場所を定義する。カラーストップは0%の後か100%の前に位置を持つことができる。

任意の時点でのグラデーションの色は、グラデーションラインに垂直な点を通る一意な線を見つけることによって決定される。点の色は、この線が交差する点でのグラデーションラインの色である。

4.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);

これは、3色のグラデーションを示し、どのように明示的にストップの位置を指定するかを示す:

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

これは、キーワードで指定されたコーナー対のグラデーションを示す(*)。グラデーションはちょうど2番目の例のように、それぞれ、左下と右上の角に厳密に赤と青であることに注目する。また、グラデーションの角度は、自動的に50%での色(この場合、白色)に算出され、左上と右下の角を斜めに横切って延びる。

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

(Image requires SVG)

(*) 画像を表示するにはHTMLでのSVGサポートが必要。

4.2. 放射グラデーション: ‘radial-gradient()’表記

放射グラデーションにおいて、グラデーションボックスの片側から線形グラデーションを持つもう片側まで滑らかにフェードする色よりも、代わりに色が一点から現れ、滑らかに円形または楕円形に外側に広がる。

放射グラデーションは、グラデーションの中心(0%の楕円)と最終形状の大きさや形(100%楕円)を示すことによって指定される。カラーストップは‘linear-gradient()’と同じように、リストとして指定する。中心から開始し、最終形状に向かって(潜在的に超えて)進む、均一にスケーリングされた同心の楕円は、指定されたカラーストップに従って描かれ、着色される。

4.2.1. radial-gradient() 構文

放射グラデーション構文は次のとおり:

<radial-gradient> = radial-gradient(
  [ [ <shape> || <size> ] [ at <position> ]?, |
    at <position>, 
  ]?  <color-stop> [ , <color-stop> ]+
)

5em幅の円形の放射グラデーションで、左上角を中心に位置する例は次のとおり:

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

引数は、次のように定義される:

<position>
グラデーションの中心を決定する。<position>値型(これは‘background-position’でも使用される)は、[CSS3VAL]で定義され、さらにオブジェクトエリアとしての中心点と位置決め領域としてのグラデーションボックスを使用して解決される。この引数が省略された場合、デフォルトで‘center’となる。
<shape>
circle’または‘ellipse’のいずれかをとる。それぞれ、グラデーションの最終形状が、円形または楕円形かどうかを決定する。<shape>が省略された場合、最終形状のデフォルトは、<size>が1つの<length>であるなら円に、そうでなければ楕円となる。
<size>

グラデーションの最終形状の大きさを決定する。省略された場合、デフォルトで‘farthest-corner’となる。これは、キーワードで明示的に指定できる。キーワード定義の目的に対して、有限の線分ではなく、両方向に無限に伸びるものとしてグラデーションボックスの辺を考えてみる。

最終形状が楕円である場合、楕円の軸は、水平および垂直軸に整列される。

circle’と‘ellipse’の両方のグラデーションが、<size>として次のキーワードを受け入れる:

closest-side
最終形状は、グラデーションの中心に最も近いグラデーションボックスの辺と接するように並べられる。形状が楕円である場合、各次元内の最も近い辺と接する。
farthest-side
最終形状が最も遠い辺に基づく大きさであることを除いて、‘closest-side’と同様である。
closest-corner
最終形状は、グラデーションの中心に最も近いグラデーションボックスの角を通過するように並べられる。形状が楕円である場合、最終形状は、‘closest-side’が指定された場合と同じアスペクト比を与えられる。
farthest-corner
最終形状が最も遠い角に基づく大きさであることを除いて、‘closest-corner’と同様である。形状が楕円である場合、最終形状は、‘farthest-side’が指定された場合と同じアスペクト比を与えられる。

If <shape>が‘circle’と指定される、または省略された場合、<size>には次のように明示的に与えてもよい:

<length>

明示的に円の半径を与える。負の値は無効である。

パーセンテージがここでは許可されないことに注意する。これらは円形でない、楕円形のグラデーションのみを指定するために使用できる。パーセンテージが相対的であるべき寸法など、複数の合理的な解決策があるため、この制限は存在する。このモジュールの将来のレベルは、パーセンテージで、おそらく寸法に使用する上でのより明示的なコントロールで、円形の大きさを決定する能力を提供するかもしれない。

<shape>が‘ellipse’ と指定される、または省略された場合、<size>には、代わりに次のように明示的に与えてもよい:

[<length> | <percentage>]{2}
明示的に楕円の大きさを与える。1番目の値は水平方向の半径を、2番目の値は垂直半径を表す。パーセンテージ値は、グラデーションボックスの対応する寸法を基準にしている。負の値は無効である。

上記の定義とともに拡張した、文法は次のようになる:

<radial-gradient> = radial-gradient(
  [ [ circle               || <length> ]                          [ at <position> ]?, | 
    [ ellipse              || [ <length> | <percentage> ]{2} ]    [ at <position> ]?, |
    [ [ circle | ellipse ] || <extent-keyword> ]                  [ at <position> ]?, |
    at <position> ,
  ]?  <color-stop> [ , <color-stop> ]+
)
<extent-keyword> = closest-corner | closest-side | farthest-corner | farthest-side

4.2.2. カラーストップの設置

カラーストップは、線形グラデーションのグラデーションライン類似したグラデーションレイ上に配置される。グラデーションレイはグラデーションの中央に固定され、右に向かって延びる。0%の地点はグラデーションレイの始点であり、100%の地点はグラデーションレイ最終形状と交差する点である。カラーストップは負の領域に置くことができる。グラデーションレイの負の領域は、レンダリングに対して直接考慮されることはないけれども、その地点でのカラーストップは、補間または反復を通してグラデーションレイ上に負でない場所の色に影響を与えることができる(反復グラデーションを参照)。たとえば、‘radial-gradient(red -50px, yellow 100px)’は、中央で赤みがかったオレンジ色(#f50)で始まり、黄色へ遷移する楕円形のグラデーションを生成する。100%を超える地点は、グラデーションの中心から対応するより大きな距離の地点を単に指定する。

任意の点でのグラデーションの色は、最初の 同じ中心、向き、および最終形状として長軸と短軸間の比とともに、その点を通過する一意な楕円形を最初に見つけることによって決定される。その点の色は、この楕円が交差する場所でのグラデーションレイの色である。

4.2.3. 放射グラデーションの装飾

位置、大きさ、形状の組み合わせによっては、半径0の円または楕円を生成する。たとえば、中心がグラデーションボックスの辺かつ‘closest-side’または‘closest-corner’が指定される場合、または大きさおよび形状が明示的に与えられ、かつ半径のいずれかがゼロである場合、これは発生する。これら縮重した例において、グラデーションは以下のように表示されなければならない:

最終形状がゼロ半径の円の場合:
半径が任意の非常に小さな数だけゼロより大きい円である最終形状であるかのようにレンダリングする。これはグラデーションが円のように見え続けさせる。
最終形状が、(高さに関係なく)ゼロ幅を持つ場合:
最終形状は、高さが任意の非常に大きな数であり、幅が任意のゼロより大きな非常に小さい数である楕円であるかのようにレンダリングする。これは、グラデーションが楕円の中心を横切って映される水平方向の線形グラデーションのように見えるようする。また、パーセンテージで指定されたすべてのカラーストップ位置を‘0px’に解決することを意味する。
そうでなければ、最終形状がゼロ高さの場合:
最終形状は、幅が任意の非常に大きな数であり、高さが任意のゼロより大きな非常に小さい数である楕円であるかのようにレンダリングする。これは、最後のカラーストップの色と同じ単色の画像のようなグラデーションに、または繰り返す場合、グラデーションの平均色に同じ色に見えるようにする。

4.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);

これは、‘closest-side’グラデーションを説明する。

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);

4.3. 繰り返しグラデーション: ‘repeating-linear-gradient()’と‘repeating-radial-gradient()’記法

<linear-gradient><radial-gradient>に加えて、この仕様は<repeating-linear-gradient><repeating-radial-gradient>値を定義する。これら2つの記法は同じ値を取り、それぞれ上記で定義された非繰り返しの兄弟と同様に解釈される。

しかし、レンダリングされたとき、カラーストップは、最初に指定されたカラーストップの位置と最後に指定されたカラーストップの位置との差の倍数だけずれた位置で、両方向に無限に繰り返される。たとえば、‘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%)

最初と最後のカラーストップの間隔が非ゼロであるが、出力デバイスの物理的な解像度が忠実にグラデーションをレンダリングするには不十分であることを実装が認めるほど十分小さい場合、実装は、グラデーションの平均色を見つけなければならず、平均色に等しい単色画像としてグラデーションをレンダリングする。

最初と最後のカラーストップの間隔がゼロ(または実装の制限のためにゼロに切り捨て)の場合、実装はカラーストップの同じ色と数とともにグラデーションの平均色を見つけなければならないが、最初と最後のカラーストップが任意の非ゼロの距離をばらばらにもち、残りのカラーストップそれらの間の等間隔となる。それから平均色に等しい単色画像としてグラデーションをレンダリングしなければならない。

繰り返し放射グラデーションの高さがゼロ、または出力デバイスの物理的な解像度が忠実にグラデーションをレンダリングするには不十分であることを実装が認めるほど十分ゼロに近い場合、実装はグラデーションの平均色を見つけなければならず、平均色に等しい単色画像としてグラデーションをレンダリングする。

グラデーションの平均色を見つけるためには、次の手順を実行する:

  1. 前から掛けるRGBA色の最初の空でないリストとしてlist、および最初と最後のカラーストップの間の距離としてtotal-lengthを定義する。
  2. カラーストップの各隣接ペアに対して、total-lengthで割った、2つのカラーストップ間の距離の半分としてweightを定義する。listに2つのエントリを追加し、前から掛けたsRGBAとweightごとのコンポーネントのすべてをスケーリングすることでの最初のカラーストップの色を表すことで1番目が得られ、2番目のカラーストップとともに同じ方法で2番目が得られる。
  3. 平均色を生成するコンポーネントに関してlistのエントリを合計し、それを返す。

従来通り、実装は上記と同じ結果を生成している限り、実装が望む任意のアルゴリズムを使用してよい。

たとえば、以下のグラデーションは単色の薄紫画像としてレンダリングされる(rgb(75%,50%,75%)に等しい):

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

次のグラデーションは、(デスクトップモニターは忠実にピクセルの10分の1のカラーストップをレンダリングできないので)通常の環境下では上記と同じようにレンダリングされるが、たとえば、著者がグラデーションが表示されている要素へ"zoom:100;"を適用した場合、通常の繰り返しグラデーションのようにレンダリングされる:

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

4.4. グラデーションのカラーストップ

<color-stop> = <color> [ <percentage> | <length> ]?

カラーストップは、規則の先頭でグラデーションラインによって定義された線に沿って配置された点である。カラーストップは、順番に指定されなければならない。パーセンテージは、0%が始点、100%が終点となる、グラデーションラインの長さを指す。長さは、終点の方向に始点から測定される。カラーストップは通常、始点と終点の間に配置されるが、それは必須ではない。グラデーションラインは両方向に無限に延びており、カラーストップは線の任意の位置に配置できる。

各カラーストップで、ラインはカラーストップの色である。2つのカラーストップ間で、ラインの色は、あらかじめ乗算されたRGBA空間で行われている補間で、2つのカラーストップの色との間での線形補間である。最初のカラーストップの前に、ラインは最初のカラーストップの色である。最後のカラーストップの後に、ラインは最後のカラーストップの色である。

次の手順は、カラーストップのリストを処理するために順番に適用されなければならない。これらの規則を適用した後、すべてのカラーストップは明確な位置を持つことになり、これらは昇順になる:

  1. 最初のカラーストップの位置を持たない場合、その位置を0%に設定する。最後のカラーストップの位置を持たない場合、その位置を100%に設定する。
  2. カラーストップが、リストでその前に任意のカラーストップの位置よりも小さな位置を持つ場合、その前の任意のカラーストップの位置を指定した最大と等しくなる位置を設定する。
  3. 任意のカラーストップがまだ位置を持たない場合、位置のない隣接するカラーストップの実行ごとに、それらが均等に前後の位置をもつカラーストップを以下の間で配置されるように、それらの位置を設定する。

複数のカラーストップが同じ位置を持つ場合、規則で最初に指定したものから最後に指定したものに、無限小の遷移を生成する。実際は、色はその位置で急激に変化するよりもむしろ、滑らかに遷移する。

下記はグラデーションの複数のペアである。各ペアの後者は、前者の手動の"fixed-up"であり、上記の規則を適用することにより得られる。各ペアに対して、両方のグラデーションは、同じようにレンダリングされる。各矢印内の数字は、フィックスアップの手順が変形で呼び出されるかを指定する。


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

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

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

4. linear-gradient(red -50px, white, blue)
   =13=>
   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)
   =12=>
   linear-gradient(red 0%, white 0%, black 150%, blue 150%)

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

次の例は、あらかじめ乗算されたsRGBAとあらかじめ乗算されてない(誤った)遷移でグラデーション遷移の違いを示す(*)。これらの例の両方で、グラデーションは白い背景の上に描画される。両方のグラデーションは、次の値を書くことができる:

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

あらかじめ乗算された空間では、"transparent"からの遷移は常に綺麗に見える:

(Image requires SVG)

一方、グラデーションがあらかじめ乗算されていない空間で誤った遷移の場合、"transparent"は、実際には‘rgba(0,0,0,0)’の省略形、すなわち黒い透明であるため、"transparent"に近い色は著しく暗く灰色がかった色となる。:

(Image requires SVG)

(*) 画像を表示するにはHTMLでのSVGサポートが必要。

注:これは意図せずに、カラーストップに早いものの前に移動しようとする原因となるので、1つの規則で、px、em、%など、異なる種類の単位を混合して使用しないことを著者に推奨する。たとえば、規‘background-image: linear-gradient(yellow 100px, blue 50%)’は、背景領域が少なくとも200pxの高さであるような任意のフィックスアップを必要としないだろう。しかし、150pxの高さであった場合、青色のカラーストップの位置は"75px"に相当すると考えられ、黄色のカラーストップに先行し、100pxの位置に修正されるだろう。

注:"あらかじめ乗算された"色空間の定義と意味合いは、技術文献の別の場所で与えられるが、迅速な手引きはプロセスを明らかにするためにここに与えられる。rgba()の4個の要素として表現される色を与えられる、1つがアルファコンポーネントによって赤、緑、青の成分を乗算することによってあらかじめ乗算された表現に変換できる。たとえば、部分的に透明な青は、そのあらかじめ乗算された表現で[0, 0, 127.5, .5]のように表現されるrgba(0,0,255,.5)として与えられてもよい。あらかじめ乗算された表現よりもむしろプレーンなrgba表現を使用する色の補間は、完全に透明な色から完全に不透明な色へ遷移する場合は特に、より魅力的な遷移を生成する傾向がある。透明度または色のどちらかが一定に保たれる遷移(たとえば、rgba(255,0,0,100%)とrgba(0,0,255,100%)、またはrgba(255,0,0,100%)とrgba(255,0,0,0%)との間の遷移)は、一定に保たれている場所に注意してください)は、色の補間があらかじめ乗算される色空間で行われようともそうでなかろうとも、同一の結果を持つ。色と透明度の両方が2つのエンドポイント間で異なる場合に、違いが生じるのみである。

5. CSSでの画像とオブジェクトの大きさ

CSSで使用される画像は、多くのソースに由来してもよい。バイナリ画像形式(fig、jpegなど)、専用のマークアップ形式(SVGなど)、およびCSS固有の形式(この仕様で定義される、linear-gradient()値型など)。同様に、文書はビデオ、プラグイン、または入れ子の文書などの多数のオブジェクト型を含んでもよい。これらの画像やオブジェクト(以下、単にオブジェクト)は、CSSにサイジング情報の多くの種類を提供するかもしれないし、そうでないかもしれない。この章は、オブジェクトとCSSレイアウトアルゴリズム間の一般的なサイズネゴシエーションモデルを定義する。

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

この処理を定義するために、より簡単に様々な概念を参照できるよう、いくつかの用語を定義する:

内在寸法

用語内在寸法は、内在高さ内在幅、および内在アスペクト比(幅と高さの比)を指し、それぞれ指定したオブジェクトに対して存在するかもしれないし、しないかもしれない。これらの内在寸法は、オブジェクト自体の好ましいまたは自然な大きさを表す。すなわち、これらはオブジェクトが使用されるコンテキストの機能ではない。CSSは、内在寸法が一般に発見される方法を定義しない。

ラスター画像は、3つすべての内在寸法を持つオブジェクトの例である。寸法が変化するよう設計されたSVG画像は、内在アスペクト比のみを持つだろう。SVG画像はまた、内在幅または内在高さのみで作成できる。この仕様で定義されるCSSグラデーションは、内在寸法を一切もたないオブジェクトの一例である。このもう一つの例は、HTMLで<iframe>要素として、文書に埋め込まれるものである。オブジェクトは、任意の2つの内在寸法が自動的に3つ目の内在寸法を定義するように、2つの内在寸法のみを持つことはできない。

オブジェクト(アイコンなど)が複数のサイズを持つ場合、最大サイズ(面積)がその内在サイズとして解釈される。そのサイズで複数のアスペクト比を持つか、複数のアスペクト比を持ちかつサイズを持たない場合、デフォルトのオブジェクトサイズのアスペクト比に最も近いアスペクト比が使用される。コンテインフィットを使用して、デフォルトのオブジェクトサイズ内でそれをフィットする際にアスペクト比が最大面積を生成するものを見ることによって決定する。複数のサイズが最大の面積を分け合う場合、広いサイズがその内在サイズとして選択される。

指定サイズ
オブジェクトの指定サイズは、‘width’と‘height’または‘background-size’プロパティを通してなどのように、CSSで与えられる。指定サイズは、明確な幅と高さ、制約の集合、またはそれらの組み合わせである。
実在オブジェクトサイズ
実在オブジェクトサイズは、それが使用されるコンテキストのデフォルトのオブジェクトサイズをもつ、オブジェクトの内在寸法指定サイズを組み合わせた結果であり、明確な幅と高さを持つ矩形を作り出す。
デフォルトのオブジェクトサイズ

デフォルトのオブジェクトサイズは、内在寸法指定サイズの両方が寸法を欠落している場合、実在オブジェクトサイズを決定するために使用される明確な高さと幅を持つ矩形である。

5.2. CSS⇋オブジェクト ネゴシエーション

CSSでのオブジェクトは次のように並べられ、レンダリングされる:

  1. 画像やオブジェクトが文書で指定される場合、たとえば‘background-image’での‘url()’値または<img>要素のsrc属性を通して、CSSはその内在寸法に対するオブジェクトを照会する。
  2. 内在寸法指定サイズ、画像やオブジェクトの中で使用されるコンテキストに対するデフォルトのオブジェクトサイズを使用すると、CSSは実在オブジェクトサイズを算出する。(次節を参照。)これは、オブジェクトがレンダリングされる領域のサイズと位置を定義する。
  3. CSSは、実在オブジェクトサイズで自分自身をレンダリングするためのオブジェクトを要求する。CSSは、実在オブジェクトサイズがオブジェクトの内在寸法と異なる場合に、オブジェクトがどのようにレンダリングされるかを定義しない。オブジェクトは、何らかの形で実在オブジェクトサイズに合わせて自動的に調整してもよく、あるいは独自のサイズの制約を満たすために、実在オブジェクトサイズよりも大きいまたは小さく自分自身をレンダリングしてもよい。
  4. そうでなければ、CSSで指定されない限り、オブジェクトは実在オブジェクトサイズに切り取られる。

5.3. 実在オブジェクトサイズの解像度

現在のサイジングオブジェクトの規則は、このようなオブジェクトが使用される、各コンテキストで説明される。この節は、将来の仕様が、各インスタンスでサイズ解像度を再定義する代わりにそれらを参照できるよう、いくつかの一般的なサイズ変更の制約とそれらを解決するための方法を定義する。

5.3.1. デフォルトサイジングアルゴリズム

デフォルトサイジングアルゴリズムは一般に、オブジェクトの実在オブジェクトサイズを見つけるために使用される一連の規則である。それは、オブジェクトの内在寸法および制約のない指定サイズまたは明確な幅および/または高さのみからなるサイズのいずれかによって提示された同時制約を解決する。

いくつかのオブジェクトサイジング規則(たとえば‘list-style-image’など)は、デフォルトサイジングアルゴリズムに正確に対応する。他のもの(‘border-image’など)はデフォルトサイジングアルゴリズムを呼び出すだけでなく、最終的に実在オブジェクトサイズに到達する前に、追加のサイジング規則を適用する。

デフォルトサイジングアルゴリズムは次のように定義される:

5.3.2. カバーおよびコンテイン制約サイジング

2つの共通の指定サイズはコンテイン制約カバー制約であり、どちらも、オブジェクトの内在アスペクト比を使用する指定された制限矩形に対して解決される。

どちらの場合も、オブジェクトが内在アスペクト比を持たない場合、実在オブジェクトサイズは、指定された制約矩形である。

5.4. CSSオブジェクトサイジングの例

次の例は、CSS 2.1および CSS3 Backgrounds & Bordersのサイジングアルゴリズムがこの仕様で定義された概念にどのように対応するかを示す。

background-image
背景の実在オブジェクトサイズを計算するための規則は、CSS2.1 14.2.1節およびCSS3BG 3.9節で定義される。CSS2.1は、指定サイズなしで デフォルトサイジングアルゴリズムを使用し、デフォルトオブジェクトサイズとして背景位置決め領域を使用する。[CSS21] CSS3において、‘background-size’プロパティは、デフォルトサイジングアルゴリズムまたはコンテインまたはカバー制約のいずれか1つを呼び出すことで、サイジング制約を与えることができる。‘background-repeat’が‘round’値を持つ場合、実在オブジェクトサイズは、さらに後の段階で調整される。[CSS3BG]
list-style-image
リストスタイル画像の実在オブジェクトサイズを計算するための規則は、CSS2.1 12.5.1節で定義される。これは、指定サイズをもたないデフォルトサイジングアルゴリズムおよび1em正方形のデフォルトオブジェクトサイズを使用する。
border-image
ボーダー画像は2回サイズ調整される:最初の全体画像は、スライスポイントを決定するためにサイズ調整され、その後スライスはボーダーを装飾するためにサイズ調整される。1回目のサイジング操作は、CSS3BG 6.2節で定義され、指定サイズをもたないデフォルトサイジングアルゴリズム、およびデフォルトのオブジェクトサイズとしてボーダー画像領域を使用する。2回目の操作は、CSS3BG 6.6節で定義される。デフォルトサイジングアルゴリズムは、デフォルトのオブジェクトサイズとして対応するボーダー画像領域の一部を使用して、スライスごとに初期サイズを決定するために使用される。デフォルトで指定サイズは、このデフォルトのオブジェクトサイズと一致する。しかし、‘border-image-repeat’プロパティは、1つ以上の方向で指定サイズを落とすことができ、追加の丸めステップを適用するかもしれない。[CSS3BG]
cursor
カーソルの実在オブジェクトサイズを計算するための規則は、CSS2.1 18.1節で定義される。デフォルトのオブジェクトサイズは、UAのオペレーティングシステム上の典型的なカーソルの大きさに基づくべきであり、UA定義のサイズである。[CSS21]
content
CSS2.1‘content’プロパティを介して挿入されたオブジェクトは、匿名の置換要素であり、同じようにサイズ調整される。[CSS21] そのような匿名の要素は、すべての非継承プロパティ(‘width’、‘height’などを含む)が初期値を設定することに注意する。
置換要素
CSS 2.1は、10.3.210.410.6.210.7節で置換要素(‘content’を介した生成コンテンツとして挿入したものを含む)のサイズ設定を定義する。[CSS21] 以下で定義される‘object-fit’プロパティは、実在オブジェクトサイズが要素の使用された幅と高さに対応する方法を定義する。デフォルトで、これは一致する。

5.5. サイジングオブジェクト: ‘object-fit’プロパティ

名前: object-fit
値: fill | contain | cover | none | scale-down
初期値: fill
適用要素: 置換要素
継承性: no
パーセンテージ: 利用不可
メディア: visual
算出値: 指定値

object-fit’プロパティは、置換要素コンテンツが、どのようにその使用高さと幅によって確立されたボックスに合わされるべきかを指定する。

fill
置換コンテンツは、要素のコンテンツボックスを埋めるような大きさである。オブジェクト実在オブジェクトサイズは、要素の使用幅と高さである。
contain
置換コンテンツは、要素のコンテンツボックス内に合わせつつ、アスペクト比を維持する大きさである。その実在オブジェクトサイズが要素の使用幅と高さに対するコンテイン制約として解決される。
cover
置換コンテンツは、要素の全体のコンテンツボックスに合わせつつ、アスペクト比を維持するような大きさである。その実在オブジェクトサイズは、要素の使用幅と高さに対するカバー制約として解決される。
none
置換コンテンツは、要素のコンテンツボックス内に収まるように再調整されない。指定サイズをもたないデフォルトサイジングアルゴリズムを使用してオブジェクトの実在オブジェクトサイズ、および置換要素の使用幅と高さに等しいデフォルトのオブジェクトサイズを決定する。
scale-down

none’または‘contain’が指定されたかのようにコンテンツを合わせ、いずれか小さい方の実在オブジェクトサイズをもたらすだろう。

none’と‘contain’の両方が、"小さい"の概念が明確に定義されるため、コンテンツの内在アスペクト比を尊重することに注意する。

コンテンツが完全に置換要素のコンテンツボックスに満たさない場合、満たされないスペースが置換要素の背景を示す。置換要素は常にコンテンツボックスにそのコンテンツを切り取るので、コンテンツはオーバーフローしないだろう。コンテンツボックスを基準にオブジェクトを配置するための‘object-position’プロパティを参照のこと。

object-fit’値の4つが、‘object-position’の初期値を使用して、置換要素(青の画像)が、その高さ/幅のボックス(緑の背景で示される)に合わせてどのように拡大縮小されるかを示す例。5番目の値‘scale-down’は、この場合‘contain’と同じように見える。

注:‘object-fit’プロパティはSMIL10でのfit属性と似たセマンティクスを持ち[SMIL10] 、SVG11でpreserveAspectRatio属性の<meetOrSlice>パラメータを持つ[SVG11]

注:CSS⇋オブジェクトネゴシエーションアルゴリズムごとに、実在オブジェクトサイズ(または、この場合ではコンテンツのサイズ)は、直接オブジェクト自体を拡大縮小しない―これは単に目に見えるキャンバスの大きさに関する情報としてオブジェクトに渡される。サイズが画像形式一致するような描画をされる。具体的には、ラスタ画像は常に指定したサイズに拡大縮小する。SVGが"SVGビューポート"(SVGで定義された用語)のサイズとして指定されたサイズを使用し、その後にルート<svg>要素に複数の属性の値を使用しつつ、自身を描画する方法を決定する。

5.6. オブジェクトの位置決め: ‘object-position’プロパティ

名前: object-position
値: <position>
初期値: 50% 50%
適用要素: 置換要素
継承性: no
パーセンテージ: ボックス自身の幅と高さを参照
メディア: visual
算出値: 指定値

object-position’プロパティは、ボックス内部で置換要の位置合わせを決定する。<position>値型(これは‘background-position’に対しても使用される)は、[CSS3VAL]で定義され、位置決め領域としてのオブジェクトエリアとコンテンツボックスとして、実在オブジェクトサイズを使用して解決される。

置換要素で覆われていないボックスの領域は、要素の背景を表示することに注意する。

6. 画像処理

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

画像解像度は、たとえばインチあたりのピクセルなど、単位長さあたりの画像のピクセル数として定義される。一部の画像フォーマットは、画像の解像度に関する情報を記録できる。フォーマット処理で画像の実際のサイズを決定する際に、この情報が役立つことがある。しかし、情報はまた間違っている可能性がある。その場合はその情報は無視されるべきである。デフォルトでは、CSSは、CSS‘px’単位あたり1画像のピクセルの解像度を想定している。しかし、‘image-resolution’プロパティは他の解像度の使用を許可する。

名前: image-resolution
値: [from-image || <resolution>] && snap?
初期値: 1dppx
適用要素: すべての要素
継承性: yes
メディア: visual
算出値: 指定値のとおり、ただし‘<resolution>’が‘snap’に対して計算することによって変えられる場合を除く(下記参照)

image-resolution’プロパティは、要素内または要素で使用されるすべてのラスタ画像の内在解像度を指定する。これは、コンテンツの画像(たとえば置換要素と生成コンテンツ)と装飾的な画像(‘background-image’など)の両方に影響を与える。画像の内在解像度は、画像の内在寸法を決定するために使用される。値の意味は次のとおり:

<resolution>
明示的に内在解像度を指定する。この場合の"ドット"は、1つの画像ピクセルに対応する。
from-image
画像の内在解像度は、画像形式で指定されたものとみなされる。画像が自身の解像度を指定しない場合、(指定される場合)明示的に指定された解像度が使用され、そうでなければデフォルトで‘1ddpx’となる。
snap
キーワード"snap"が提供される場合、算出された‘<resolution>’が(もしあれば)デバイスピクセルの整数に1画像の画素を変換して最も近い値に丸めた、指定した解像度である。解像度が画像から取得される場合、使用される内在解像度は、同様に調整された画像のネイティブ解像度である。

SVGなどのベクター形式は内在解像度を持たないので、このプロパティはベクター画像には影響しない。

プリンタは、コンピュータのモニタよりも実質的に高い解像度を持つ傾向がある。このため、プリントアウトするとき、画面上で正常に見える画像がピクセルで表されたように見えるかもしれない。‘image-resolution’プロパティは、文書に高解像度の画像を埋め込んで、画面と紙の上の両方で魅力的な表示を確保し、適切なサイズを維持するために使用できる:

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

この設定を使用すると、300dpiで5インチ幅であることを意味し、画像は、実際に5インチの幅として表示される。この設定を使用しないと、画像が15000画素ピクセル幅で、デフォルトでCSSは1インチあたり96画素ピクセルを表示するため、画像は約15.6インチ幅として表示される。

一部の画像形式は、画像データに画像解像度をエンコードできる。この規則は、UAがCSS‘px’単位あたり1画素ピクセルにフォールバックすると、画像自身で見つけた画像解像度を使用するように指定する。

img { image-resolution: from-image }

次の規則は、UAが画像自身で見つけた画像解像度を使用するように指定するが、画像が解像度を持たない場合、解像度はデフォルトの‘1dppx’の代わりに‘300dpi’を指定する。

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

この規則を使用すると、画像の解像度は300dpiに設定される。(画像の解像度がもしあれば、無視される。)

img { image-resolution: 300dpi }

一方この規則は、画面の解像度が96dpiである場合、代わりに288dpiで画像をレンダリングするだろう(3つの画素ピクセルが1デバイスピクセルに変換するように)。

img { image-resolution: 300dpi snap; }

解像度が画像から取得された場合、‘snap’キーワードを使用することもできる。この規則では:

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

上記のような状況で、300dpiとして宣言する画像は、72dpiを宣言する画像が96dpi(デバイスピクセルあたり1画素ピクセル)でレンダリングするのに対し、288dpi(デバイスピクセルあたり3画素ピクセル)で表示される。

6.2. ページ上の画像の向きを定める: ‘image-orientation’プロパティ

画像が横向きになってカメラで撮影しているか、原稿をスキャナ内で正しく配置されていない場合、結果として得られる画像は"横向き"または逆さまであるかもしれない。‘image-orientation’プロパティは、画像を正しい向きにするために画像ソースデータへ"帯域外の"回転を適用する方法を提供する。

一部のデバイスは、画像の正しい向きを示すメタデータを使用して画像を"タグ付け"し、その結果画像閲覧用ソフトウェアが必要な変換を自身で行うことができることに注意する。レガシー互換性の制約のために、Webブラウザは、デフォルトでこのデータを無視する必要がある。この仕様の将来のレベルは、自動的にメタデータが指定した変換を適用する値を持つことが期待される。

このプロパティは、任意の回転や、水平または垂直方向に画像を反転などの、レイアウトの変換を指定することを意図しないことに注意する。 (これを行うために設計された機能に対しては[CSS3-2D-TRANSFORMS] を参照。)その回転はレイアウトの一部として行われるので、横長に対して縦向きに印刷する場合、画像を正しい向きにする必要ない。([CSS3PAGE]を参照。)これは誤った方向の画像を補正するためだけに使用されるべきである。

名前: image-orientation
値: <angle>
初期値: 0deg
適用要素: すべての要素
継承性: yes
メディア: visual
算出値: 指定値、丸められて正規化された値(テキスト参照)

このプロパティは、画像がレイアウトされる前に画像に適用する直角の回転を指定する。装飾的な画像(‘background-image’など)ではなく、コンテンツ画像(たとえば置換要素と生成コンテンツ)にのみ適用される。CSSレイアウト処理は、回転の画像にも適用される。これは、たとえば、以下のことを意味する:

正の値は画像を右回転(時計回り方向)を与え、一方負の値は左回転を与える。プロパティの算出値は、指定された角度を最も近い1/4回転(90deg、100grad、0.25turnなど)丸めることで計算される。0から離れて丸められ(これは、45degが90degに丸められ、一方-45degが-90degに丸められる)、1回転(360deg、400gradなど)によって値を法とする。

image-orientation’プロパティは、そのコンテキストに反対の方向で‘image()’関数で指定されている、またはCSS Transformsを使用するなど、他の変換の前に適用されなければならない。

次の例は、時計回りに90度画像を回転する:

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

たとえば-270degまたは450degの角度で、同じ効果が得られる。

7. 適合性

7.1. 文書規約

適合性要件は、説明的な表現とRFC 2119用語の組み合わせで表現される。本文章での標準部分においてキーワード“MUST”、“MUST NOT”、“REQUIRED”、“SHALL”、“SHALL NOT”、“SHOULD”、“SHOULD NOT”、“RECOMMENDED”、“MAY”、“OPTIONAL”はRFC 2119で示されたとおりに解釈される。しかし、読みやすさのために、これらの単語は本仕様で大文字のみで出現しない。

この仕様のすべての本文は、明示的に非規範的、例、および注としてマークされた部分を除き、規範的である。[RFC2119]

この仕様の例は、"たとえば"という言葉で導入されるか、規範的な本文からclass="example"を設定し離される。このように:

これは参考情報の一例である。

参考情報の注は“注”で始まり、class="note"を設定し離される。このように:

注、これは参考情報の注である。

7.2. 適合クラス

CSS Values and Units Level 3の適合クラスには次の3つが定義されている:

スタイルシート
CSSスタイルシート
レンダラ
スタイルシートの意味を解釈し、それを使ってドキュメントを表示するユーザーエージェント
オーサリングツール
スタイルシートを記述するユーザーエージェント

スタイルシートは、このモジュールに定義されたプロパティを使用する宣言が、全て包括的なCSS文法およびこのモジュールの中で与えられるプロパティ個々の文法に対して妥当な値を持っている場合、CSS Image Values and Replaced Content Module Level 3に準拠している。

レンダラは、適切な仕様によって定義されるスタイルシートの解釈に加え、CSS Image Values and Replaced Content Module Level 3で定義される全ての機能を正しくパースし、それに応じてドキュメントをレンダリングすることでサポートした場合、CSS Image Values and Replaced Content Module 3に準拠している。しかし、デバイスの制限によってがユーザーエージェントが正確にレンダリングできない場合、ユーザーエージェントが非準拠となる。(たとえば、ユーザーエージェントがモノクロのモニタでカラーをレンダリングする必要の無い場合。)

オーサリングツールは、一般的なCSS文法および本モジュールにおける機能の個々の文法に従って構文的に正しくスタイルシートを書き、本モジュールで説明されているスタイルシートの他全ての適合性要件を満たしている場合、CSS Values and Units Level 3に準拠している。

7.3. 部分的実装

著者がフォールバックの値として上位互換の解析規則を活用出来るように、CSSレンダラは@規則、プロパティ、プロパティの値、キーワード、その他使用可能なサポートのレベルがない構文要素を、非妥当(そして必要に応じて無視)として扱わなければならない。特に、ユーザーエージェントは1つの複数値プロパティ宣言において、サポートされていないコンポーネントの値と、尊重されサポートされている値を選択的に無視してはならない。もし任意の値が非妥当と見なされている(サポートされていない値はそうでなければならない)場合、CSSは宣言全体が無視されている必要がある。

7.4. 実験的実装

将来のCSS機能との衝突を避けるために、CSS2.1仕様では、CSSの独自かつ実験的な拡張用に接頭辞構文を用意している。

W3CプロセスのCandidate Recommendationへ仕様が到達するまでは、CSS機能の全実装は実験的なものとみなされる。CSSワーキンググループは、実装がそのような機能(W3C Working Draftのものを含む)向けにベンダー接頭辞構文を使用するよう推奨している。これで草案の将来的な仕様変更による非互換性を回避することができる。

7.5. 非実験的実装

仕様がCandidate Recommendationの段階に達すると、非実験的な実装が可能になり、実装者は、仕様に対して正しく実装したことを実装できる任意のCR段階の機能を、接頭辞のない実装としてリリースする必要がある。

CSSの実装ごとの相互運用性を確立し維持するために、CSSワーキンググループは非実験的なCSSレンダラに対し、非実験的なCSS機能をリリースする前に、実装レポート(そして、もし必要なら、実装レポートで使用したテストケース)をW3Cへ提出するよう求めている。W3Cへ提出されたテストケースは、CSSワーキンググループによるレビューと修正の対象となる。

テストケースと実装レポートの提出に関する詳細情報は、CSSワーキンググループのウェブサイト(http://www.w3.org/Style/CSS/Test/)にある。質問は直接public-css-testsuite@w3.orgメーリングリストまで。

7.6. CRの終了基準

この仕様をProposed Recommendationにするためには、各機能で少なくとも2つの独立した、相互運用可能な実装がなくてはならない。各機能は、プロダクトの別のセットによって実装されてよく、すべての機能が1つの製品で実装される必要はない。この基準のために、以下の用語を定義する:

independent
各実装は異なる団体によって開発されている必要があり、共有、再利用、また別の条件を満たす実装で使用されているコードからの派生はできない。コードの、この仕様の実装に何の関係もない部分は、この要件から免除される。
interoperable
公式のCSSテストスイート(実装がWebブラウザでない場合は、同等のテスト)において、個々のテストケースをパスすること。該当するユーザーエージェントが相互運用性を主張するために使用される場合、テストスイート内の関連する全てのテストには、同等のテストが作られていなければならない。加えて、そのようなユーザーエージェント相互運用性を主張するために使用される場合、相互運用性のために、同じ方法で同等のテストをパスするユーザーエージェントが1つ以上追加で必要となる。同等のテストは、ペアレビューできるように公開して利用できるようにしなければならない。
implementation
ユーザーエージェントは
  1. 仕様を実装している。
  2. 一般に公開されている。実装は出荷する製品、もしくは公開され利用可能なバージョンである(たとえば、ベータバージョンやプレビュー版、ナイトリービルドなど)。非出荷製品のリリースは、安定性を実証するため少なくとの1ヶ月の期間が機能実装に必要となる。
  3. 実験的(たとえば、現バージョンがテストスイートをパスすることに特化し、将来的にも通常利用を目的として開発されていない)ではない。

仕様は、少なくとも6ヶ月の間はCandidate Recommendationのままである。

謝辞

Thanks to the Webkit team, Brad Kemper, Brian Manthos, and Alan Gresley for their contributions to the definition of gradients; to Melinda Grant for her work on ‘object-fit’, ‘object-position’, and ‘image-orientation’; to Michael Day, Håkon Lie, and Shinyu Murakami for ‘image-resolution’; and to L. David Baron, Kang-Hao Lu, Leif Arne Storset, Erik Dahlstrom, and Øyvind Stenhaug for their careful review, comments, and corrections.

参考文献

標準情報

[CSS21]
Bert Bos; et al. Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification (ja). 血統の森訳 2011-06-07. W3C勧告(原文と一致). 原文URL: http://www.w3.org/TR/2011/REC-CSS2-20110607
[CSS3VAL]
Håkon Wium Lie; Tab Atkins; Elika J. Etemad. CSS Values and Units Module Level 3 (ja). 血統の森訳 2012-03-08. W3C Working Draft(原文と一致). (策定進行中) 原文URL: http://www.w3.org/TR/2012/WD-css3-values-20120308/
[MEDIA-FRAGS]
Raphaël Troncy; et al. Media Fragments URI 1.0 (basic). 15 March 2012. W3C Proposed Recommendation. (Work in progress.) URL: http://www.w3.org/TR/2012/PR-media-frags-20120315/
[RFC2119]
S. Bradner. RFC において要請の程度を示すために用いるキーワード. 独立行政法人 情報処理推進機構 セキュリティセンター訳 Internet RFC 2119. URL: http://www.ietf.org/rfc/rfc2119.txt

その他参考

[CSS1]
Håkon Wium Lie; Bert Bos. カスケーディングスタイルシート第1水準. どら猫本舗訳 1996-12-17. W3C勧告(原文より前の版). URL: http://www.w3.org/TR/2008/REC-CSS1-20080411
[CSS3-2D-TRANSFORMS]
Simon Fraser; et al. CSS 2D Transforms. 15 December 2011. W3C Working Draft. (Work in progress.) URL: http://www.w3.org/TR/2011/WD-css3-2d-transforms-20111215/
[CSS3BG]
Bert Bos; Elika J. Etemad; Brad Kemper. CSS 背景 & ボーダー モジュール Level 3. 矢倉眞隆訳 2011-02-15. W3C Working Draft(原文より前の版). (策定進行中) 原文URL: http://www.w3.org/TR/2012/WD-css3-background-20120214/
[CSS3COLOR]
Tantek Çelik; Chris Lilley; L. David Baron. CSS カラーモジュール Level 3 矢倉眞隆訳 2011-06-07. W3C勧告(原文と一致). URL: http://www.w3.org/TR/2011/REC-css3-color-20110607
[CSS3PAGE]
Håkon Wium Lie; Melinda Grant. CSS3 Module: Paged Media. 10 October 2006. W3C Working Draft. (Work in progress.) URL: http://www.w3.org/TR/2006/WD-css3-page-20061010
[MEDIAQ]
Håkon Wium Lie; et al. メディアクエリー. 2012-06-19. W3C勧告(原文と一致). URL: http://www.w3.org/TR/2012/REC-css3-mediaqueries-20120619/
[SMIL10]
Philipp Hoschka. SMIL(同期マルチメディア統合言語)1.0 仕様書. どら猫本舗訳 1998-06-15. W3C勧告(原文と一致). URL: http://www.w3.org/TR/1998/REC-smil-19980615
[SVG11]
Erik Dahlström; et al. Scalable Vector Graphics (SVG) 1.1 (第2版). 広瀬行夫訳 2011-08-16. W3C勧告(原文と一致). URL: http://www.w3.org/TR/2011/REC-SVG11-20110816/

Last Callからの変更点

Major changes include:

Significant details updated:

There were also many clarifications and several sections were rearranged to make them easier to read.

The Disposition of Last Call Comments is available.

索引

プロパティ索引

プロパティ 初期値 適用要素 継承 パーセンテージ Media
image-orientation <angle> 0deg すべての要素 yes - visual
image-resolution [from-image || <resolution>] && snap? 1dppx すべての要素 yes - visual
object-fit fill | contain | cover | none | scale-down fill 置換要素 no 利用不可 visual
object-position <position> 50% 50% 置換要素 no ボックス自身の幅と高さを参照 visual