diff --git a/ResponsiveImages.html b/ResponsiveImages.html index eed1dbd8..1362f25f 100644 --- a/ResponsiveImages.html +++ b/ResponsiveImages.html @@ -1,5 +1,4 @@ - HTML Responsive Images Extension @@ -38,6 +37,8 @@ #conformance dd {margin-bottom: 1em; } pre { tab-size: 3; /* Reduce indentation. */ } .informative-subhed { font-size: 120%; } + + /* WYSIWYG help, so I can see what I've linked to ... yes, I use a WYSIWYG editor... stop laughing at me :) */ a{ color: blue; } @@ -57,26 +58,23 @@

Introduction

-

This proposal allows content authors to provide user agents with the information they need to select the best image source. - -

+

This proposal allows content authors to provide user agents with the information they need to select the best image source.

- - +

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

-
+

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, - source element, - media resource, +

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.

+

The follow terms are defined by the [[!HTML5]] specification: img element, + source element, + media resource, resource selection algorithm, fallback content, valid non-empty URL potentially surrounded by spaces - and valid media query - are defined by the [[!HTML5]] specification.

+ and valid media query.

The term media type is defined by the Multipurpose Internet Mail Extensions (MIME) Part Two: Media Types specification [[!RFC2046]].

The image-set notation @@ -97,34 +95,33 @@

The picture element

Contexts in which this element can be used:
Where embedded content is expected.
Content model:
-
If the element has a src attribute:  transparent, and no source descendants.
-
If the element has no src attribute: Zero or more source 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
+
height
crossorigin
-
DOM interface:
-
- 
-interface HTMLPictureElement : HTMLImageElement {
-
-};
-
+
Uses HTMLElement.
-

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">
+	
+    
The picture element used for displaying an image that can come 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.

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

+  
The src attribute...

+    
+    
The width attribute and the height 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 valid non-negative integer.

+  
The crossorigin  attribute is a CORS settings attribute.

+    
+    
Sample picture element markup:

 
-</picture>
+
<picture src="cat.png"></picture>

The src attribute. valid non-empty URL potentially surrounded by spaces The address of the media resource.

@@ -289,8 +286,8 @@

User Zoom

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.

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

Art Direction

-

Web authors often want to provide different versions of the same image at different sizes depending on the viewport.

+

Art Direction

+

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 a rt direction use case.

A simple example of this would be changing the crop of an image based on display area:

  • a website wants to normally show a large image (e.g. of a figure with a broad background) on displays that are big enough.