- From: Charles Pritchard <chuck@jumis.com>
- Date: Wed, 31 Aug 2011 16:46:57 -0700
- To: Karl Dubost <karld@opera.com>
- CC: "www-style@w3.org Style" <www-style@w3.org>, Anselm Hannemann - Novolo Designagentur <anselm@novolo.de>, WHATWG List <whatwg@whatwg.org>
On 8/31/2011 2:32 PM, Karl Dubost wrote:
> Anselm,
> (setting reply-to on www-style)
>
> Seen this today, to remind people that it is not just
> something up in the air. People need it.
> http://www.webmonkey.com/2011/08/speed-up-your-responsive-designs-with-adaptive-images/
>
> I wonder if it could be handled by CSS in fact.
> I guess Anselm, you could ask there.
> On the www-style mailing-list, Charles proposed [1]
>
> content: url(img.jpg) replaced;
Oh, that's not my proposal, that syntax was brought up by Tab Atkins.
It's already available. I was looking into how to handle <img [no
source] style="background: url(..)" />
It may work with the following, now, or at some point in the future:
<img style="content: replaced; background-color: ...;" />
I'd proposed visibility: content-hidden; to be used with background and
border.
> I'm not sure I fully understand the proposal
> but we can imagine something that could fit nicely
> with the CSS Generated Content Module Level 3 [2]
>
> <img class="responsive" src="http://example.org/foo" alt="wiizz"/>
>
> and then the CSS
>
>
> @media screen and (min-width:550px) and (max-width:960px) {
> img.responsive {
> url(http://example.org/foobis) replaced;}
> }
> @media screen and (min-width:240px) and (max-width:549px) {
> img.responsive {
> url(http://example.org/footer) replaced;}
> }
>
>
> [1]: http://www.w3.org/mid/4E5D4A46.7000103@jumis.com
> [2]: http://dev.w3.org/csswg/css3-content/#replacedContent
Keep in mind that min-device-pixel-ratio is also useful to monitor.
Set image dimensions in the css style to prevent reflowing.
Received on Wednesday, 31 August 2011 23:47:30 UTC