8000 Editorial tweaks to fallback color. Add heading for image processing … · w3c/csswg-drafts@fca65e9 · GitHub
Skip to content

Commit fca65e9

Browse files
fantasaifantasai
committed
Editorial tweaks to fallback color. Add heading for image processing section
1 parent ef4bd68 commit fca65e9

2 files changed

Lines changed: 85 additions & 75 deletions

File tree

‎css3-images/Overview.html‎

Lines changed: 63 additions & 56 deletions
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@
2020

2121
<h1>CSS Image Values and Replaced Content Module Level 3</h1>
2222

23-
<h2 class="no-num no-toc" id=longstatus-date>Editor's Draft 20 May 2011</h2>
23+
<h2 class="no-num no-toc" id=longstatus-date>Editor's Draft 21 May 2011</h2>
2424

2525
<dl>
2626
<dt>Latest Version:
@@ -186,54 +186,58 @@ <h2 class="no-num no-toc" id=contents> Table of contents</h2>
186186
class=property>object-position</code>&rsquo; property</a>
187187
</ul>
188188

189-
<li><a href="#image-resolution"><span class=secno>7. </span> Overriding
190-
Image Resolutions: the &lsquo;<code
191-
class=property>image-resolution</code>&rsquo; property</a>
189+
<li><a href="#image-processing"><span class=secno>7. </span> Image
190+
Processing</a>
191+
<ul class=toc>
192+
<li><a href="#image-resolution"><span class=secno>7.1. </span>
193+
Overriding Image Resolutions: the &lsquo;<code
194+
class=property>image-resolution</code>&rsquo; property</a>
192195

193-
<li><a href="#image-orientation"><span class=secno>8. </span> Orienting an
194-
Image on the Page: the &lsquo;<code
195-
class=property>image-orientation</code>&rsquo; property</a>
196+
<li><a href="#image-orientation"><span class=secno>7.2. </span>
197+
Orienting an Image on the Page: the &lsquo;<code
198+
class=property>image-orientation</code>&rsquo; property</a>
196199

197-
<li><a href="#image-rendering"><span class=secno>9. </span> Determining
198-
How to Scale an Image: the &lsquo;<code
199-
class=property>image-rendering</code>&rsquo; property</a>
200+
<li><a href="#image-rendering"><span class=secno>7.3. </span>
201+
Determining How to Scale an Image: the &lsquo;<code
202+
class=property>image-rendering</code>&rsquo; property</a>
203+
</ul>
200204

201-
<li><a href="#serialization"><span class=secno>10. </span>
205+
<li><a href="#serialization"><span class=secno>8. </span>
202206
Serialization</a>
203207
<ul class=toc>
204-
<li><a href="#serializing-resolution"><span class=secno>10.1. </span>
208+
<li><a href="#serializing-resolution"><span class=secno>8.1. </span>
205209
Serializing a &lt;resolution></a>
206210

207-
<li><a href="#serializing-url-notation"><span class=secno>10.2. </span>
211+
<li><a href="#serializing-url-notation"><span class=secno>8.2. </span>
208212
Serializing the &lsquo;<code class=css>url()</code>&rsquo; notation</a>
209213

210214

211-
<li><a href="#serializing-image-notation"><span class=secno>10.3.
212-
</span> Serializing the &lsquo;<code class=css>image()</code>&rsquo; /
215+
<li><a href="#serializing-image-notation"><span class=secno>8.3. </span>
216+
Serializing the &lsquo;<code class=css>image()</code>&rsquo; /
213217
<i>&lt;image-list></i> notation</a>
214218

215-
<li><a href="#serializing-element-notation"><span class=secno>10.4.
219+
<li><a href="#serializing-element-notation"><span class=secno>8.4.
216220
</span> Serializing the &lsquo;<code class=css>element()</code>&rsquo;
217221
/ <i>&lt;element-reference></i> notation</a>
218222

219-
<li><a href="#serializing-cross-fade"><span class=secno>10.5. </span>
223+
<li><a href="#serializing-cross-fade"><span class=secno>8.5. </span>
220224
Serializing the &lsquo;<code class=css>cross-fade()</code>&rsquo; /
221225 <i>&lt;image-combination></i> notation</a>
222226

