On 8.2.2012 10:59, Anselm Hannemann - Novolo Designagentur wrote:
Hi,
I think that while talking about responsive image, introducing element that
would choose image based on media-query, we should explore more generic
approach... any media
<media media="all">
<video media="support: video">
<source src="blabla.ogg" type="video/ogg" media="min-resolution: 300dpi" />
<source src="blabla_small.ogg" type="video/ogg" media="max-resolution: 150dpi"
/>
<source src="blabla.mp4" type="video/mp4" media="min-resolution: 300dpi" />
<source src="blabla_small.mp4" type="video/mp4" media="max-resolution: 150dpi"
/>
</video>
<picture>
<src href="small.jpg" alt="a headshot of Bob Flemming"media="min-width:320"
/>
<src href="medium.jpg" alt="a head and shoulders shot of Bob Flemming"
media="min-width:480" />
<src href="large.jpg" alt="a full body portrait of Bob Flemming"
media="min-width:640" />
</picture>
<img src="blabla.png" alt="blabla" />
</media>
I can imagine e.g. car presentation using this approach, with preferences based
on tree position of media content.
BTW adding media attribute to video (video -> source) element might be useful
as well... type tells a lot, but not all regarding responsive media content
Why do we actually need this new wrapper element? I don't see any reason for
this.
How else would you know what the alternatives are? Imagine previous
example without the media envelope? how would you know that img is
ultimate fallback and picture should be taken into consideration only if
not video? Without the envelope, the only way to process that would be
to display all 3 media (video and 2 images)
And what should support: media be? A new media query? Then this is up to CSS.
And as far as I understood you correct you want the video to those who support
video (btw which device wouldn't as it's only about the tag, not the feature
itself?)
We already have media queries which do not describe capabilities of
media but state of media (width, height, orientation), one might be on
low level bandwidth or costly bandwidth, or less capable device... I can
imagine settings in UA that would turn off certain browser capabilities
based on users choice.
and a fallback responsive image?
Sorry, I do not understand this question.
Brona