diff --git a/index.bs b/index.bs
index 4ddc5c0b..7bc2fd79 100644
--- a/index.bs
+++ b/index.bs
@@ -724,6 +724,10 @@ Parsing a srcset Attribute
Let density be
absent.
+
+ Let future-compat-h be
+ absent.
+
For each token in descriptor
list, run the appropriate set of
@@ -753,13 +757,29 @@ Parsing a srcset Attribute
- If width and density are not both absent, then
+ If width, density and future-compat-h are not all absent, then
let error be yes.
If the token consists of a valid non-negative integer
+ followed by a "h" (U+0068 LATIN SMALL LETTER H) character
+
+
+
+
+ If future-compat-h and density are not both absent, then
+ let error be yes.
+
+
+ Apply the rules for parsing non-negative integers to the token.
+ If the result is zero, let error be yes.
+ Otherwise, let future-compat-h be the result.
+
To the extent possible under law, the editors have waived all copyright
and related or neighboring rights to this work.
-In addition, as of 13 May 2014,
+In addition, as of 21 May 2014,
the editors have made this specification available under the
Open Web Foundation Agreement Version 1.0,
which is available at http://www.openwebfoundation.org/legal/the-owf-1-0-agreements/owfa-1-0.
@@ -606,40 +606,39 @@
1
Introduction
-
This specification provides developers with a means to declare multiple versions of an image at different resolutions,
+
This specification provides developers with a means to declare multiple versions of an image at different resolutions,
and, through [MEDIAQ] (CSS Media Queries),
a means to create specialized presentations of an image and control when they are presented to a user.
This is achieved by introducing the picture element to HTML,
- and by enhancing the source element to support specifying multiple source urls.
+ and by enhancing the source element to support specifying multiple source urls.
-
By relying on [MEDIAQ], a user agent can respond to changes in the browsing environment
+
By relying on [MEDIAQ], a user agent can respond to changes in the browsing environment
by selecting the image source that most closely matches the browsing environment –
thus embodying a technique known as responsive web design directly in the HTML markup.
Media features that a user agent can potentially respond to include, but are not limited to,
pixel widths and heights,
and pixel densities,
as well as environmental lighting conditions, changes in orientation,
- and changes in media type such as going from screen to print.
+ and changes in media type such as going from screen to print.
-
The picture element remains backwards compatible with legacy user agents
+
The picture element remains backwards compatible with legacy user agents
(they will use the child img element)
- while offering the same accessibility options as the existing img element.
+ while offering the same accessibility options as the existing img element.
1.1
When to use picture
-
The picture element should be used when an image source exists in multiple densities,
- or when a responsive design dictates a somewhat different image on some types of screens (“art direction”).
+
The picture element should be used when an image source exists in multiple densities,
+ or when a responsive design dictates a somewhat different image on some types of screens (“art direction”).
-
The picture element is not a general replacement for the img element.
+
The picture element is not a general replacement for the img element.
When there is only a single image source,
authors should just use the img element as usual,
- rather than cluttering their page with additional unnecessary syntax.
+ rather than cluttering their page with additional unnecessary syntax.
1.2
@@ -655,28 +654,26 @@
-
-
In this example, the user agent will choose one of the three URLs—“pic1x.jpg”, “pic2x.jpg”, or “pic4x.jpg”—depending on whether the quality of the user’s screen
+
In this example, the user agent will choose one of the three URLs—“pic1x.jpg”, “pic2x.jpg”, or “pic4x.jpg”—depending on whether the quality of the user’s screen
and perhaps other factors,
- such as the user’s bandwidth.
+ such as the user’s bandwidth.
-
It will then load the chosen URL in the img child,
- as if it were specified in the img element’s own src attribute.
+
It will then load the chosen URL in the img child,
+ as if it were specified in the img element’s own src attribute.
-
For backwards compatibility with older user agents that don’t yet understand the picture element,
+
For backwards compatibility with older user agents that don’t yet understand the picture element,
one of the URLs is duplicated in the img element’s src attribute.
This is ignored in modern user agents,
but will result in something useful
(though perhaps lower-resolution than the user would like)
- being displayed even in older user agents.
+ being displayed even in older user agents.
-
Alternately, because this example uses only a single source element
+
Alternately, because this example uses only a single source element
and none of the more advanced attributes,
- it can be rewritten to use only img:
When doing responsive design,
@@ -694,11 +691,10 @@
-
-
In this example, depending on the user’s screen size,
+
In this example, depending on the user’s screen size,
one of the URLs will be downloaded.
For example, on a large desktop screen “large.jpg” will be displayed in the img element.
-
+
Of course, one can use both multiple source elements
@@ -711,13 +707,12 @@
-
-
In this example,
+
In this example,
the user agent first chooses which set of sources to look at,
depending on the size of the user’s screen.
Then it chooses which of the different-density sources to load,
based on information it knows about the user’s device.
-
+
If the final size of the img element isn’t known ahead of time,
@@ -728,40 +723,39 @@
1x on a larger tablet display,
and less than 1x on a large desktop monitor.
-
To help with this,
+
To help with this,
rather than specifying the densities of each image source,
the sizes of each image source can be specified directly,
along with the size of the img element.
The user agent will then automatically calculate the effective pixel density of the image
- and choose which one to download accordingly.
+ and choose which one to download accordingly.
<picture>
<source sizes="100vw" srcset="pic400.jpg 400w, pic800.jpg 800w, pic1600.jpg 1600w">
<img src="pic400.jpg" alt="The president giving an award.">
</picture>
-
-
In this example, the image source is provided at three sizes—400 pixels wide, 800 pixels wide, and 1600 pixels wide.
+
In this example, the image source is provided at three sizes—400 pixels wide, 800 pixels wide, and 1600 pixels wide.
As well, it declares that the img element is intrinsically sized to be as wide as the entire viewport.
If the user’s device is 320px wide,
this is equivalent to specifying pic400.jpg 1.25x, pic800.jpg 2.5x, pic1600.jpg 5x.
On the other hand,
if the user’s device is 1200px wide,
- this is equivalent to specifying pic400.jpg .33x, pic800.jpg .67x, pic1600.jpg 1.33x.
+ this is equivalent to specifying pic400.jpg .33x, pic800.jpg .67x, pic1600.jpg 1.33x.
-
With this information,
+
With this information,
the user agent can choose the correct image source to download
regardless of how large the user’s device is.
-
+
The previous example showed how to deal with the img element’s size being unpredictable
because it was a fraction of the viewport’s size.
Sometimes, though, the size of an image can also change based on a site’s layout breakpoints.
-
For example, say your site had three basic layouts:
+
For example, say your site had three basic layouts:
-
+
Single-column (100%) on small screens,
@@ -770,10 +764,10 @@
-
Assuming that the same image is supposed to be used at all of these layouts
+
Assuming that the same image is supposed to be used at all of these layouts
(that is, you aren’t doing art direction cropping to optimize the display of the image for a given size),
then all of these cases can be addressed by a handful of images at various sizes.
- In that case, the following code specifies the image’s display:
+ In that case, the following code specifies the image’s display:
The sizes attribute sets up the layout breakpoints at 30em and 50em,
+ and declares the image sizes between these breakpoints to be 100vw, 50vw, or calc(33vw - 100px).
-
The sizes attribute sets up the layout breakpoints at 30em and 50em,
- and declares the image sizes between these breakpoints to be 100vw, 50vw, or calc(33vw - 100px).
-
-
The six image sources provided automatically cover every reasonable possibility.
+
The six image sources provided automatically cover every reasonable possibility.
For small screens (phone size, or even smaller, like watches),
anything from the 100 pixel wide image to the 800 pixel wide image may be downloaded,
depending on screen size and density.
For medium and large screens,
anything from the 400 pixel wide image and up may be chosen.
The author doesn’t have to do any math or complex figuring,
- just provide the image in enough sizes to cover everything they believe reasonable.
+ just provide the image in enough sizes to cover everything they believe reasonable.
-
Specifying this information with multiple source elements,
+
Specifying this information with multiple source elements,
one for each of the media queries,
is possible, but much more verbose,
as the srcset attributes have to be duplicated for each of them.
-
+
This example shows how picture and other HTML elements can be used
@@ -813,8 +806,7 @@
-
+
The srcset and sizes attributes can
@@ -824,10 +816,9 @@
<img src="pic400.jpg" alt="The president giving an award." sizes="100vw"
srcset="pic400.jpg 400w, pic800.jpg 800w, pic1600.jpg 1600w">
-
-
In this example, the sizes attribute could also be removed,
+
In this example, the sizes attribute could also be removed,
since the default value is 100vw.
-
+
The type attribute can be used to serve images of
@@ -839,8 +830,7 @@
-
-
In this example, the user agent will choose the first source that has a
+
In this example, the user agent will choose the first source that has a
type attribute with a supported MIME type. If the
user agent supports WebP images, the first source element
will be chosen. If not, but the user agent does support JPEG XR images,
@@ -848,12 +838,12 @@
img element will be
chosen. Then, the user agent chooses which of the different-density
sources to load, based on information it knows about the user’s device.
-
+
1.3
Relationship to srcset
- The srcset attribute allows authors to define various
+
The srcset attribute allows authors to define various
image resources and “hints” that assist a user agent in determining
the most appropriate image source to display. Given a set of image
resources, the user agent has the option of either following or
@@ -862,7 +852,7 @@
, network connection type, user preferences, and
so on.
- The picture element defines conditions under which the
+
The picture element defines conditions under which the
user agent needs to follow the author’s explicit instructions when
selecting which resource to display. This includes image sources with
inherent sizes designed to align with layout variations specified in
@@ -872,22 +862,22 @@
art
direction) based on the client’s viewport.
-
The proposed solutions are not mutually exclusive. They work together
+
The following terms are used throughout this specification so they are
+
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.
+ specification.
-
The following terms are defined by the [HTML] specification:
+
The following terms are defined by the [HTML] specification:
skip whitespace,
collect a sequence of characters,
space character,
@@ -900,45 +890,44 @@
Zero or more source elements, followed by one img element, optionally intermixed with script-supporting elements.
Attributes:
Global attributes
-
-
The picture element is a container which provides multiples sources to its contained img element,
+
The picture element is a container which provides multiples sources to its contained img element,
allowing the displayed image to vary based on the density of the screen
- or other environmental factors expressed as media queries.
+ or other environmental factors expressed as media queries.
-
Note: picture is somewhat different from the similar-looking elements video and audio.
+
Note: picture is somewhat different from the similar-looking elements video and audio.
While all of them contain source elements,
the src attribute has no meaning when the element is nested within picture,
and the resource selection algorithm is different.
As well,
the picture element itself does not display anything;
it merely provides a context for its contained img
- that enables it to choose from multiple source urls.
+ that enables it to choose from multiple source urls.
-
A source size is a <source-size-value>.
When a source size has a unit relative to the viewport,
it must be interpreted relative to the img element’s document’s viewport.
- Other units must be interpreted the same as in media queries. [MEDIAQ]
+ Other units must be interpreted the same as in media queries. [MEDIAQ]
-
The relevant mutations for an img element are as follows:
+
The relevant mutations for an img element are as follows:
-
In the HTML spec, in the algorithm update the image data,
replace the whole step that calls "processing the image
candidates" with the following step:
@@ -993,12 +982,12 @@
selecting an image source.
-
Also in the HTML spec, in the algorithm "The user agent may at
+
Also in the HTML spec, in the algorithm "The user agent may at
any time run the following algorithm to update an
img element’s image in order to react to changes
- in the environment.", make the following changes:
+ in the environment.", make the following changes:
-
+
Remove "does not have a srcset attribute
specified,"
@@ -1015,9 +1004,9 @@
relevant mutations"
-
While at it, do the following changes elsewhere in the HTML spec:
+
While at it, do the following changes elsewhere in the HTML spec:
-
+
Replace "A user agent that obtains images
immediately must also synchronously update the
@@ -1053,8 +1042,8 @@
-
When asked to select an image source for a given img element el,
- user agents must do the following:
+
When asked to select an image source for a given img element el,
+ user agents must do the following:
@@ -1087,8 +1076,8 @@
3.1.2
Updating the Source Set
-
When asked to update the source set for a given img element el,
- user agents must do the following:
+
When asked to update the source set for a given img element el,
+ user agents must do the following:
@@ -1186,8 +1175,8 @@
3.1.3
Parsing a srcset Attribute
-
When asked to parse a srcset attribute from an element,
- parse the value of the element’s srcset attribute as follows:
+
When asked to parse a srcset attribute from an element,
+ parse the value of the element’s srcset attribute as follows:
@@ -1279,6 +1268,10 @@
density be
absent.
+
+ Let future-compat-h be
+ absent.
+
For each token in descriptor
list, run the appropriate set of
@@ -1308,13 +1301,29 @@
- If width and density are not both absent, then
+ If width, density and future-compat-h are not all absent, then
let error be yes.
If the token consists of a valid non-negative integer
+ followed by a "h" (U+0068 LATIN SMALL LETTER H) character
+
+
+
+
+ If future-compat-h and density are not both absent, then
+ let error be yes.
+
+
+ Apply the rules for parsing non-negative integers to the token.
+ If the result is zero, let error be yes.
+ Otherwise, let future-compat-h be the result.
+
+
@@ -1332,8 +1341,8 @@
candidates.
-
An image candidate string consists of the following
- components, in order:
+
An image candidate string consists of the following
+ components, in order:
@@ -1351,7 +1360,7 @@
Zero or one of the following:
-
+
A width descriptor,
consisting of: a space character,
@@ -1374,27 +1383,27 @@
When asked to parse a sizes attribute from an element,
+
When asked to parse a sizes attribute from an element,
parse a comma-separated list of component values from the value of the element’s sizes attribute
(or the empty string, if the attribute is absent),
- and let unparsed sizes list be the result.
+ and let unparsed sizes list be the result.
-
For each unparsed size in unparsed sizes list:
+
For each unparsed size in unparsed sizes list:
@@ -1428,37 +1437,36 @@
size and exit this algorithm.
-
If the above algorithm exhausts unparsed sizes list without returning a size value,
- return 100vw.
+
If the above algorithm exhausts unparsed sizes list without returning a size value,
+ return 100vw.
-
A valid source size list is a string that matches the following grammar: [CSS3VAL]
+
A valid source size list is a string that matches the following grammar: [CSS3VAL]
Note: While a valid source size list only contains a bare <source-size-value>
(without an accompanying <media-condition>)
as the last entry in the <source-size-list>,
the parsing algorithm technically allows such at any point in the list,
and will accept it immediately as the size
if the preceding entries in the list weren’t used.
This is to enable future extensions,
- and protect against simple author errors such as a final trailing comma.
+ and protect against simple author errors such as a final trailing comma.
An image source can have a density descriptor,
a width descriptor,
or no descriptor at all accompanying its URL.
- Normalizing a source set gives every image source a density descriptor.
When asked to normalize the source densities of a source setsource set,
- user agents must do the following:
+
When asked to normalize the source densities of a source setsource set,
+ user agents must do the following:
@@ -1488,20 +1496,20 @@
3.2
Interaction with the Preload Scanner
-
Some UAs utilize a “preload scanner”,
+
Some UAs utilize a “preload scanner”,
which is a simplified parser that runs ahead of the main HTML parser
during the initial load of the page,
- looking for URLs that it can begin loading as quickly as possible.
+ looking for URLs that it can begin loading as quickly as possible.
-
The definition of the picture element is compatible with a preload scanner,
- at least for some media queries.
+
The definition of the picture element is compatible with a preload scanner,
+ at least for some media queries.
-
If a UA uses a preload scanner,
+
If a UA uses a preload scanner,
it must recognize when a an img element is a child of a picture,
and use the full algorithm to select an image source to determine which URL to pre-load,
- with the following caveats:
+ with the following caveats:
-
+
The preload scanner must be able to correctly determine the truth value of
@media/width, @media/device-width, @media/height, @media/device-height, and @media/resolutionmedia features.
@@ -1518,7 +1526,7 @@
iframe based document, which has its dimensions defined in an external
style-sheet.
-
Authors should be aware of these limitations, and should follow the following best practices:
+
Authors should be aware of these limitations, and should follow the following best practices:
@viewport CSS rules should be defined inline whenever viewport dependant resources need to be fetched as part of the
@@ -1527,7 +1535,7 @@
height and width attributes) or as inline CSS rules.
The source element, if it has a picture
element as its parent, must have the
srcset attribute specified. The
value must consist of one or more image candidate strings, each
@@ -1550,46 +1557,45 @@
The source element, if it has a picture
element as its parent, may also have the
sizes attribute specified. If it is
- specified, the value must be a valid source size list.
The source element, if it has a picture
element as its parent, may also have the
media attributes specified. If it
- is specified, the value must contain a valid media query.
The type attribute, when specified
on a source element that has a picture
element as its parent, gives the type of the images in the source
set, to allow the user agent to skip to the next
- source if it does not support the given type.
If the type attribute
is not specified, the user agent will not select a different
source element if it finds that it does not support
the image format after fetching it.
-
When a source element is a child of a
picture element and has a following sibling
source element or img element with a
srcset attribute specified, it must have
@@ -1600,27 +1606,26 @@
-
- The IDL attribute currentSrc must initially be set to the value null.
+
The IDL attribute currentSrc must initially be set to the value null.
When asked to select an image source for the img element,
if the algorithm returns a selected source,
the currentSrc IDL attribute must be set to the serialization of that source’s URL;
@@ -1629,13 +1634,13 @@
Contributions also from: David Newton, Ilya Grigorik, John Schoenick and Leon de
+
Contributions also from: David Newton, Ilya Grigorik, John Schoenick and Leon de
Rijke. Special thanks to Adrian Bateman for providing the group with
- guidance.
Also in the HTML spec, in the algorithm "The user agent may at
+
Also in the HTML spec, in the algorithm "The user agent may at
any time run the following algorithm to update an
img element’s image in order to react to changes
- in the environment.", make the following changes:
+ in the environment.", make the following changes:
-
+
Remove "does not have a srcset attribute
specified,"
@@ -1763,9 +1768,9 @@
To the extent possible under law, the editors have waived all copyright
and related or neighboring rights to this work.
-In addition, as of 13 May 2014,
+In addition, as of 21 May 2014,
the editors have made this specification available under the
Open Web Foundation Agreement Version 1.0,
which is available at http://www.openwebfoundation.org/legal/the-owf-1-0-agreements/owfa-1-0.
@@ -606,40 +606,39 @@ 