Re: responsive images

Anselm Hannemann – Novolo Designagentur <anselm@novolo.de> писал(а) в  
своём письме Sat, 28 Jan 2012 17:22:37 +0400:

> [Skipped]
>
> 3. CSS(4) solution (non-informative content)
>
> This is how a CSS(4) solution could come up with. It is needed for  
> responsive assets which are only for layout not informational content.  
> And as it’s a mess to work with media-queries on that, there came up  
> another approach from Chris Kozlowski. Here’s the proposed syntax:
> Start with a path override (i used $[path])
>
> $[myimage.jpg] {
> src-xs: min-device-width(320px) max-device-width(640px)  
> url(myimage_xs.jpg);
>
> src-m: min-device-width(640px) max-device-width(1024px)  
> url(myimage_m.jpg);
>
> src-xl: min-device-width(1024px) url(myimage_xsl.jpg);
> }
> using a technique similar to these would result in the images being  
> subject to any preexisting media queries.
> in the case that a suitable match cannot be found it would just request  
> the initial "myimage.jpg"
> HTML markup need not change just style sheet changes so image would  
> still look like:
> you wouldn't have to have to replicate all those attributes in the case  
> of you using myimage.jpg in 15 different img tags
> since it is a resource alias, it would implicitly work for background  
> images
> all paths would be relative from style sheet (as the always are)
> there's the potential to map these into javascript so you could have  
> window.resourceAliases["myimage.jpg"] yield a set of overrides that  
> could be modified (added to and removed from)

Have you seen the (Last Call) draft of CSS Image Values and Replaced  
Content Module Level 3?
http://www.w3.org/TR/2012/WD-css3-images-20120112/

I believe it already has answers to your requests, especially combined  
with Media Queries.

Received on Saturday, 28 January 2012 14:51:04 UTC