223-
<li><a href="#serializing-gradients"><span class=secno>10.6. </span>
227+
<li><a href="#serializing-gradients"><span class=secno>8.6. </span>
224228
Serializing Gradients</a>
225229

226-
<li><a href="#serializing-properties"><span class=secno>10.7. </span>
230+
<li><a href="#serializing-properties"><span class=secno>8.7. </span>
227231
Serializing new properties</a>
228232
</ul>
229233

230-
<li><a href="#interpolation"><span class=secno>11. </span>
234+
<li><a href="#interpolation"><span class=secno>9. </span>
231235
Interpolation</a>
232236
<ul class=toc>
233-
<li><a href="#interpolating-images"><span class=secno>11.1. </span>
237+
<li><a href="#interpolating-images"><span class=secno>9.1. </span>
234238
Interpolating <i>&lt;image></i></a>
235239

236-
<li><a href="#interpolating-gradients"><span class=secno>11.2. </span>
240+
<li><a href="#interpolating-gradients"><span class=secno>9.2. </span>
237241
Interpolating <i>&lt;gradient></i></a>
238242
</ul>
239243

@@ -464,12 +468,13 @@ <h3 id=image-notation><span class=secno>4.2. </span> Image Annotations and
464468

465469
<p>Multiple arguments can be given separated by commas, in which case the
466470
function represents the first &lt;image-decl> representing an image that
467-
the browser can successfully load and display. The final argument may be a
468-
&lt;color> which serves as an ultimate fallback if none of the preceding
469-
&lt;image-decl>s can be used, to ensure that any text or images placed on
470-
top of the image are still easily readable. If the final argument is a
471-
&lt;color>, it represents a solid-color image of the given color with no
472-
<a href="#intrinsic-dimensions"><i>intrinsic dimensions</i></a>.
471+
the browser can successfully load and display. The final argument can
472+
specify a &lt;color> to serve as an ultimate fallback; this can be used,
473+
e.g. for &lsquo;<code class=property>background-image</code>&rsquo;, to
474+
ensure adequate contrast if none of the preceding &lt;image-decl>s can be
475+
used. If the final argument is a &lt;color>, it represents a solid-color
476+
image of the given color with no <a
477+
href="#intrinsic-dimensions"><i>intrinsic dimensions</i></a>.
473478

474479
<div class=example>
475480
<p>The rule below would tell the UA to load &lsquo; B74 <code
@@ -478,16 +483,16 @@ <h3 id=image-notation><span class=secno>4.2. </span> Image Annotations and
478483
failing that to display &lsquo;<code class=css>wavy.gif</code>&rsquo;;
479484
and finally, if none of the images can be loaded and displayed, to use
480485
the color &lsquo;<code class=css>rgba(0,0,255,0.5)</code>&rsquo; to
481-
create a dimensionless background image. For example, the browser may not
482-
understand how to render SVG images, the PNG may be malformed, and the
483-
GIF may not exist on the server, so requesting it returns an HTML 404
484-
page instead of an image.</p>
486+
create a dimensionless background image. For example, the browser might
487+
not understand how to render SVG images, the PNG may be malformed, and
488+
the GIF might not exist on the server and return 404 error instead of an
489+
image.</p>
485490

486491
<pre>background-image: image(url(wavy.svg), 'wavy.png' 150dpi, "wavy.gif", rgba(0,0,255,0.5));</pre>
487492

488-
<p>The &lsquo;<code class=property>background-image</code>&rsquo; property
489-
specifies that dimensionless images must stretch to cover the entire
490-
background positioning area <a href="#CSS3BG"
493+
<p>The &lsquo;<code class=property>background-size</code>&rsquo; property
494+
specifies that dimensionless images by default stretch to cover the
495+
entire background positioning area <a href="#CSS3BG"
491496
rel=biblioentry>[CSS3BG]<!--{{CSS3BG}}--></a>, so if none of the
492497
specified images can be displayed the background will be painted
493498
semi-transparent blue. As with any image, this fallback will be painted
@@ -1633,9 +1638,11 @@ <h3 id=object-position><span class=secno>6.5. </span> Positioning Objects:
16331638
class=property>image-position</code>&rsquo; in their stylesheets.</p>
16341639
<!-- ====================================================================== -->
16351640

