From 5f4445f38c1561ded190dd984873b45acad098df Mon Sep 17 00:00:00 2001 From: Marcos Caceres Date: Wed, 19 Sep 2012 19:54:52 +0100 Subject: [PATCH] Removed a bunch of redundant text --- ResponsiveImages.html | 76 ++++++++++++++----------------------------- 1 file changed, 24 insertions(+), 52 deletions(-) diff --git a/ResponsiveImages.html b/ResponsiveImages.html index 1362f25f..53fbfe79 100644 --- a/ResponsiveImages.html +++ b/ResponsiveImages.html @@ -49,18 +49,13 @@

Through the introduction of a picture element, this specification adds functionality to HTML that allows authors to list a range of images which may be suitable for a range of device capabilities and different usage scenarios. The ability to adapt content to the constraints and capabilities of devices and different usage scenarios is commonly referred to as "responsive design". - This allows user agents to be more responsive to a wide spectrum of browsing scenarios, ranging from simple mobile devices to desktop browsers scenarios, when selecting which image resources to download and display for an end-user. This includes, but is not limited to, the selection of images best suited for either high or low density displays and screen resolutions on range of devices, are well as responsive selection of images based on printer's dpi and color reproduction capabilities.

+ This allows user agents to be more responsive to a wide spectrum of browsing scenarios, ranging from simple mobile devices to desktop browsers scenarios, when selecting which image resources to download and display for an end-user. This includes, but is not limited to, the selection of images most suited for either high or low density displays and screen resolutions on range of devices, are well as responsive selection of images based on printer's dpi and color reproduction capabilities.

This document was proposed by the Responsive Images Community Group as a solution to bug 18384.

-
-

Introduction

-

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

@@ -95,67 +90,45 @@

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 zere decendents, then transparent.
+ +
One or more source elements.
+
Zero or one img element as fallback content.
Content attributes:
Global attributes
-
 
-
width
-
height
-
crossorigin
+
DOM interface:
-
Uses HTMLElement.
+
Uses HTMLElement (this will change as we start working on events!).
-

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:

+

The picture element used for displaying an image that can come from a range of sources. Which image the user agent displays depends on [forthcoming algorithm].

+

For user agents that don't support the picture element, an author can provide an img element as fallback content. User agents SHOULD NOT show this content to the user: it is intended for legacy user agents that do not support picture, so that a legacy img element can be shown instead.

+

Authoring requirement: 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.

+

Sample picture element markup:

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

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

-

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

+

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

+

It is also not possible to assign a source directly to a picture element. For that case, use an img element.

-

Source element

-

The source element is a child of the picture element and extends the existing source element. Each source defines one or more image data sources and the conditions under which that source should be utilized.

-

A document SHOULD only contain source elements need to epresent the same subject matter, while cropping and zooming may differ.

+ +

When used with the picture element, a document SHOULD only contain source elements need to represent the same subject matter, while cropping and zooming can differ.

It should be codified that this is not a mechanism by which to swap disparate images depending on screen size. See: https://www.w3.org/Bugs/Public/show_bug.cgi?id=18384#c7
-

Source element permitted attributes

-

global attributes & src & srcset & type & media

- - -
- -
-

The srcset attribute

-

The srcset attribute is 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.

-

The value of the srcset attribute is the image-set notation micosyntax.

+

The srcset attribute

+

The srcset attribute of the source element is 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.

+

The value of the srcset attribute use the image-set notation micosyntax.

@@ -227,9 +200,8 @@

Goals

  • Don't repeat yourself: If the same image is used multiple times on a single page, it would be useful to define the resource selection in a single place in the document and have this affect all instances of the image
    • -

    Use Cases

    -

    What use cases does this support?

    -

    There are many use cases that are supported as listed below. There are two primary use cases.

    +

    Use Cases

    +

    There are many use cases that are supported as listed below. There are two primary use cases:

    1. The need for different image sources at different viewport sizes in responsive web designs.
    2. The need for different image sources depending on the pixel density of the display.