Dear WHATWG,
Scrap the srcset attribute.
Traditionally in HTML, and in every instance of XML I have personally
worked with, an element's attribute is a key=value pair.
Okay the type attribute for source node in audio and video, sometimes it
has codecs specified there too - but that's the only example I can think
of, and even there, it is rarely actually used. Usually it is just
simply used as a key=value pair with the mime type, even by me and I
know how to specify the codec.
But srcset is a multi-level array. The first array is a , delimited
string - and each element between the commas is itself a space delimited
array.
When has that kind of attribute ever been previously used in HTML ??
I suppose the type attribute with audio and video where you can
optionally specify codec, but that's all I can think of, and there it
isn't multi-dimensional.
srcset is a mistake. A mistake that will result in errors on the web
because it is much more difficult to understand than the traditional
key=value pair that is traditional in HTML and XML.
key='multi level array of values' is just plain conceptually wrong.
-=-
Secondly, you are doing the source child of the picture element wrong.
Who the hell am I to tell you that you are doing it wrong?
I'm a user that thinks what you currently have is over-complicated and
ridiculous.
When in the history of HTML has an element's legal attributes been
dependant upon what the parent element is?
I can't think of a case until the picture element.
The picture element should have the source element as a child, and this
is how it should be done:
[picture]
[source src="ImageHD.webp" type="image/webp" media="(min-width:
1024px)" /]
[source src="ImageHD.jpg" type="image/jpeg" media="(min-width:
1024px)" /]
[source src="ImageHD.webp" type="image/webp" media="(min-width:
800px)" res="2x" /]
[source src="ImageHD.jpg" type="image/jpeg" media="(min-width:
800px)" res="2x" /]
[source src="Image.webp" type="image/webp" media="(min-width:
800px)" /]
[source src="Image.jpg type="image/jpg" media="(min-width:
800px)" /]
[source src="Image.webp" type="image/webp" res="2x" /]
[source src="Image.jpg" type="image/jpg" res="2x" /]
[source src="ImageMobile.webp" type="image/webp" /]
[source src="ImageMobile.jpg" type="image/jpg" /]
[img src="Image.jpg" alt="[cow patty in field]" /]
[/picture]
The client selects the first image where it matches all type, media
query, and resolution attributes that are specified.
Notice that it keeps the simple to understand key=value pair for the
attributes, and it keeps compatability with source tag as it has already
been used with audio and video for years now.