1636-
<h2 id=image-resolution><span class=secno>7. </span> Overriding Image
1641+
<h2 id=image-processing><span class=secno>7. </span> Image Processing</h2>
1642+
1643+
<h3 id=image-resolution><span class=secno>7.1. </span> Overriding Image
16371644
Resolutions: the &lsquo;<a href="#image-resolution0"><code
1638-
class=property>image-resolution</code></a>&rsquo; property</h2>
1645+
class=property>image-resolution</code></a>&rsquo; property</h3>
16391646

16401647
<p>The <i>image resolution</i> is defined as the number of image pixels per
16411648
unit length, e.g., pixels per inch. Some image formats can record
@@ -1735,9 +1742,9 @@ <h2 id=image-resolution><span class=secno>7. </span> Overriding Image
17351742
</div>
17361743
<!-- ====================================================================== -->
17371744

1738-
<h2 id=image-orientation><span class=secno>8. </span> Orienting an Image on
1739-
the Page: the &lsquo;<a href="#image-orientation0"><code
1740-
class=prope B4AA rty>image-orientation</code></a>&rsquo; property</h2>
1745+
<h3 id=image-orientation><span class=secno>7.2. </span> Orienting an Image
1746+
on the Page: the &lsquo;<a href="#image-orientation0"><code
1747+
class=property>image-orientation</code></a>&rsquo; property</h3>
17411748

17421749
<p>Images from camera phones, digital cameras or scanners may be encoded
17431750
sideways. For example, the first row of image data may represent the
@@ -1829,9 +1836,9 @@ <h2 id=image-orientation><span class=secno>8. </span> Orienting an Image on
18291836
</div>
18301837
<!-- ====================================================================== -->
18311838

1832-
<h2 id=image-rendering><span class=secno>9. </span> Determining How to
1839+
<h3 id=image-rendering><span class=secno>7.3. </span> Determining How to
18331840
Scale an Image: the &lsquo;<a href="#image-rendering0"><code
1834-
class=property>image-rendering</code></a>&rsquo; property</h2>
1841+
class=property>image-rendering</code></a>&rsquo; property</h3>
18351842

18361843
<table class=propdef>
18371844
<tbody>
@@ -1853,7 +1860,7 @@ <h2 id=image-rendering><span class=secno>9. </span> Determining How to
18531860
<tr>
18541861
<th>Applies to:
18551862

1856-
<td>All elements
1863+
<td>images
18571864

18581865
<tr>
18591866
<th>Inherited:
@@ -1917,7 +1924,7 @@ <h2 id=image-rendering><span class=secno>9. </span> Determining How to
19171924
the &lsquo;<code class=css>auto</code>&rsquo; value.</p>
19181925
<!-- ====================================================================== -->
19191926

1920-
<h2 id=serialization><span class=secno>10. </span> Serialization</h2>
1927+
<h2 id=serialization><span class=secno>8. </span> Serialization</h2>
19211928

19221929
<p>This section describes the serialization of all new properties and value
19231930
types introduced in this specification, for the purpose of interfacing
@@ -1928,7 +1935,7 @@ <h2 id=serialization><span class=secno>10. </span> Serialization</h2>
19281935
initially be the empty string, run the steps described, and then return s.</p>
19291936
<!-- ====================================================================== -->
19301937

1931-
<h3 id=serializing-resolution><span class=secno>10.1. </span> Serializing a
1938+
<h3 id=serializing-resolution><span class=secno>8.1. </span> Serializing a
19321939
&lt;resolution></h3>
1933< 2909 /td>1940

19341941
<p>The serialization of the <a
@@ -1940,13 +1947,13 @@ <h3 id=serializing-resolution><span class=secno>10.1. </span> Serializing a
19401947
serialization in terms of.</p>
19411948
<!-- ====================================================================== -->
19421949

1943-
<h3 id=serializing-url-notation><span class=secno>10.2. </span> Serializing
1950+
<h3 id=serializing-url-notation><span class=secno>8.2. </span> Serializing
19441951
the &lsquo;<code class=css>url()</code>&rsquo; notation</h3>
19451952

19461953
<p>The serialization of the url() function is defined in the CSSOM spec.</p>
19471954
<!-- ====================================================================== -->
19481955

1949-
<h3 id=serializing-image-notation><span class=secno>10.3. </span>
1956+
<h3 id=serializing-image-notation><span class=secno>8.3. </span>
19501957
Serializing the &lsquo;<code class=css>image()</code>&rsquo; / <a
19511958
href="#ltimage-list"><i>&lt;image-list></i></a> notation</h3>
19521959

