[whatwg] Viewing situations - Re: The src-N proposal

Sun Nov 10 09:36:04 PST 2013

Am 08.11.2013 16:47 schrieb Yoav Weiss:
> [1] http://tabatkins.github.io/specs/respimg/Overview.html

Having a look at the proposal, and reading the thread especially with 
regard to complexity and verbosity, I got the impression that @src-n 
shares a main objection with @srcset and <picture>, that it mixes up 
content and design to some extent.

Thus I suggest a modified approach which moves the distinction of 
viewing situations, or breakpoints, to the head of the document, 
creating some variable-like references to be used instead of numbers. 
Some kind of src-var instead of src-N. Therefore, a new element for the 
head would be necessary; I call it <situations>, it could also be 
<breakpoints> or whatever is considered more appropriate:

<html>
<head>
<situations>
   small: (max-width: 400px);
   small2x: (max-width: 400px) 2x;
   medium: (max-width: 1000px);
   medium2x: (max-width: 1000px) 2x;
   large2x: (min-width: 1000.01px) 2x;
</situations>
</head>
<body>
   <img src-small="pic-small.jpg"
        src-small2x="pic-medium.jpg"
        src-medium="pic-medium.jpg"
        src-medium2x="pic-large.jpg"
        src-large2x="pic-x-large.jpg"
        src="pic-large.jpg"
        alt="Obama talking to a soldier in hospital scrubs.">
</body>
</html>

The variable names are free, instead of "small", "small2x" etc. the 
author could also use "1", "2" etc. or "foo", "bar" etc. or whatever. 
Beyond that, it would work the same as src-N, using the resource in @src 
when none of the defined situations apply.

Rationale:

Moving the distinction of viewing situations to the head would have some 
advantages IMO:
- Verbosity is centralized, thus has not to be repeated in every <img> 
element
- The UA does not need to evaluate the same MQs again for every <img> in 
the content
- In order to achieve a consistent handling of "responsivity", the 
situation variables may be reused in other content elements, such as 
<video>, and also in the <link> element as an alternative to todays 
@media attribute
- Easier handling of redesigns when breakpoints change; no modifications 
needed in the page content

This proposal is not thoroughly thought-through, but I hope it shows the 
idea.

Best regards
Markus Ernst