[whatwg] add html-attribute for "responsive images"

On 8 February 2012 10:23:02 +0000,  Benjamin Hawkes-Lewis wrote:
> Another option to containment would be referencing: add a @srclist
> attribute on "img" that points to a <srclist> container of "src"
> elements.
>
> Compare @list and @datalist:
>
> ? ?http://www.whatwg.org/specs/web-apps/current-work/multipage/common-input-element-attributes.html#attr-input-list
>
> ? ?http://www.whatwg.org/specs/web-apps/current-work/multipage/the-button-element.html#the-datalist-element

Oh, interesting.

So this:

<picture alt="alternative text" src="default.jpg">
 <source href="medium.jpg" media="min-width:400px" />
 <source href="large.jpg" media="min-width:700px" />
 <img alt="alternative text" src="default.jpg" />
</picture>

Becomes this:

<img alt="alternative text" src="default.jpg" list="myimage" />
<srclist id="myimage">
 <source href="medium.jpg" media="min-width:400px" />
 <source href="large.jpg" media="min-width:700px" />
</srclist>

In supprting browsers, the src attribute on the <img> is used unless
it has a list attribute which refers to a valid srclist with one or
more media matched source elements, in which case the last matched one
of those is used. Unsupporting browsers render the <img> as is and
ignore the <srclist>.

Pros: nice clean markup, gets rid of that duplication of attributes
between <img> and <picture> that I dislike. Also gets away from the
awkward problem of having to think of a decent name for the new
element (any situation where there are two different elements for
images is going to confuse new authors).

Con: you need a unique id attribute for the srclist of every adaptive
image on your page. Bit of a headache for authors, although I suppose
any use case with a large number of adaptive images on one page is
going to be server-generated rather than hand-authored, so the logic
can be modified to add ids easily enough.

Thoughts anyone?

Received on Wednesday, 8 February 2012 05:38:10 UTC