@@ -1977,7 +1984,7 @@ <h3 id=serializing-image-notation><span class=secno>10.3. </span>
19771984
</ol>
19781985
<!-- ====================================================================== -->
19791986

1980-
<h3 id=serializing-element-notation><span class=secno>10.4. </span>
1987+
<h3 id=serializing-element-notation><span class=secno>8.4. </span>
19811988
Serializing the &lsquo;<code class=css>element()</code>&rsquo; / <a
19821989
href="#ltelement-reference"><i>&lt;element-reference></i></a> notation</h3>
19831990

@@ -1994,7 +2001,7 @@ <h3 id=serializing-element-notation><span class=secno>10.4. </span>
19942001
</ol>
19952002
<!-- ====================================================================== -->
19962003

1997-
<h3 id=serializing-cross-fade><span class=secno>10.5. </span> Serializing
2004+
<h3 id=serializing-cross-fade><span class=secno>8.5. </span> Serializing
19982005
the &lsquo;<code class=css>cross-fade()</code>&rsquo; / <a
19992006
href="#ltimage-combination"><i>&lt;image-combination></i></a> notation</h3>
20002007

@@ -2021,7 +2028,7 @@ <h3 id=serializing-cross-fade><span class=secno>10.5. </span> Serializing
20212028
</ol>
20222029
<!-- ====================================================================== -->
20232030

2024-
<h3 id=serializing-gradients><span class=secno>10.6. </span> Serializing
2031+
<h3 id=serializing-gradients><span class=secno>8.6. </span> Serializing
20252032
Gradients</h3>
20262033

20272034
<p>To serialize a <a
@@ -2141,7 +2148,7 @@ <h3 id=serializing-gradients><span class=secno>10.6. </span> Serializing
21412148
</ol>
21422149
<!-- ====================================================================== -->
21432150

2144-
<h3 id=serializing-properties><span class=secno>10.7. </span> Serializing
2151+
<h3 id=serializing-properties><span class=secno>8.7. </span> Serializing
21452152
new properties</h3>
21462153

21472154
<p>To serialize the &lsquo;<a href="#image-resolution0"><code
@@ -2186,7 +2193,7 @@ <h3 id=serializing-properties><span class=secno>10.7. </span> Serializing
21862193
</ol>
21872194
<!-- ====================================================================== -->
21882195

2189-
<h2 id=interpolation><span class=secno>11. </span> Interpolation</h2>
2196+
<h2 id=interpolation><span class=secno>9. </span> Interpolation</h2>
21902197

21912198
<p>This section describes how to interpolate between new value types
21922199
defined in this specification, for use with modules such as CSS
@@ -2203,8 +2210,8 @@ <h2 id=interpolation><span class=secno>11. </span> Interpolation</h2>
22032210
duration, after .3s t is equal to .3.</p>
22042211
<!-- ====================================================================== -->
22052212

2206-
<h3 id=interpolating-images><span class=secno>11.1. </span> Interpolating
2207-
<a href="#ltimage"><i>&lt;image></i></a></h3>
2213+
<h3 id=interpolating-images><span class=secno>9.1. </span> Interpolating <a
2214+
href="#ltimage"><i>&lt;image></i></a></h3>
22082215

22092216
<p>All images can be interpolated, though some special types of images
22102217
(like some gradients) have their own special interpolation rules. In
@@ -2216,8 +2223,8 @@ <h3 id=interpolating-images><span class=secno>11.1. </span> Interpolating
22162223
to <code>cross-fade(&lt;start image>, &lt;end image>, t)</code>.</p>
22172224
<!-- ====================================================================== -->
22182225

2219-
<h3 id=interpolating-gradients><span class=secno>11.2. </span>
2220-
Interpolating <a href="#ltgradient"><i>&lt;gradient></i></a></h3>
2226+
<h3 id=interpolating-gradients><span class=secno>9.2. </span> Interpolating
2227+
<a href="#ltgradient"><i>&lt;gradient></i></a></h3>
22212228

22222229
<p>Gradient images can be interpolated directly in CSS transitions and
22232230
animations, smoothly animating from one gradient to another. There are

‎css3-images/Overview.src.html‎

