E84D add more examples, link to sprite proposals · w3c/csswg-drafts@09266cc · GitHub
Skip to content

Commit 09266cc

Browse files
fantasaifantasai
committed
add more examples, link to sprite proposals
1 parent a7c5089 commit 09266cc

2 files changed

Lines changed: 102 additions & 63 deletions

File tree

‎css3-images/Overview.html‎

Lines changed: 81 additions & 55 deletions
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@ <h2 class="no-num no-toc" id=longstatus-date>Editor's Draft 9 June 2009</h2>
2323

2424
<dd><a
2525
href="http://dev.w3.org/csswg/css3-images/">http://dev.w3.org/csswg/css3-images/</a>
26-
--> <!-- <dt>Latest version:</dt>
26+
<!-- <dt>Latest version:</dt>
2727
<dd><a href="http://www.w3.org/TR/css3-images/">http://www.w3.org/TR/css3-images/</a></dd>
2828
<dt>Previous version:</dt>
2929
<dd><a href="http://www.w3.org/TR/2008/CR-css3-namespace-20080523/">http://www.w3.org/TR/2008/CR-css3-namespace-20080523/</a></dd> -->
@@ -202,7 +202,7 @@ <h2 id=image><span class=secno>3 </span>The &lt;image&gt; value type</h2>
202202
<p>Image values can be used in many CSS properties, including the
203203
&lsquo;<code class=property>background-image</code>&rsquo;, &lsquo;<code
204204
class=property>list-style-image</code>&rsquo;, &lsquo;<code
205-
class=property>cursor</code>&rsquo; <a href="#CSS21"
205+
class=property>cursor</code>&rsquo; properties <a href="#CSS21"
206206
rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a>.
207207

208208
<div>
@@ -215,17 +215,25 @@ <h2 id="#url"><span class=secno>4 </span>Simple Image References and
215215
class=css>url()</code>&rsquo; notation</a>, defined in <a href="#CSS21"
216216
rel=biblioentry>[CSS21]<!--{{!CSS21}}--></a>.
217217

218+
<div class=example>
219+
<p>In the example below, a background image is specified with
220+
&lsquo;<code class=css>url()</code>&rsquo; syntax:</p>
221+
222+
<pre>background-image: url(wavy.png);</pre>
223+
</div>
224+
218225
<p>A portion of an image may be referenced (clipped out and used as a
219226
standalone image) by use of fragment identifiers. <span class=issue>Need
220227
a spec to reference here</span>.
221228

