You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: ResponsiveImages.html
+31-34Lines changed: 31 additions & 34 deletions
Original file line number
Diff line number
Diff line change
@@ -1,5 +1,4 @@
1
1
<!DOCTYPE html>
2
-
<!-- saved from url=(0014)about:internet -->
3
2
<html>
4
3
<head>
5
4
<title>HTML Responsive Images Extension</title>
@@ -38,6 +37,8 @@
38
37
#conformancedd {margin-bottom:1em; }
39
38
pre { tab-size:3; /* Reduce indentation. */ }
40
39
.informative-subhed { font-size:120%; }
40
+
41
+
/* WYSIWYG help, so I can see what I've linked to ... yes, I use a WYSIWYG editor... stop laughing at me :) */
41
42
a{
42
43
color: blue;
43
44
}
@@ -57,26 +58,23 @@
57
58
58
59
<sectionid="intro" class="informative">
59
60
<h1>Introduction</h1>
60
-
<p>This proposal allows content authors to provide user agents with the information they need to select the best image source.
61
-
62
-
<!-- / goals --></p>
61
+
<p>This proposal allows content authors to provide user agents with the information they need to select the best image source. </p>
63
62
</section>
64
-
<!-- / introduction -->
65
-
63
+
66
64
<sectionid="conformance">
67
65
<p>This specification describes the conformance criteria for <dfntitle="user agent">user agents</dfn> (relevant to implementors) and <dfntitle="document">documents</dfn> (relevant to authors and authoring tool implementors).</p>
68
-
<p>Implementations that use ECMAScript to expose the APIs defined in this specification MUST implement them in a manner consistent with
69
-
the ECMAScript Bindings defined in the Web IDL specification [[!WEBIDL]].</p>
70
-
<sectionid="dependencies">
66
+
<p>Implementations that use ECMAScript to expose the APIs defined in this specification MUST implement them in a manner consistent with the ECMAScript Bindings defined in the Web IDL specification [[!WEBIDL]].</p>
<p>The following terms are used throughout this specification so they are gathered here for the readers convenience. The following list of terms is not exhaustive; other terms are defined throughout this specification.</p>
71
+
<p>The follow terms are defined by the<cite></cite>[[!HTML5]] specification: <dfn><ahref="http://www.w3.org/TR/html5/the-img-element.html#the-img-element"><code>img</code> element</a></dfn>,
<dfn><ahref="http://www.w3.org/TR/html5/urls.html#valid-non-empty-url-potentially-surrounded-by-spaces">valid non-empty URL potentially surrounded by spaces</a></dfn>
78
-
and <dfn><ahref="http://www.w3.org/TR/html5/common-microsyntaxes.html#valid-media-query">valid media query</a></dfn>
79
-
are defined by the<cite></cite>[[!HTML5]] specification.</p>
77
+
and <dfn><ahref="http://www.w3.org/TR/html5/common-microsyntaxes.html#valid-media-query">valid media query</a></dfn>.</p>
80
78
<p>The term <dfn><ahref="http://tools.ietf.org/html/rfc2046#section-2">media type</a></dfn> is defined by the <cite>Multipurpose Internet Mail Extensions (MIME) Part Two: Media Types</cite> specification [[!RFC2046]].</p>
<dt><ahref="http://dev.w3.org/html5/spec/single-page.html#element-dfn-contexts" title="element-dfn-contexts">Contexts in which this element can be used</a>:</dt>
98
96
<dd>Where <ahref="http://dev.w3.org/html5/spec/single-page.html#embedded-content-2">embedded content</a> is expected.</dd>
<dd>If the element has a <ahref="http://dev.w3.org/html5/spec/single-page.html#attr-media-src">src</a> attribute: <ahref="http://dev.w3.org/html5/spec/single-page.html#transparent">transparent</a>, and no <code>source</code> descendants.</dd>
101
-
<dd>If the element has no <ahref="http://dev.w3.org/html5/spec/single-page.html#attr-media-src">src</a> attribute: Zero or more <code>source</code> elements</dd>
98
+
<dd>If the element has a src attribute: <ahref="http://dev.w3.org/html5/spec/single-page.html#transparent">transparent</a>, and no <code>source</code> descendants.</dd>
99
+
<dd>If the element has no src attribute: Zero or more <code>source</code> elements</dd>
102
100
103
101
<dd>Zero or one <code>img</code> element as <a>fallback content</a>.</dd>
<p>The <code><dfn>picture</dfn></code> element used for displaying an image from a range of sources.</p>
121
-
<p>The image given by the src attributes is the embedded content; the value of the alt attribute provides equivalent content for those who cannot process images or who have image loading disabled. </p>
122
-
<p>For user agents that don't support picture, an author can provide an img element as fallback content. User agents SHOULD NOT show this content to the user: it is intended for Web browsers which do not support <code>picture</code>, so that a legacy <code>img</code> element can be shown.</p>
<p>The <code><dfn>picture</dfn></code> element used for displaying an image that can come from a range of sources.</p>
114
+
<p>The image given by the src attributes is the embedded content; the value of the alt attribute provides equivalent content for those who cannot process images or who have image loading disabled. </p>
115
+
<p>For user agents that don't support picture, an author can provide an img element as fallback content. User agents SHOULD NOT show this content to the user: it is intended for Web browsers which do not support <code>picture</code>, so that a legacy <code>img</code> element can be shown.</p>
116
+
<p>The picture element must not be used as a layout tool. In particular, picture elements should not be used to display transparent images, as they rarely convey meaning and rarely add anything useful to the document. </p>
<p>The <dfnid="attr-picture-width"><code>width</code></dfn> attribute and the <dfnid="attr-picture-height"><code>height</code></dfn> attributes give the dimensions of the visual content of the element (the width and height respectively, relative to the nominal direction of the output medium), in CSS pixels. The expected value of the attributes is a <ahref="http://dev.w3.org/html5/spec/common-microsyntaxes.html#valid-non-negative-integer" title="valid non-negative integer">valid non-negative integer</a>.</p>
120
+
<p>The <dfnid="attr-picture-crossorigin"><code>crossorigin</code></dfn> attribute is a <ahref="http://dev.w3.org/html5/spec/single-page.html#cors-settings-attribute">CORS settings attribute</a>.</p>
<p>Images blur when the user resizes the page. Users may zoom an image in order to see more detail. In these cases, user agents could select a higher-resolution version of an image to display.</p>
290
287
<divclass="issue">It's not clear whether the picture element is prescriptive (i.e. the user agent MUST show a particular image given certain device properties) or suggestive (i.e. the user agent has control over picking the best image).</div>
<p>Web authors often want to provide different versions of the same image at different sizes depending on the viewport.</p>
289
+
<h2class="informative-subhed">Art Direction</h2>
290
+
<p>Web authors often want to provide different versions of the same image at different sizes depending on the viewport. We refer to this as the <dfn>a rt direction</dfn> use case.</p>
294
291
<p>A simple example of this would be changing the crop of an image based on display area:</p>
295
292
<ul>
296
293
<li>a website wants to normally show a large image (e.g. of a figure with a broad background) on displays that are big enough.</li>
0 commit comments