Lines changed: 22 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -259,27 +259,27 @@ <h3 id="image-notation">
259259
when rendered.</p>
260260

261261
<p>Multiple arguments can be given separated by commas, in which case the
262-
function represents the first &lt;image-decl> representing an image that
263-
the browser can successfully load and display. The final argument may be a
264-
&lt;color> which serves as an ultimate fallback if none of the preceding
265-
&lt;image-decl>s can be used, to ensure that any text or images placed on top
266-
of the image are still easily readable. If the final argument is a &lt;color>, it
267-
represents a solid-color image of the given color with no <i>intrinsic dimensions</i>.
262+
function represents the first &lt;image-decl> representing an image that
263+
the browser can successfully load and display. The final argument can specify
264+
a &lt;color> to serve as an ultimate fallback; this can be used, e.g. for
265+
'background-image', to ensure adequate contrast if none of the preceding
266+
&lt;image-decl>s can be used. If the final argument is a &lt;color>, it
267+
represents a solid-color image of the given color with no <i>intrinsic
268+
dimensions</i>.
268269

269270
<div class="example">
270271
<p>The rule below would tell the UA to load ''wavy.svg'' if
271272
it can; failing that to load ''wavy.png'' and display it at 150dpi;
272273
failing that to display ''wavy.gif''; and finally, if none of the images
273274
can be loaded and displayed, to use the color ''rgba(0,0,255,0.5)'' to create a
274-
dimensionless background image. For example, the browser may not understand
275-
how to render SVG images, the PNG may be malformed, and the GIF may not
276-
exist on the server, so requesting it returns an HTML 404 page instead of
277-
an image.</p>
275+
dimensionless background image. For example, the browser might not understand
276+
how to render SVG images, the PNG may be malformed, and the GIF might not
277+
exist on the server and return 404 error instead of an image.</p>
278278

279279
<pre>background-image: image(url(wavy.svg), 'wavy.png' 150dpi, "wavy.gif", rgba(0,0,255,0.5));</pre>
280280

281-
<p>The 'background-image' property specifies that dimensionless images
282-
must stretch to cover the entire background positioning area
281+
<p>The 'background-size' property specifies that dimensionless images
282+
by default stretch to cover the entire background positioning area
283283
[[CSS3BG]], so if none of the specified images can be displayed
284284
the background will be painted semi-transparent blue. As with any image,
285285
this fallback will be painted over the 'background-color' (if any).</p>
@@ -1231,8 +1231,11 @@ <h3 id="object-position">
12311231

12321232
<!-- ====================================================================== -->
12331233

1234-
<h2 id="image-resolution">
1235-
Overriding Image Resolutions: the 'image-resolution' property</h2>
1234+
<h2 id="image-processing">
1235+
Image Processing</h2>
1236+
1237+
<h3 id="image-resolution">
1238+
Overriding Image Resolutions: the 'image-resolution' property</h3>
12361239

12371240
<p>The <i>image resolution</i> is defined as the number of image
12381241
pixels per unit length, e.g., pixels per inch. Some image formats can
@@ -1315,8 +1318,8 @@ <h2 id="image-resolution">
13151318

13161319
<!-- ====================================================================== -->
13171320

1318-
<h2 id="image-orientation">
1319-
Orienting an Image on the Page: the 'image-orientation' property</h2>
1321+
<h3 id="image-orientation">
1322+
Orienting an Image on the Page: the 'image-orientation' property</h3>
13201323

13211324
<p>Images from camera phones, digital cameras or scanners may be encoded sideways.
13221325
For example, the first row of image data may represent the leftmost or
@@ -1391,8 +1394,8 @@ <h2 id="image-orientation">
13911394

13921395
<!-- ====================================================================== -->
13931396

1394-
<h2 id='image-rendering'>
1395-
Determining How to Scale an Image: the 'image-rendering' property</h2>
1397+
<h3 id='image-rendering'>
1398+
Determining How to Scale an Image: the 'image-rendering' property</h3>
13961399

13971400
<table class=propdef>
13981401
<tr>
@@ -1406,7 +1409,7 @@ <h2 id='image-rendering'>
14061409
<td>auto
14071410
<tr>
14081411
<th>Applies to:
1409-
<td>All elements
1412+
<td>images
14101413
<tr>
14111414
<th>Inherited:
14121415
<td>yes

0 commit comments

Comments
 (0)