[html5] r7225 - [giow] (0) Update the srcset='' algorithm to fix bugs; add more non-normative ma [...]
whatwg at whatwg.org
whatwg at whatwg.org
Tue Aug 7 12:09:47 PDT 2012
Author: ianh
Date: 2012-08-07 12:09:45 -0700 (Tue, 07 Aug 2012)
New Revision: 7225
Modified:
complete.html
index
source
Log:
[giow] (0) Update the srcset='' algorithm to fix bugs; add more non-normative material; unrelated CLDR update
Affected topics: HTML
Modified: complete.html
===================================================================
--- complete.html 2012-08-02 18:03:20 UTC (rev 7224)
+++ complete.html 2012-08-07 19:09:45 UTC (rev 7225)
@@ -246,7 +246,7 @@
<header class=head id=head><p><a class=logo href=http://www.whatwg.org/><img alt=WHATWG height=101 src=/images/logo width=101></a></p>
<hgroup><h1 class=allcaps>HTML</h1>
- <h2 class="no-num no-toc">Living Standard — Last Updated 2 August 2012</h2>
+ <h2 class="no-num no-toc">Living Standard — Last Updated 7 August 2012</h2>
</hgroup><dl><dt><strong>Web developer edition:</strong></dt>
<dd><strong><a href=http://developers.whatwg.org/>http://developers.whatwg.org/</a></strong></dd>
<dt>Multiple-page version:</dt>
@@ -555,7 +555,8 @@
<li><a href=#an-image-not-intended-for-the-user><span class=secno>4.8.1.1.11 </span>An image not intended for the user</a></li>
<li><a href=#an-image-in-an-e-mail-or-private-document-intended-for-a-specific-person-who-is-known-to-be-able-to-view-images><span class=secno>4.8.1.1.12 </span>An image in an e-mail or private document intended for a specific person who is known to be able to view images</a></li>
<li><a href=#guidance-for-markup-generators><span class=secno>4.8.1.1.13 </span>Guidance for markup generators</a></li>
- <li><a href=#guidance-for-conformance-checkers><span class=secno>4.8.1.1.14 </span>Guidance for conformance checkers</a></ol></ol></li>
+ <li><a href=#guidance-for-conformance-checkers><span class=secno>4.8.1.1.14 </span>Guidance for conformance checkers</a></ol></li>
+ <li><a href=#adaptive-images><span class=secno>4.8.1.2 </span>Adaptive images</a></ol></li>
<li><a href=#the-iframe-element><span class=secno>4.8.2 </span>The <code>iframe</code> element</a></li>
<li><a href=#the-embed-element><span class=secno>4.8.3 </span>The <code>embed</code> element</a></li>
<li><a href=#the-object-element><span class=secno>4.8.4 </span>The <code>object</code> element</a></li>
@@ -24127,6 +24128,8 @@
in <var title="">input</var> (skipping past the U+002C COMMA
character (,) separating this candidate from the next).</li>
+ <li><p>Return to the step labeled <i>splitting loop</i>.</li>
+
<li><p><i>Descriptor parser</i>: Let <var title="">candidates</var>
be an initially empty ordered list of <a href=#url title=URL>URLs</a>
each with an associated pixel density, and optionally an associated
@@ -24270,31 +24273,29 @@
the viewport. <a href=#refsCSS>[CSS]</a></li>
<li><p>If there are any entries in <var title="">candidates</var>
- that have an associated width that is greater than <var title="">max width</var>, then remove them, unless that would
+ that have an associated width that is less than <var title="">max width</var>, then remove them, unless that would
remove all the entries, in which case remove only the entries whose
- associated width is greater than the smallest such width.</li>
+ associated width is less than the greatest such width.</li>
<li><p>If there are any entries in <var title="">candidates</var>
- that have an associated height that is greater than <var title="">max height</var>, then remove them, unless that would
+ that have an associated height that is less than <var title="">max height</var>, then remove them, unless that would
remove all the entries, in which case remove only the entries whose
- associated height is greater than the smallest such
- height.</li>
+ associated height is less than the greatest such height.</li>
<li><p>If there are any entries in <var title="">candidates</var>
that have an associated pixel density that is less than a
user-agent-defined value giving the nominal pixel density of the
display, then remove them, unless that would remove all the
entries, in which case remove only the entries whose associated
- pixel density is less than the greatest such pixel
- density.</li>
+ pixel density is less than the greatest such pixel density.</li>
<li><p>Remove all the entries in <var title="">candidates</var>
- that have an associated width that is less than the greatest such
- width.</li>
+ that have an associated width that is greater than the smallest
+ such width.</li>
<li><p>Remove all the entries in <var title="">candidates</var>
- that have an associated height that is less than the greatest such
- height.</li>
+ that have an associated height that is greater than the smallest
+ such height.</li>
<li><p>Remove all the entries in <var title="">candidates</var>
that have an associated pixel density that is greater than the
@@ -25662,7 +25663,110 @@
</ul></div>
+ <h5 id=adaptive-images><span class=secno>4.8.1.2 </span>Adaptive images</h5>
+ <p><i>This section is non-normative.</i></p>
+
+ <p>CSS and media queries can be used to construct graphical page
+ layouts that adapt dynamically to the user's environment, in
+ particular to different viewport dimensions and pixel densities. For
+ content, however, CSS does not help; instead, we have the
+ <code><a href=#the-img-element>img</a></code> element's <code title=attr-img-srcset><a href=#attr-img-srcset>srcset</a></code> attribute. This section walks
+ through a sample case showing how to use this attribute.</p>
+
+ <p>Consider a situation where on wide screens (wider than 600 CSS
+ pixels) a 300×150 image named <code title="">a-rectangle.png</code> is to be used, but on smaller
+ screens (600 CSS pixels and less), a smaller 100×100 image
+ called <code title="">a-square.png</code> is to be used. The markup
+ for this would look like this:</p>
+
+ <pre><figure>
+ <img src="a-rectangle.png" srcset="a-square.png 600w"
+ alt="Barney Frank wears a suit and glasses.">
+ <figcaption>Barney Frank, 2011</figcaption>
+</figure></pre>
+
+ <p class=note>For details on what to put in the <code title=attr-img-alt><a href=#attr-img-alt>alt</a></code> attribute, see the earlier
+ sections.</p>
+
+ <p>The problem with this is that the user agent does not necessarily
+ know what dimensions to use for the image when the image is loading.
+ To avoid the layout having to be reflowed multiple times as the page
+ is loading, CSS and CSS media queries can be used to provide the
+ dimensions:</p>
+
+ <pre><figure>
+ <style scoped>
+ #a { width: 300px; height: 150px; }
+ @media all and (max-width: 600px) { #a { width: 100px; height: 100px; } }
+ </style>
+ <img src="a-rectangle.png" srcset="a-square.png 600w" id="a"
+ alt="Barney Frank wears a suit and glasses.">
+ <figcaption>Barney Frank, 2011</figcaption>
+</figure></pre>
+
+ <p>Alternatively, the <code title=attr-dim-width><a href=#attr-dim-width>width</a></code> and
+ <code title=attr-dim-height><a href=#attr-dim-height>height</a></code> attributes can be used
+ to provide the width for legacy user agents, using CSS just for the
+ user agents that support <code title=attr-img-srcset><a href=#attr-img-srcset>srcset</a></code>:</p>
+
+ <pre><figure>
+ <style scoped media="all and (max-width: 600px)">
+ #a { width: 100px; height: 100px; }
+ </style>
+ <img src="a-rectangle.png" width="300" height="100"
+ srcset="a-square.png 600w" id=a
+ alt="Barney Frank wears a suit and glasses.">
+ <figcaption>Barney Frank, 2011</figcaption>
+</figure></pre>
+
+ <hr><p>The <code title=attr-img-srcset><a href=#attr-img-srcset>srcset</a></code> attribute is used
+ with the <code title=attr-img-src><a href=#attr-img-src>src</a></code> attribute, which
+ gives the URL of the image to use for legacy user agents that do not
+ support the <code title=attr-img-srcset><a href=#attr-img-srcset>srcset</a></code> attribute.
+ This leads to a question of which image to provide in the <code title=attr-img-src><a href=#attr-img-src>src</a></code> attribute.</p>
+
+ <p>The answer that results in the least duplication is to provide
+ the image suitable for an infinite width and infinite height
+ viewport with a pixel density of 1 CSS pixel per device pixel:</p>
+
+ <pre><img src="pear-desktop.jpeg" srcset="pear-mobile.jpeg 720w, pear-tablet.jpeg 1280w"
+ alt="The pear is juicy."></pre>
+
+ <p>However, if legacy mobile user agents are more important, one can
+ list all three images in the <code title=attr-img-srcset><a href=#attr-img-srcset>srcset</a></code> attribute, overriding the
+ <code title=attr-img-src><a href=#attr-img-src>src</a></code> attribute entirely. To do
+ this, the widest image has to have the pixel density descriptor
+ instead of the width, since there is no way to specify an infinite
+ width explicitly:</p>
+
+ <pre><img src="pear-mobile.jpeg"
+ srcset="pear-mobile.jpeg 720w, pear-tablet.jpeg 1280w, pear-desktop.jpeg 1x"
+ alt="The pear is juicy."></pre>
+
+ <p>Since at this point the <code title=attr-img-src><a href=#attr-img-src>src</a></code>
+ attribute is actually being ignored entirely by <code title=attr-img-srcset><a href=#attr-img-srcset>srcset</a></code>-supporting user agents, the
+ <code title=attr-img-src><a href=#attr-img-src>src</a></code> attribute can default to any
+ image, including one that is neither the smallest nor biggest:</p>
+
+ <pre><img src="pear-tablet.jpeg"
+ srcset="pear-mobile.jpeg 720w, pear-tablet.jpeg 1280w, pear-desktop.jpeg 1x"
+ alt="The pear is juicy."></pre>
+
+ <hr><p>The dimensions in the <code title=attr-img-srcset><a href=#attr-img-srcset>srcset</a></code>
+ attribute are the maximum (viewport) dimensions that an image is
+ intended for. It is possible to think of the numbers as minimums,
+ though... if the images are listed in order, then the minimum for an
+ image is the dimension given for the previous image. This example
+ attempts to demonstrate this by using the file names to show the
+ minimum values for each image:</p>
+
+ <pre><img src="pear-tablet.jpeg"
+ srcset="pear-min0.jpeg 720w, pear-min721.jpeg 1280w, pear-min1281.jpeg 1x"
+ alt="The pear is juicy."></pre>
+
+
+
<h4 id=the-iframe-element><span class=secno>4.8.2 </span>The <dfn><code>iframe</code></dfn> element</h4>
<dl class=element><dt><a href=#element-dfn-categories title=element-dfn-categories>Categories</a>:</dt>
@@ -96552,7 +96656,7 @@
:root:lang(cgg), :not(:lang(cgg)) > :lang(cgg) { quotes: '\201c' '\201d' '\2018' '\2019' } /* “ ” ‘ ’ */
:root:lang(chr), :not(:lang(chr)) > :lang(chr) { quotes: '\201c' '\201d' '\2018' '\2019' } /* “ ” ‘ ’ */
:root:lang(cs), :not(:lang(cs)) > :lang(cs) { quotes: '\201e' '\201c' '\201a' '\2018' } /* „ “ ‚ ‘ */
-:root:lang(da), :not(:lang(da)) > :lang(da) { quotes: '\00bb' '\00ab' '\203a' '\2039' } /* » « › ‹ */
+:root:lang(da), :not(:lang(da)) > :lang(da) { quotes: '\201c' '\201d' '\2018' '\2019' } /* “ ” ‘ ’ */
:root:lang(dav), :not(:lang(dav)) > :lang(dav) { quotes: '\201c' '\201d' '\2018' '\2019' } /* “ ” ‘ ’ */
:root:lang(de), :not(:lang(de)) > :lang(de) { quotes: '\201e' '\201c' '\201a' '\2018' } /* „ “ ‚ ‘ */
:root:lang(de-CH), :not(:lang(de-CH)) > :lang(de-CH) { quotes: '\00ab' '\00bb' '\2039' '\203a' } /* « » ‹ › */
@@ -96564,7 +96668,7 @@
:root:lang(ee), :not(:lang(ee)) > :lang(ee) { quotes: '\201c' '\201d' '\2018' '\2019' } /* “ ” ‘ ’ */
:root:lang(el), :not(:lang(el)) > :lang(el) { quotes: '\00ab' '\00bb' '\201c' '\201d' } /* « » “ ” */
:root:lang(en), :not(:lang(en)) > :lang(en) { quotes: '\201c' '\201d' '\2018' '\2019' } /* “ ” ‘ ’ */
-:root:lang(en-GB), :not(:lang(en-GB)) > :lang(en-GB) { quotes: '\2018' '\2019' '\201c' '\201d' } /* ‘ ’ “ ” */
+:root:lang(en-GB), :not(:lang(en-GB)) > :lang(en-GB) { quotes: '\201c' '\201d' '\2018' '\2019' } /* “ ” ‘ ’ */
:root:lang(es), :not(:lang(es)) > :lang(es) { quotes: '\201c' '\201d' '\00ab' '\00bb' } /* “ ” « » */
:root:lang(et), :not(:lang(et)) > :lang(et) { quotes: '\201e' '\201c' '\201a' '\2018' } /* „ “ ‚ ‘ */
:root:lang(eu), :not(:lang(eu)) > :lang(eu) { quotes: '\201c' '\201d' '\00ab' '\00bb' } /* “ ” « » */
@@ -96572,14 +96676,14 @@
:root:lang(fa), :not(:lang(fa)) > :lang(fa) { quotes: '\00ab' '\00bb' '\2039' '\203a' } /* « » ‹ › */
:root:lang(ff), :not(:lang(ff)) > :lang(ff) { quotes: '\201e' '\201d' '\201a' '\2019' } /* „ ” ‚ ’ */
:root:lang(fi), :not(:lang(fi)) > :lang(fi) { quotes: '\201d' '\201d' '\2019' '\2019' } /* ” ” ’ ’ */
-:root:lang(fr), :not(:lang(fr)) > :lang(fr) { quotes: '\201c' '\201d' '\00ab' '\00bb' } /* “ ” « » */
+:root:lang(fr), :not(:lang(fr)) > :lang(fr) { quotes: '\00ab' '\00bb' '\00ab' '\00bb' } /* « » « » */
:root:lang(fr-CA), :not(:lang(fr-CA)) > :lang(fr-CA) { quotes: '\00ab' '\00bb' '\2039' '\203a' } /* « » ‹ › */
:root:lang(fr-CH), :not(:lang(fr-CH)) > :lang(fr-CH) { quotes: '\00ab' '\00bb' '\2039' '\203a' } /* « » ‹ › */
:root:lang(gsw), :not(:lang(gsw)) > :lang(gsw) { quotes: '\00ab' '\00bb' '\2039' '\203a' } /* « » ‹ › */
:root:lang(gu), :not(:lang(gu)) > :lang(gu) { quotes: '\201c' '\201d' '\2018' '\2019' } /* “ ” ‘ ’ */
:root:lang(guz), :not(:lang(guz)) > :lang(guz) { quotes: '\201c' '\201d' '\2018' '\2019' } /* “ ” ‘ ’ */
:root:lang(ha), :not(:lang(ha)) > :lang(ha) { quotes: '\201c' '\201d' '\2018' '\2019' } /* “ ” ‘ ’ */
-:root:lang(he), :not(:lang(he)) > :lang(he) { quotes: '\201c' '\201d' '\0027' '\0027' } /* “ ” ' ' */
+:root:lang(he), :not(:lang(he)) > :lang(he) { quotes: '\0022' '\0022' '\0027' '\0027' } /* " " ' ' */
:root:lang(hi), :not(:lang(hi)) > :lang(hi) { quotes: '\201c' '\201d' '\2018' '\2019' } /* “ ” ‘ ’ */
:root:lang(hr), :not(:lang(hr)) > :lang(hr) { quotes: '\201e' '\201c' '\201a' '\2018' } /* „ “ ‚ ‘ */
:root:lang(hu), :not(:lang(hu)) > :lang(hu) { quotes: '\201e' '\201d' '\00bb' '\00ab' } /* „ ” » « */
@@ -96604,11 +96708,11 @@
:root:lang(lg), :not(:lang(lg)) > :lang(lg) { quotes: '\201c' '\201d' '\2018' '\2019' } /* “ ” ‘ ’ */
:root:lang(ln), :not(:lang(ln)) > :lang(ln) { quotes: '\201c' '\201d' '\2018' '\2019' } /* “ ” ‘ ’ */
:root:lang(lo), :not(:lang(lo)) > :lang(lo) { quotes: '\201c' '\201d' '\2018' '\2019' } /* “ ” ‘ ’ */
-:root:lang(lt), :not(:lang(lt)) > :lang(lt) { quotes: '\201e' '\201c' '\201a' '\2018' } /* „ “ ‚ ‘ */
+:root:lang(lt), :not(:lang(lt)) > :lang(lt) { quotes: '\201e' '\201c' '\201e' '\201c' } /* „ “ „ “ */
:root:lang(lu), :not(:lang(lu)) > :lang(lu) { quotes: '\201c' '\201d' '\2018' '\2019' } /* “ ” ‘ ’ */
:root:lang(luo), :not(:lang(luo)) > :lang(luo) { quotes: '\201c' '\201d' '\2018' '\2019' } /* “ ” ‘ ’ */
:root:lang(luy), :not(:lang(luy)) > :lang(luy) { quotes: '\201e' '\201c' '\201a' '\2018' } /* „ “ ‚ ‘ */
-:root:lang(lv), :not(:lang(lv)) > :lang(lv) { quotes: '\00ab' '\00bb' '\201e' '\201c' } /* « » „ “ */
+:root:lang(lv), :not(:lang(lv)) > :lang(lv) { quotes: '\201c' '\201d' '\2018' '\2019' } /* “ ” ‘ ’ */
:root:lang(mas), :not(:lang(mas)) > :lang(mas) { quotes: '\201c' '\201d' '\2018' '\2019' } /* “ ” ‘ ’ */
:root:lang(mer), :not(:lang(mer)) > :lang(mer) { quotes: '\201c' '\201d' '\2018' '\2019' } /* “ ” ‘ ’ */
:root:lang(mfe), :not(:lang(mfe)) > :lang(mfe) { quotes: '\201c' '\201d' '\2018' '\2019' } /* “ ” ‘ ’ */
Modified: index
===================================================================
--- index 2012-08-02 18:03:20 UTC (rev 7224)
+++ index 2012-08-07 19:09:45 UTC (rev 7225)
@@ -246,7 +246,7 @@
<header class=head id=head><p><a class=logo href=http://www.whatwg.org/><img alt=WHATWG height=101 src=/images/logo width=101></a></p>
<hgroup><h1 class=allcaps>HTML</h1>
- <h2 class="no-num no-toc">Living Standard — Last Updated 2 August 2012</h2>
+ <h2 class="no-num no-toc">Living Standard — Last Updated 7 August 2012</h2>
</hgroup><dl><dt><strong>Web developer edition:</strong></dt>
<dd><strong><a href=http://developers.whatwg.org/>http://developers.whatwg.org/</a></strong></dd>
<dt>Multiple-page version:</dt>
@@ -555,7 +555,8 @@
<li><a href=#an-image-not-intended-for-the-user><span class=secno>4.8.1.1.11 </span>An image not intended for the user</a></li>
<li><a href=#an-image-in-an-e-mail-or-private-document-intended-for-a-specific-person-who-is-known-to-be-able-to-view-images><span class=secno>4.8.1.1.12 </span>An image in an e-mail or private document intended for a specific person who is known to be able to view images</a></li>
<li><a href=#guidance-for-markup-generators><span class=secno>4.8.1.1.13 </span>Guidance for markup generators</a></li>
- <li><a href=#guidance-for-conformance-checkers><span class=secno>4.8.1.1.14 </span>Guidance for conformance checkers</a></ol></ol></li>
+ <li><a href=#guidance-for-conformance-checkers><span class=secno>4.8.1.1.14 </span>Guidance for conformance checkers</a></ol></li>
+ <li><a href=#adaptive-images><span class=secno>4.8.1.2 </span>Adaptive images</a></ol></li>
<li><a href=#the-iframe-element><span class=secno>4.8.2 </span>The <code>iframe</code> element</a></li>
<li><a href=#the-embed-element><span class=secno>4.8.3 </span>The <code>embed</code> element</a></li>
<li><a href=#the-object-element><span class=secno>4.8.4 </span>The <code>object</code> element</a></li>
@@ -24127,6 +24128,8 @@
in <var title="">input</var> (skipping past the U+002C COMMA
character (,) separating this candidate from the next).</li>
+ <li><p>Return to the step labeled <i>splitting loop</i>.</li>
+
<li><p><i>Descriptor parser</i>: Let <var title="">candidates</var>
be an initially empty ordered list of <a href=#url title=URL>URLs</a>
each with an associated pixel density, and optionally an associated
@@ -24270,31 +24273,29 @@
the viewport. <a href=#refsCSS>[CSS]</a></li>
<li><p>If there are any entries in <var title="">candidates</var>
- that have an associated width that is greater than <var title="">max width</var>, then remove them, unless that would
+ that have an associated width that is less than <var title="">max width</var>, then remove them, unless that would
remove all the entries, in which case remove only the entries whose
- associated width is greater than the smallest such width.</li>
+ associated width is less than the greatest such width.</li>
<li><p>If there are any entries in <var title="">candidates</var>
- that have an associated height that is greater than <var title="">max height</var>, then remove them, unless that would
+ that have an associated height that is less than <var title="">max height</var>, then remove them, unless that would
remove all the entries, in which case remove only the entries whose
- associated height is greater than the smallest such
- height.</li>
+ associated height is less than the greatest such height.</li>
<li><p>If there are any entries in <var title="">candidates</var>
that have an associated pixel density that is less than a
user-agent-defined value giving the nominal pixel density of the
display, then remove them, unless that would remove all the
entries, in which case remove only the entries whose associated
- pixel density is less than the greatest such pixel
- density.</li>
+ pixel density is less than the greatest such pixel density.</li>
<li><p>Remove all the entries in <var title="">candidates</var>
- that have an associated width that is less than the greatest such
- width.</li>
+ that have an associated width that is greater than the smallest
+ such width.</li>
<li><p>Remove all the entries in <var title="">candidates</var>
- that have an associated height that is less than the greatest such
- height.</li>
+ that have an associated height that is greater than the smallest
+ such height.</li>
<li><p>Remove all the entries in <var title="">candidates</var>
that have an associated pixel density that is greater than the
@@ -25662,7 +25663,110 @@
</ul></div>
+ <h5 id=adaptive-images><span class=secno>4.8.1.2 </span>Adaptive images</h5>
+ <p><i>This section is non-normative.</i></p>
+
+ <p>CSS and media queries can be used to construct graphical page
+ layouts that adapt dynamically to the user's environment, in
+ particular to different viewport dimensions and pixel densities. For
+ content, however, CSS does not help; instead, we have the
+ <code><a href=#the-img-element>img</a></code> element's <code title=attr-img-srcset><a href=#attr-img-srcset>srcset</a></code> attribute. This section walks
+ through a sample case showing how to use this attribute.</p>
+
+ <p>Consider a situation where on wide screens (wider than 600 CSS
+ pixels) a 300×150 image named <code title="">a-rectangle.png</code> is to be used, but on smaller
+ screens (600 CSS pixels and less), a smaller 100×100 image
+ called <code title="">a-square.png</code> is to be used. The markup
+ for this would look like this:</p>
+
+ <pre><figure>
+ <img src="a-rectangle.png" srcset="a-square.png 600w"
+ alt="Barney Frank wears a suit and glasses.">
+ <figcaption>Barney Frank, 2011</figcaption>
+</figure></pre>
+
+ <p class=note>For details on what to put in the <code title=attr-img-alt><a href=#attr-img-alt>alt</a></code> attribute, see the earlier
+ sections.</p>
+
+ <p>The problem with this is that the user agent does not necessarily
+ know what dimensions to use for the image when the image is loading.
+ To avoid the layout having to be reflowed multiple times as the page
+ is loading, CSS and CSS media queries can be used to provide the
+ dimensions:</p>
+
+ <pre><figure>
+ <style scoped>
+ #a { width: 300px; height: 150px; }
+ @media all and (max-width: 600px) { #a { width: 100px; height: 100px; } }
+ </style>
+ <img src="a-rectangle.png" srcset="a-square.png 600w" id="a"
+ alt="Barney Frank wears a suit and glasses.">
+ <figcaption>Barney Frank, 2011</figcaption>
+</figure></pre>
+
+ <p>Alternatively, the <code title=attr-dim-width><a href=#attr-dim-width>width</a></code> and
+ <code title=attr-dim-height><a href=#attr-dim-height>height</a></code> attributes can be used
+ to provide the width for legacy user agents, using CSS just for the
+ user agents that support <code title=attr-img-srcset><a href=#attr-img-srcset>srcset</a></code>:</p>
+
+ <pre><figure>
+ <style scoped media="all and (max-width: 600px)">
+ #a { width: 100px; height: 100px; }
+ </style>
+ <img src="a-rectangle.png" width="300" height="100"
+ srcset="a-square.png 600w" id=a
+ alt="Barney Frank wears a suit and glasses.">
+ <figcaption>Barney Frank, 2011</figcaption>
+</figure></pre>
+
+ <hr><p>The <code title=attr-img-srcset><a href=#attr-img-srcset>srcset</a></code> attribute is used
+ with the <code title=attr-img-src><a href=#attr-img-src>src</a></code> attribute, which
+ gives the URL of the image to use for legacy user agents that do not
+ support the <code title=attr-img-srcset><a href=#attr-img-srcset>srcset</a></code> attribute.
+ This leads to a question of which image to provide in the <code title=attr-img-src><a href=#attr-img-src>src</a></code> attribute.</p>
+
+ <p>The answer that results in the least duplication is to provide
+ the image suitable for an infinite width and infinite height
+ viewport with a pixel density of 1 CSS pixel per device pixel:</p>
+
+ <pre><img src="pear-desktop.jpeg" srcset="pear-mobile.jpeg 720w, pear-tablet.jpeg 1280w"
+ alt="The pear is juicy."></pre>
+
+ <p>However, if legacy mobile user agents are more important, one can
+ list all three images in the <code title=attr-img-srcset><a href=#attr-img-srcset>srcset</a></code> attribute, overriding the
+ <code title=attr-img-src><a href=#attr-img-src>src</a></code> attribute entirely. To do
+ this, the widest image has to have the pixel density descriptor
+ instead of the width, since there is no way to specify an infinite
+ width explicitly:</p>
+
+ <pre><img src="pear-mobile.jpeg"
+ srcset="pear-mobile.jpeg 720w, pear-tablet.jpeg 1280w, pear-desktop.jpeg 1x"
+ alt="The pear is juicy."></pre>
+
+ <p>Since at this point the <code title=attr-img-src><a href=#attr-img-src>src</a></code>
+ attribute is actually being ignored entirely by <code title=attr-img-srcset><a href=#attr-img-srcset>srcset</a></code>-supporting user agents, the
+ <code title=attr-img-src><a href=#attr-img-src>src</a></code> attribute can default to any
+ image, including one that is neither the smallest nor biggest:</p>
+
+ <pre><img src="pear-tablet.jpeg"
+ srcset="pear-mobile.jpeg 720w, pear-tablet.jpeg 1280w, pear-desktop.jpeg 1x"
+ alt="The pear is juicy."></pre>
+
+ <hr><p>The dimensions in the <code title=attr-img-srcset><a href=#attr-img-srcset>srcset</a></code>
+ attribute are the maximum (viewport) dimensions that an image is
+ intended for. It is possible to think of the numbers as minimums,
+ though... if the images are listed in order, then the minimum for an
+ image is the dimension given for the previous image. This example
+ attempts to demonstrate this by using the file names to show the
+ minimum values for each image:</p>
+
+ <pre><img src="pear-tablet.jpeg"
+ srcset="pear-min0.jpeg 720w, pear-min721.jpeg 1280w, pear-min1281.jpeg 1x"
+ alt="The pear is juicy."></pre>
+
+
+
<h4 id=the-iframe-element><span class=secno>4.8.2 </span>The <dfn><code>iframe</code></dfn> element</h4>
<dl class=element><dt><a href=#element-dfn-categories title=element-dfn-categories>Categories</a>:</dt>
@@ -96552,7 +96656,7 @@
:root:lang(cgg), :not(:lang(cgg)) > :lang(cgg) { quotes: '\201c' '\201d' '\2018' '\2019' } /* “ ” ‘ ’ */
:root:lang(chr), :not(:lang(chr)) > :lang(chr) { quotes: '\201c' '\201d' '\2018' '\2019' } /* “ ” ‘ ’ */
:root:lang(cs), :not(:lang(cs)) > :lang(cs) { quotes: '\201e' '\201c' '\201a' '\2018' } /* „ “ ‚ ‘ */
-:root:lang(da), :not(:lang(da)) > :lang(da) { quotes: '\00bb' '\00ab' '\203a' '\2039' } /* » « › ‹ */
+:root:lang(da), :not(:lang(da)) > :lang(da) { quotes: '\201c' '\201d' '\2018' '\2019' } /* “ ” ‘ ’ */
:root:lang(dav), :not(:lang(dav)) > :lang(dav) { quotes: '\201c' '\201d' '\2018' '\2019' } /* “ ” ‘ ’ */
:root:lang(de), :not(:lang(de)) > :lang(de) { quotes: '\201e' '\201c' '\201a' '\2018' } /* „ “ ‚ ‘ */
:root:lang(de-CH), :not(:lang(de-CH)) > :lang(de-CH) { quotes: '\00ab' '\00bb' '\2039' '\203a' } /* « » ‹ › */
@@ -96564,7 +96668,7 @@
:root:lang(ee), :not(:lang(ee)) > :lang(ee) { quotes: '\201c' '\201d' '\2018' '\2019' } /* “ ” ‘ ’ */
:root:lang(el), :not(:lang(el)) > :lang(el) { quotes: '\00ab' '\00bb' '\201c' '\201d' } /* « » “ ” */
:root:lang(en), :not(:lang(en)) > :lang(en) { quotes: '\201c' '\201d' '\2018' '\2019' } /* “ ” ‘ ’ */
-:root:lang(en-GB), :not(:lang(en-GB)) > :lang(en-GB) { quotes: '\2018' '\2019' '\201c' '\201d' } /* ‘ ’ “ ” */
+:root:lang(en-GB), :not(:lang(en-GB)) > :lang(en-GB) { quotes: '\201c' '\201d' '\2018' '\2019' } /* “ ” ‘ ’ */
:root:lang(es), :not(:lang(es)) > :lang(es) { quotes: '\201c' '\201d' '\00ab' '\00bb' } /* “ ” « » */
:root:lang(et), :not(:lang(et)) > :lang(et) { quotes: '\201e' '\201c' '\201a' '\2018' } /* „ “ ‚ ‘ */
:root:lang(eu), :not(:lang(eu)) > :lang(eu) { quotes: '\201c' '\201d' '\00ab' '\00bb' } /* “ ” « » */
@@ -96572,14 +96676,14 @@
:root:lang(fa), :not(:lang(fa)) > :lang(fa) { quotes: '\00ab' '\00bb' '\2039' '\203a' } /* « » ‹ › */
:root:lang(ff), :not(:lang(ff)) > :lang(ff) { quotes: '\201e' '\201d' '\201a' '\2019' } /* „ ” ‚ ’ */
:root:lang(fi), :not(:lang(fi)) > :lang(fi) { quotes: '\201d' '\201d' '\2019' '\2019' } /* ” ” ’ ’ */
-:root:lang(fr), :not(:lang(fr)) > :lang(fr) { quotes: '\201c' '\201d' '\00ab' '\00bb' } /* “ ” « » */
+:root:lang(fr), :not(:lang(fr)) > :lang(fr) { quotes: '\00ab' '\00bb' '\00ab' '\00bb' } /* « » « » */
:root:lang(fr-CA), :not(:lang(fr-CA)) > :lang(fr-CA) { quotes: '\00ab' '\00bb' '\2039' '\203a' } /* « » ‹ › */
:root:lang(fr-CH), :not(:lang(fr-CH)) > :lang(fr-CH) { quotes: '\00ab' '\00bb' '\2039' '\203a' } /* « » ‹ › */
:root:lang(gsw), :not(:lang(gsw)) > :lang(gsw) { quotes: '\00ab' '\00bb' '\2039' '\203a' } /* « » ‹ › */
:root:lang(gu), :not(:lang(gu)) > :lang(gu) { quotes: '\201c' '\201d' '\2018' '\2019' } /* “ ” ‘ ’ */
:root:lang(guz), :not(:lang(guz)) > :lang(guz) { quotes: '\201c' '\201d' '\2018' '\2019' } /* “ ” ‘ ’ */
:root:lang(ha), :not(:lang(ha)) > :lang(ha) { quotes: '\201c' '\201d' '\2018' '\2019' } /* “ ” ‘ ’ */
-:root:lang(he), :not(:lang(he)) > :lang(he) { quotes: '\201c' '\201d' '\0027' '\0027' } /* “ ” ' ' */
+:root:lang(he), :not(:lang(he)) > :lang(he) { quotes: '\0022' '\0022' '\0027' '\0027' } /* " " ' ' */
:root:lang(hi), :not(:lang(hi)) > :lang(hi) { quotes: '\201c' '\201d' '\2018' '\2019' } /* “ ” ‘ ’ */
:root:lang(hr), :not(:lang(hr)) > :lang(hr) { quotes: '\201e' '\201c' '\201a' '\2018' } /* „ “ ‚ ‘ */
:root:lang(hu), :not(:lang(hu)) > :lang(hu) { quotes: '\201e' '\201d' '\00bb' '\00ab' } /* „ ” » « */
@@ -96604,11 +96708,11 @@
:root:lang(lg), :not(:lang(lg)) > :lang(lg) { quotes: '\201c' '\201d' '\2018' '\2019' } /* “ ” ‘ ’ */
:root:lang(ln), :not(:lang(ln)) > :lang(ln) { quotes: '\201c' '\201d' '\2018' '\2019' } /* “ ” ‘ ’ */
:root:lang(lo), :not(:lang(lo)) > :lang(lo) { quotes: '\201c' '\201d' '\2018' '\2019' } /* “ ” ‘ ’ */
-:root:lang(lt), :not(:lang(lt)) > :lang(lt) { quotes: '\201e' '\201c' '\201a' '\2018' } /* „ “ ‚ ‘ */
+:root:lang(lt), :not(:lang(lt)) > :lang(lt) { quotes: '\201e' '\201c' '\201e' '\201c' } /* „ “ „ “ */
:root:lang(lu), :not(:lang(lu)) > :lang(lu) { quotes: '\201c' '\201d' '\2018' '\2019' } /* “ ” ‘ ’ */
:root:lang(luo), :not(:lang(luo)) > :lang(luo) { quotes: '\201c' '\201d' '\2018' '\2019' } /* “ ” ‘ ’ */
:root:lang(luy), :not(:lang(luy)) > :lang(luy) { quotes: '\201e' '\201c' '\201a' '\2018' } /* „ “ ‚ ‘ */
-:root:lang(lv), :not(:lang(lv)) > :lang(lv) { quotes: '\00ab' '\00bb' '\201e' '\201c' } /* « » „ “ */
+:root:lang(lv), :not(:lang(lv)) > :lang(lv) { quotes: '\201c' '\201d' '\2018' '\2019' } /* “ ” ‘ ’ */
:root:lang(mas), :not(:lang(mas)) > :lang(mas) { quotes: '\201c' '\201d' '\2018' '\2019' } /* “ ” ‘ ’ */
:root:lang(mer), :not(:lang(mer)) > :lang(mer) { quotes: '\201c' '\201d' '\2018' '\2019' } /* “ ” ‘ ’ */
:root:lang(mfe), :not(:lang(mfe)) > :lang(mfe) { quotes: '\201c' '\201d' '\2018' '\2019' } /* “ ” ‘ ’ */
Modified: source
===================================================================
--- source 2012-08-02 18:03:20 UTC (rev 7224)
+++ source 2012-08-07 19:09:45 UTC (rev 7225)
@@ -25902,6 +25902,8 @@
in <var title="">input</var> (skipping past the U+002C COMMA
character (,) separating this candidate from the next).</p></li>
+ <li><p>Return to the step labeled <i>splitting loop</i>.</p></li>
+
<li><p><i>Descriptor parser</i>: Let <var title="">candidates</var>
be an initially empty ordered list of <span title="URL">URLs</span>
each with an associated pixel density, and optionally an associated
@@ -26077,33 +26079,31 @@
the viewport. <a href="#refsCSS">[CSS]</a></p></li>
<li><p>If there are any entries in <var title="">candidates</var>
- that have an associated width that is greater than <var
+ that have an associated width that is less than <var
title="">max width</var>, then remove them, unless that would
remove all the entries, in which case remove only the entries whose
- associated width is greater than the smallest such width.</p></li>
+ associated width is less than the greatest such width.</p></li>
<li><p>If there are any entries in <var title="">candidates</var>
- that have an associated height that is greater than <var
+ that have an associated height that is less than <var
title="">max height</var>, then remove them, unless that would
remove all the entries, in which case remove only the entries whose
- associated height is greater than the smallest such
- height.</p></li>
+ associated height is less than the greatest such height.</p></li>
<li><p>If there are any entries in <var title="">candidates</var>
that have an associated pixel density that is less than a
user-agent-defined value giving the nominal pixel density of the
display, then remove them, unless that would remove all the
entries, in which case remove only the entries whose associated
- pixel density is less than the greatest such pixel
- density.</p></li>
+ pixel density is less than the greatest such pixel density.</p></li>
<li><p>Remove all the entries in <var title="">candidates</var>
- that have an associated width that is less than the greatest such
- width.</p></li>
+ that have an associated width that is greater than the smallest
+ such width.</p></li>
<li><p>Remove all the entries in <var title="">candidates</var>
- that have an associated height that is less than the greatest such
- height.</p></li>
+ that have an associated height that is greater than the smallest
+ such height.</p></li>
<li><p>Remove all the entries in <var title="">candidates</var>
that have an associated pixel density that is greater than the
@@ -27591,7 +27591,121 @@
</div>
+ <h5>Adaptive images</h5>
+ <!--END dev-html--><p><i>This section is non-normative.</i></p><!--START dev-html-->
+
+ <p>CSS and media queries can be used to construct graphical page
+ layouts that adapt dynamically to the user's environment, in
+ particular to different viewport dimensions and pixel densities. For
+ content, however, CSS does not help; instead, we have the
+ <code>img</code> element's <code
+ title="attr-img-srcset">srcset</code> attribute. This section walks
+ through a sample case showing how to use this attribute.</p>
+
+ <p>Consider a situation where on wide screens (wider than 600 CSS
+ pixels) a 300×150 image named <code
+ title="">a-rectangle.png</code> is to be used, but on smaller
+ screens (600 CSS pixels and less), a smaller 100×100 image
+ called <code title="">a-square.png</code> is to be used. The markup
+ for this would look like this:</p>
+
+ <pre><figure>
+ <img src="a-rectangle.png" srcset="a-square.png 600w"
+ alt="Barney Frank wears a suit and glasses.">
+ <figcaption>Barney Frank, 2011</figcaption>
+</figure></pre>
+
+ <p class="note">For details on what to put in the <code
+ title="attr-img-alt">alt</code> attribute, see the earlier
+ sections.</p>
+
+ <p>The problem with this is that the user agent does not necessarily
+ know what dimensions to use for the image when the image is loading.
+ To avoid the layout having to be reflowed multiple times as the page
+ is loading, CSS and CSS media queries can be used to provide the
+ dimensions:</p>
+
+ <pre><figure>
+ <style scoped>
+ #a { width: 300px; height: 150px; }
+ @media all and (max-width: 600px) { #a { width: 100px; height: 100px; } }
+ </style>
+ <img src="a-rectangle.png" srcset="a-square.png 600w" id="a"
+ alt="Barney Frank wears a suit and glasses.">
+ <figcaption>Barney Frank, 2011</figcaption>
+</figure></pre>
+
+ <p>Alternatively, the <code title="attr-dim-width">width</code> and
+ <code title="attr-dim-height">height</code> attributes can be used
+ to provide the width for legacy user agents, using CSS just for the
+ user agents that support <code
+ title="attr-img-srcset">srcset</code>:</p>
+
+ <pre><figure>
+ <style scoped media="all and (max-width: 600px)">
+ #a { width: 100px; height: 100px; }
+ </style>
+ <img src="a-rectangle.png" width="300" height="100"
+ srcset="a-square.png 600w" id=a
+ alt="Barney Frank wears a suit and glasses.">
+ <figcaption>Barney Frank, 2011</figcaption>
+</figure></pre>
+
+ <hr>
+
+ <p>The <code title="attr-img-srcset">srcset</code> attribute is used
+ with the <code title="attr-img-src">src</code> attribute, which
+ gives the URL of the image to use for legacy user agents that do not
+ support the <code title="attr-img-srcset">srcset</code> attribute.
+ This leads to a question of which image to provide in the <code
+ title="attr-img-src">src</code> attribute.</p>
+
+ <p>The answer that results in the least duplication is to provide
+ the image suitable for an infinite width and infinite height
+ viewport with a pixel density of 1 CSS pixel per device pixel:</p>
+
+ <pre><img src="pear-desktop.jpeg" srcset="pear-mobile.jpeg 720w, pear-tablet.jpeg 1280w"
+ alt="The pear is juicy."></pre>
+
+ <p>However, if legacy mobile user agents are more important, one can
+ list all three images in the <code
+ title="attr-img-srcset">srcset</code> attribute, overriding the
+ <code title="attr-img-src">src</code> attribute entirely. To do
+ this, the widest image has to have the pixel density descriptor
+ instead of the width, since there is no way to specify an infinite
+ width explicitly:</p>
+
+ <pre><img src="pear-mobile.jpeg"
+ srcset="pear-mobile.jpeg 720w, pear-tablet.jpeg 1280w, pear-desktop.jpeg 1x"
+ alt="The pear is juicy."></pre>
+
+ <p>Since at this point the <code title="attr-img-src">src</code>
+ attribute is actually being ignored entirely by <code
+ title="attr-img-srcset">srcset</code>-supporting user agents, the
+ <code title="attr-img-src">src</code> attribute can default to any
+ image, including one that is neither the smallest nor biggest:</p>
+
+ <pre><img src="pear-tablet.jpeg"
+ srcset="pear-mobile.jpeg 720w, pear-tablet.jpeg 1280w, pear-desktop.jpeg 1x"
+ alt="The pear is juicy."></pre>
+
+ <hr>
+
+ <p>The dimensions in the <code title="attr-img-srcset">srcset</code>
+ attribute are the maximum (viewport) dimensions that an image is
+ intended for. It is possible to think of the numbers as minimums,
+ though... if the images are listed in order, then the minimum for an
+ image is the dimension given for the previous image. This example
+ attempts to demonstrate this by using the file names to show the
+ minimum values for each image:</p>
+
+ <pre><img src="pear-tablet.jpeg"
+ srcset="pear-min0.jpeg 720w, pear-min721.jpeg 1280w, pear-min1281.jpeg 1x"
+ alt="The pear is juicy."></pre>
+
+
+
<h4>The <dfn><code>iframe</code></dfn> element</h4>
<dl class="element">
More information about the Commit-Watchers
mailing list