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

[FOUSHEE, SEAN]

I'm late to this discussion so pardon me if this has already been discussed, by using the same logic as the <srclist> why not just create <figlist> to go along with the <figure> element?

Sean Fousheé
Instructor, Graphic Communications
Tarrant County College, NE Campus
828 Harwood Rd.
Hurst, TX 76054
(817) 515.6596
sean.foushee at tccd.edu<mailto:sean.foushee at tccd.edu>




On Feb 8, 2012, at 7:38 AM, David Goss wrote:

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?