diff --git a/ResponsiveImages.html b/ResponsiveImages.html index 3fbfa160..eed1dbd8 100644 --- a/ResponsiveImages.html +++ b/ResponsiveImages.html @@ -1,4 +1,3 @@ - @@ -66,6 +65,8 @@

Introduction

This specification describes the conformance criteria for user agents (relevant to implementors) and documents (relevant to authors and authoring tool implementors).

+

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]].

Definitions

The img element, @@ -81,9 +82,7 @@

Definitions

The image-set notation microsyntax is defined by the CSS Image Values and Replaced Content Module Level 4 Specification [[!CSS4-IMAGES]].

The techniques for providing useful text alternatives for img elements are defined by the HTML5: Techniques for providing useful text alternatives Specification [[!ALT-TECHNIQUES]].

-
+
@@ -93,35 +92,38 @@

The picture element

Flow content.
Phrasing content.
Embedded content.
-
 
+
Palpable content.
Contexts in which this element can be used:
Where embedded content is expected.
Content model:
-
Zero or more source elements
-
 
-
Zero or more img elements.
+
If the element has a src attribute:  transparent, and no source descendants.
+
If the element has no src attribute: Zero or more source elements
+ +
Zero or one img element as fallback content.
Content attributes:
Global attributes
src
width
height
crossorigin
-
 
DOM interface:
-interface HTMLPictureElement : HTMLElement {
+interface HTMLPictureElement : HTMLImageElement {
 
 };
-

The picture element represents an image.

+

The picture element used for displaying an image from a range of sources.

+

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.

+

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 picture, so that a legacy img element can be shown.

Sample picture element markup:

<picture src="cat.png">
+
 </picture>
@@ -129,8 +131,8 @@

The picture element

type = MIME type The type of the media resource (used for helping the UA determine, before fetching this media resource, if it can play it). A string that identifies a valid MIME media type.

media = valid media query The intended media type of the media resource (used for helping the UA determine, before fetching this media resource, if it is useful to the user).

srcset Media source list A comma-separated list of valid non-empty URL potentially surrounded by spaces referring to alternate media resources for a single image at different resolutions.

-

Differeces from img element

-

Unlike picture, the img 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: art direction use case)

+

Differeces from img element

+

Unlike the picture element, the img 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: art direction use case)