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

[Markus Ernst]

Am 10.11.2013 19:48 schrieb Jukka K. Korpela:
> 2013-11-10 19:36, Markus Ernst wrote:
>
>> 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.
>
> That would be my main concern, too. But I would rather say that it
> really mixes up content and presentation, moving to HTML something that
> belongs to the scope of styling and can currently be handled in CSS.

That is what I wanted to say - sorry my English is poor sometimes.

>> 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:
>
> Adding new elements is questionable, especially if they have content
> (which would be rendered as-is by current user agents).

I see. So let's use an existing, void element :-)
<meta name="situations" content="
   small: (max-width: 400px),
   medium: (max-width: 1000px)
">

>>    <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.">
>
> This, too, would mix content and presentation. Admittedly, the line
> between them isn't always crystal clear, even if most of HTML5 pretends
> that it is. But here the approach should let an author specify an img
> element in markup and separately specify, in a style sheet language,
> that in some cases the src attribute value is to be overridden.
>
> If people think that current CSS media queries are inadequate for the
> purpose (and I'm not convinced that they are), then the first question
> should be whether CSS can be suitably enhanced. Failing that, it would
> seem natural to define a new, restricted style language. Something like
> this:
>
> <style type="text/is">
> @media(max-width: 400px) { #pic { src: url(pic-small.jpg); } }
> ...
> </style>
> ...
> <img id=pic src="pic-large.jpg" alt=""
> title="Obama talking to a soldier in hospital scrubs.">

That would mean to maintain one or several style declarations per 
content image, separated in the style element; looks horrible to me.

The topic we are discussing involves both content and presentation, as 
we try to serve different content (image files) when the presentation 
changes. As an author, I'd favorite a solution that keeps the content 
section as clean, simple and intuitive as possible.

I think that my approach does provide the most simple and intuitive 
syntax for the image element, and take all the complicated stuff out 
into the head section. This may not be pure separation of content and 
presentation, but it sure goes further in that direction than the other 
approaches discussed at the time, and it makes maintaining and updating 
the content easier than other approaches.