How responsive is responsive?

Hi,  
Just wondering, when it comes to specifying <picture> (assuming it is the right solution), how "responsive" do we want the <source media> attributes to be.  

Consider, when you use <source> with a video element, the first <source> that is matched is the one that is used by the browser ("for life").  

For example, in the following "movie_5.ogv" is chosen:

<video controls>
    <source media="all and (min-width: 100px)" src="http://media.w3.org/2010/05/video/movie_5.ogv">
    <source media="all and (min-width: 300px)" src="http://media.w3.org/2010/05/bunny/movie.ogv">
    <source media="all and (min-width: 600px)" src="http://media.w3.org/2010/05/video/movie_300.ogv">     
</video>  

Once the @media is matched, that is the media that is used for the life of the application (unless src is changed via script). It does not matter if the media changes after the source is set. In other words, <video> is not "responsive" in that it does not constantly respond to changes to [CSS] media queries.

When it comes to "responsive images", what should happen when the user swaps from landscape, to portrait, and back to landscape again?   

<picture>
<source  
media="screen and (orientation:portrait)"  
src="portrait.png">


<source  
media="screen and (orientation:portrait)"  
src="landscape.png">


</video>  

As I move my device from one orientation to another, does the picture's content change? Or does it behave like in video, that once the media is chosen, that's always the one that is shown?  
​

Kind regards,
Marcos   

--  
Marcos Caceres

Received on Wednesday, 3 October 2012 16:24:17 UTC