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
+15-13Lines changed: 15 additions & 13 deletions
Original file line number
Diff line number
Diff line change
@@ -1,4 +1,3 @@
1
-
2
1
<!DOCTYPE html>
3
2
<!-- saved from url=(0014)about:internet -->
4
3
<html>
@@ -66,6 +65,8 @@ <h1>Introduction</h1>
66
65
67
66
<sectionid="conformance">
68
67
<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>
microsyntax is defined by the<cite> CSS Image Values and Replaced Content Module Level 4 Specification</cite> [[!CSS4-IMAGES]].</p>
83
84
<p>The <dfn><ahref="http://www.w3.org/TR/html-alt-techniques/#secm1">techniques for providing useful text alternatives for <code>img</code> elements</a></dfn> are defined by the <cite>HTML5: Techniques for providing useful text alternatives</cite> Specification [[!ALT-TECHNIQUES]].</p>
84
-
<!--dt>WebIDL</dt>
85
-
<dd>Implementations that use ECMAScript to expose the APIs defined in this specification MUST implement them in a manner consistent with
86
-
the ECMAScript Bindings defined in the Web IDL specification [[!WEBIDL]].</dd--></section><!-- / dependencies -->
<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>
99
98
<dd>Where <ahref="http://dev.w3.org/html5/spec/single-page.html#embedded-content-2">embedded content</a> is expected.</dd>
<dd>Zero or more <code>source</code> elements</dd>
102
-
<dt> </dt>
103
-
<dd>Zero or more <code>img</code> elements.</dd>
100
+
<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>
102
+
103
+
<dd>Zero or one <code>img</code> element as <a>fallback content</a>.</dd>
<p>The <code><dfn>picture</dfn></code> element represents an image.</p>
120
+
<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 src attribute. <a>valid non-empty URL potentially surrounded by spaces</a> The address of the <a>media resource</a>.</p>
129
131
<p>type = MIME type The type of the <a>media resource</a> (used for helping the UA determine, before fetching this <a>media resource</a>, if it can play it). A string that identifies a valid MIME <a>media type</a>. </p>
130
132
<p>media = <a>valid media query</a> The intended media type of the <a>media resource</a> (used for helping the UA determine, before fetching this <a>media resource</a>, if it is useful to the user).</p>
131
133
<p><ahref="#srcset-attribute">srcset</a> Media source list A comma-separated list of <a>valid non-empty URL potentially surrounded by spaces</a> referring to alternate <a>media resource</a>s for a single image at different resolutions.</p>
132
-
<h3>Differeces from img element</h3>
133
-
<p>Unlike picture, the <code>img</code> element is limited to a single image resoure, but cases where an author need to define different image sources depending on the factors such as the design, size resolution, and display density. The most suitable image source may be an image sized appropriately for the display size or pixel density. Or the most suitable image source may be a different version of an image that has been modified by the author to be suitable for a particular use (see: <a>art direction</a> use case)</p>
134
+
<h3>Differeces from <code>img</code> element</h3>
135
+
<p>Unlike the <code>picture</code> element, the <code>img</code> element is limited to a single image resoure, but cases where an author need to define different image sources depending on the factors such as the design, size resolution, and display density. The most suitable image source may be an image sized appropriately for the display size or pixel density. Or the most suitable image source may be a different version of an image that has been modified by the author to be suitable for a particular use (see: <a>art direction</a> use case)</p>
0 commit comments