222229
<div class=example>
223-
<p>For example, &lsquo;<code class=css>url(&lsquo;<code
224-
class=css>logos.png#xywh=10,30,60,20</code>&rsquo;)</code>&rsquo;
225-
references the 60 pixel by 20 pixel rectangle of an image beginning at
226-
the point 10 pixels in from the left, 30 pixels down from the top.
227-
(Note that quotation marks are required here, because unquoted commas
228-
are not allowed in &lsquo;<code class=css>url()</code>&rsquo; syntax.)</p>
230+
<p>For example, <code>url(&lsquo;<code
231+
class=css>logos.png#xywh=10,30,60,20</code>&rsquo;)</code> references
232+
the 60 pixel by 20 pixel rectangle of an image beginning at the point
233+
10 pixels in from the left, 30 pixels down from the top.
234+
235+
<p>Note that quotation marks are required here, because unquoted commas
236+
are not allowed in &lsquo;<code class=css>url()</code>&rsquo; syntax.</p>
229237
</div>
230238
</div>
231239

@@ -294,70 +302,88 @@ <h2 id="#image"><span class=secno>5 </span>Image Fallbacks: the
294302
<div>
295303
<h2 id=image-sprites><span class=secno>6 </span>Image Sprites</h2>
296304

297-
<p class=issue>Link to various proposals</p>
298-
</div>
305+
<div class=issue>
306+
<p>As yet unwritten. Discussions/proposals include:</p>
299307

300-
<div>
301-
<h2 id=resolution-units><span class=secno>7 </span>Resolution Units</h2>
308+
<ul>
309+
<li><a
310+
href="http://lists.w3.org/Archives/Public/www-style/2009May/0157.html">Jorrit's
311+
@sprite proposal</a>
302312

303-
<p>This specification defines the following units as part of the <dfn
304-
id=ltresolutiongt>&lt;resolution&gt;</dfn> value type:
313+
<li><a
314+
href="http://www.css3.info/summary-of-the-two-current-css-constants-proposals/#comment-212898">Adrian's
315+
image-vars proposal</a>
305316

306-
<dl>
307-
<dt>dpi
317+
<li><a
318+
href="http://lists.w3.org/Archives/Public/www-style/2009Jan/0185.html">Discussion
319+
from Jan 2008</a> and <a
320+
href="http://lists.w3.org/Archives/Public/www-style/2009Jan/0284.html">Jorrit's
321+
response</a>
322+
</ul>
323+
</div>
308324

309-
<dd>dots per inch
325+
<div>
326+
<h2 id=resolution-units><span class=secno>7 </span>Resolution Units</h2>
310327

311-
<dt>dpcm
328+
<p>This specification defines the following units as part of the <dfn
329+
id=ltresolutiongt>&lt;resolution&gt;</dfn> value type:
312330

313-
<dd>dots per centimeter
331+
<dl>
332+
<dt>dpi
314333

315-
<dt>dppx
334+
<dd>dots per inch
316335

317-
<dd>dots per &lsquo;<code class=css>px</code>&rsquo; unit
318-
</dl>
336+
<dt>dpcm
319337

320-
<p class=note>The default resolution of raster images in CSS is
321-
&lsquo;<code class=css>1dppx</code>&rsquo;.</p>
322-
</div>
338+
<dd>dots per centimeter
323339

324-
<h2 class=no-num id=acknowledgments>Acknowledgments</h2>
340+
<dt>dppx
325341

326-
<h2 class=no-num id=references>References</h2>
342+
<dd>dots per &lsquo;<code class=css>px</code>&rsquo; unit
343+
</dl>
327344

328-
<h3 class=no-num id=normative-references>Normative references</h3>
329-
<!--begin-normative--> <!-- Sorted by label -->
330-
<dl class=bibliography>
331-
<dt style="display: none"><!-- keeps the doc valid if the DL is empty -->
332-
<!---->
345+
<p class=note>The default resolution of raster images in CSS is
346+
&lsquo;<code class=css>1dppx</code>&rsquo;.</p>
347+
</div>
333348

334-
<dt id=CSS21>[CSS21]
349+
<h2 class=no-num id=acknowledgments>Acknowledgments</h2>
335350

336-
<dd>Bert Bos; et al. <a
337-
href="http://www.w3.org/TR/2009/CR-CSS21-20090423"><cite>Cascading Style
338-
Sheets Level 2 Revision 1 (CSS 2.1) Specification.</cite></a> 23 April
339-
2009. W3C Candidate Recommendation. (Work in progress.) URL: <a
340-
href="http://www.w3.org/TR/2009/CR-CSS21-20090423">http://www.w3.org/TR/2009/CR-CSS21-20090423</a>
341-
</dd>
342-
<!---->
351+
<h2 class=no-num id=references>References</h2>
343352

344-
<dt id=RFC2119>[RFC2119]
353+
<h3 class=no-num id=normative-references>Normative references</h3>
354+
<!--begin-normative--> <!-- Sorted by label -->
355+
<dl class=bibliography>
356+
<dt style="display:
357+
none"><!-- keeps the doc valid if the DL is empty --> <!---->
345358

346-
<dd>S. Bradner. <a href="http://www.ietf.org/rfc/rfc2119.txt"><cite>Key
347-
words for use in RFCs to Indicate Requirement Levels.</cite></a>
348-
Internet RFC 2119. URL: <a
349-
href="http://www.ietf.org/rfc/rfc2119.txt">http://www.ietf.org/rfc/rfc2119.txt</a>
350-
</dd>
351-
<!---->
352-
</dl>
353-
<!--end-normative-->
354-
<h3 class=no-num id=informative-references>Informative references</h3>
355-
<!--begin-informative--> <!-- Sorted by label -->
356-
<dl class=bibliography>
357-
<dt style="display: none"><!-- keeps the doc valid if the DL is empty -->
359+
<dt id=CSS21>[CSS21]
360+
361+
<dd>Bert Bos; et al. <a
362+
href="http://www.w3.org/TR/2009/CR-CSS21-20090423"><cite>Cascading
363+
Style Sheets Level 2 Revision 1 (CSS 2.1) Specification.</cite></a> 23
364+
April 2009. W3C Candidate Recommendation. (Work in progress.) URL: <a
365+
href="http://www.w3.org/TR/2009/CR-CSS21-20090423">http://www.w3.org/TR/2009/CR-CSS21-20090423</a>
366+
</dd>
358367
<!---->
359-
</dl>
360-
<!--end-informative--></div>
368+
369+
<dt id=RFC2119>[RFC2119]
370+
371+
<dd>S. Bradner. <a href="http://www.ietf.org/rfc/rfc2119.txt"><cite>Key
372+
words for use in RFCs to Indicate Requirement Levels.</cite></a>
373+
Internet RFC 2119. URL: <a
374+
href="http://www.ietf.org/rfc/rfc2119.txt">http://www.ietf.org/rfc/rfc2119.txt</a>
375+
</dd>
376+
<!---->
377+
</dl>
378+
<!--end-normative-->
379+
<h3 class=no-num id=informative-references>Informative references</h3>
380+
<!--begin-informative--> <!-- Sorted by label -->
381+
<dl class=bibliography>
382+
<dt style="display:
383+
none"><!-- keeps the doc valid if the DL is empty --> <!---->
384+
</dl>
385+
<!--end-informative--></div>
386+
</div>
361387
</html>
362388
<!-- Keep this comment at the end of the file
363389
Local variables:

‎css3-images/Overview.src.html‎

Lines changed: 21 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@ <h2 class="no-num no-toc">[LONGSTATUS] [DATE]</h2>
1818
<dl>
1919
<dt>This version:</dt>
2020
<!-- <dd><a href="http://www.w3.org/TR/[YEAR]/CR-css3-images-[CDATE]/">http://www.w3.org/TR/[YEAR]/CR-css3-images-[CDATE]/</a></dd> -->
21-
<dd><a href="http://dev.w3.org/csswg/ 970E css3-images/">http://dev.w3.org/csswg/css3-images/</a> -->
21+
<dd><a href="http://dev.w3.org/csswg/css3-images/">http://dev.w3.org/csswg/css3-images/</a>
2222
<!-- <dt>Latest version:</dt>
2323
<dd><a href="http://www.w3.org/TR/css3-images/">http://www.w3.org/TR/css3-images/</a></dd>
2424
<dt>Previous version:</dt>
@@ -109,7 +109,7 @@ <h2 id="image">The &lt;image&gt; value type</h2>
109109
<pre class="prod"><dfn>&lt;image&gt;</dfn> = &lt;url&gt; | &lt;sprite&gt; | &lt;image-list&gt;</pre>
110110

111111
<p>Image values can be used in many CSS properties, including the
112-
'background-image', 'list-style-image', 'cursor' [[!CSS21]].
112+
'background-image', 'list-style-image', 'cursor' properties [[!CSS21]].
113113

114114
<div>
115115
<h2 id="#url">Simple Image References and Image Slices: the ''url()'' notation</h2>
@@ -119,16 +119,23 @@ <h2 id="#url">Simple Image References and Image Slices: the ''url()'' notation</
119119
<a href="http://www.w3.org/TR/CSS21/syndata.html#uri">''url()'' notation</a>,
120120
defined in [[!CSS21]].
121121

122+
<div class="example">
123+
<p>In the example below, a background image is specified with ''url()''
124+
syntax:</p>
125+
<pre>background-image: url(wavy.png);</pre>
126+
</div>
127+
122128
<p>A portion of an image may be referenced (clipped out and used as a
123129
standalone image) by use of fragment identifiers.
124130
<span class='issue'>Need a spec to reference here</span>.
125131

126132
<div class="example">
127-
<p>For example, ''url('logos.png#xywh=10,30,60,20')'' references the
128-
60 pixel by 20 pixel rectangle of an image beginning at the point
129-
10 pixels in from the left, 30 pixels down from the top. (Note that
130-
quotation marks are required here, because unquoted commas are not
131-
allowed in ''url()'' syntax.)</p>
133+
<p>For example, <code>url('logos.png#xywh=10,30,60,20')</code>
134+
references the 60 pixel by 20 pixel rectangle of an image beginning
135+
at the point 10 pixels in from the left, 30 pixels down from the top.
136+
137+
<p>Note that quotation marks are required here, because unquoted
138+
commas are not allowed in ''url()'' syntax.</p>
132139
</div>
133140
</div>
134141

@@ -187,7 +194,13 @@ <h2 id="#image">Image Fallbacks: the ''image()'' notation</h2>
187194
<div>
188195
<h2>Image Sprites</h2>
189 8026 196

190-
<p class="issue">Link to various proposals</p>
197+
<div class="issue">
198+
<p>As yet unwritten. Discussions/proposals include:</p>
199+
<ul>
200+
<li><a href="http://lists.w3.org/Archives/Public/www-style/2009May/0157.html">Jorrit's @sprite proposal</a>
201+
<li><a href="http://www.css3.info/summary-of-the-two-current-css-constants-proposals/#comment-212898">Adrian's image-vars proposal</a>
202+
<li><a href="http://lists.w3.org/Archives/Public/www-style/2009Jan/0185.html">Discussion from Jan 2008</a> and <a href="http://lists.w3.org/Archives/Public/www-style/2009Jan/0284.html">Jorrit's response</a>
203+
</ul>
191204
</div>
192205

193206
<div>

0 commit comments

Comments
 (0)