Charles Pritchard | 1 Sep 01:46 2011

Re: add html-attribute for "responsive images"

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"/>
>
(Continue reading)

Karl Dubost | 1 Sep 02:06 2011
Picon

Re: [whatwg] add html-attribute for "responsive images"


Le 31 août 2011 à 19:46, Charles Pritchard a écrit :
> Keep in mind that min-device-pixel-ratio is also useful to monitor.
> Set image dimensions in the css style to prevent reflowing.

yep :) 
but not the issue we are dealing with right now.

--

-- 
Karl Dubost - http://dev.opera.com/
Developer Relations & Tools, Opera Software

Picon

Re: add html-attribute for "responsive images"

Am 01.09.2011 um 01:46 schrieb Charles Pritchard:

> On 8/31/2011 2:32 PM, Karl Dubost wrote:

> 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.

Why should we use inline-styles once again? Why should we load content images with CSS? What about
accessibility? Where to add alt-attribute / title / ARIA etc.?
-Anselm
Charles Pritchard | 1 Sep 17:48 2011

Re: add html-attribute for "responsive images"

On 9/1/2011 1:30 AM, Anselm Hannemann - Novolo Designagentur wrote:
> Am 01.09.2011 um 01:46 schrieb Charles Pritchard:
>
>> On 8/31/2011 2:32 PM, Karl Dubost wrote:
>
>> 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.
>
> Why should we use inline-styles once again? Why should we load content 
> images with CSS? What about accessibility? Where to add alt-attribute 
> / title / ARIA etc.?
>

They're CSS styles, I'm using inline for demonstrative purposes.
I'd load images because the CSS <image> spec is more powerful than the 
HTML image spec,
offering things like -webkit-canvas (soon -element), various background 
sizing and fitting routines.

Accessibility is maintained exactly as it was, you'd put the alt 
attribute in the image tag.

(Continue reading)

Karl Dubost | 6 Sep 07:15 2011
Picon

Re: add html-attribute for "responsive images"


Le 5 sept. 2011 à 15:07, Anselm Hannemann - Novolo Designagentur a écrit :
> Why should we use inline-styles once again? Why should we load content images with CSS? What about
accessibility? Where to add alt-attribute / title / ARIA etc.?

Not exactly what is happening.
There is a URI with an image without a javascript and/or CSS activated.
The CSS changes the image dynamically depending on the user experience context controlled by mediaqueries.

--

-- 
Karl Dubost - http://dev.opera.com/
Developer Relations & Tools, Opera Software

Ashley Sheridan | 6 Sep 08:36 2011
Picon

Re: add html-attribute for "responsive images"

On Tue, 2011-09-06 at 07:15 +0200, Karl Dubost wrote:

> Le 5 sept. 2011 à 15:07, Anselm Hannemann - Novolo Designagentur a écrit :
> > Why should we use inline-styles once again? Why should we load content images with CSS? What about
accessibility? Where to add alt-attribute / title / ARIA etc.?
> 
> Not exactly what is happening.
> There is a URI with an image without a javascript and/or CSS activated.
> The CSS changes the image dynamically depending on the user experience context controlled by mediaqueries.
> 
> 
> 

Yes, but the point is, the alternative images you may want to display
for visitors on a smaller screen/resolution could be completely
different from the original image (cropped shot not showing all the
detail, etc). Ergo, you lose the accessibility because you now can't
textually represent it in the alt tag.

--

-- 
Thanks,
Ash
http://www.ashleysheridan.co.uk

Picon

Re: add html-attribute for "responsive images"

Am 06.09.2011 um 08:36 schrieb Ashley Sheridan:

> On Tue, 2011-09-06 at 07:15 +0200, Karl Dubost wrote:
>> 
>> Le 5 sept. 2011 à 15:07, Anselm Hannemann - Novolo Designagentur a écrit :
>> > Why should we use inline-styles once again? Why should we load content images with CSS? What about
accessibility? Where to add alt-attribute / title / ARIA etc.?
>> 
>> Not exactly what is happening.
>> There is a URI with an image without a javascript and/or CSS activated.
>> The CSS changes the image dynamically depending on the user experience context controlled by mediaqueries.
> 
> Yes, but the point is, the alternative images you may want to display for visitors on a smaller
screen/resolution could be completely different from the original image (cropped shot not showing all
the detail, etc). Ergo, you lose the accessibility because you now can't textually represent it in the alt tag.

Right you hit the nail on the head. And, by the way, how should we work with your solution, Karl, and a CMS or CSS
files from a static domain? Is no one building a dynamic site?
Karl Dubost | 6 Sep 12:49 2011
Picon

Re: add html-attribute for "responsive images"

Ashley, Anselm,

Le 6 sept. 2011 à 08:36, Ashley Sheridan a écrit :
> Yes, but the point is, the alternative images you may want to display for visitors on a smaller
screen/resolution could be completely different from the original image (cropped shot not showing all
the detail, etc).

Yes already happening with background images with not text alt at all. So let's say it is progress.

Le 6 sept. 2011 à 09:07, Anselm Hannemann - Novolo Designagentur a écrit :
> by the way, how should we work with your solution, Karl, and a CMS or CSS files from a static domain? Is no one
building a dynamic site?

could you clarify?

--

-- 
Karl Dubost - http://dev.opera.com/
Developer Relations & Tools, Opera Software

Picon

Re: add html-attribute for "responsive images"

Am 06.09.2011 um 12:49 schrieb Karl Dubost:

> Ashley, Anselm,
> 
> Le 6 sept. 2011 à 08:36, Ashley Sheridan a écrit :
>> Yes, but the point is, the alternative images you may want to display for visitors on a smaller
screen/resolution could be completely different from the original image (cropped shot not showing all
the detail, etc).
> Yes already happening with background images with not text alt at all. So let's say it is progress.
> 
> Le 6 sept. 2011 à 09:07, Anselm Hannemann - Novolo Designagentur a écrit :
>> by the way, how should we work with your solution, Karl, and a CMS or CSS files from a static domain? Is no one
building a dynamic site?
> 
> could you clarify?

How exactly can I create a dynamic CMS website today with responsive images?
I could manage my CSS file with my CMS which most of them don't support. I could minify the CSS on the fly but in
reality and from performance view it's recommended to serve a static css file from a cookieless domain
(which is another than where my CMS is located). If I would use a CDN additionally how should I change images
on the fly? And, a client wants to change an image in a WSIWYG editor not in a raw css file. We won't either as he
can destroy the entire stylesheet. I hope you now understand better what I mean.

-Anselm
Bjartur Thorlacius | 7 Sep 17:12 2011
Picon

Re: add html-attribute for "responsive images"

> How exactly can I create a dynamic CMS website today with responsive images?
> I could manage my CSS file with my CMS which most of them don't support. I could minify the CSS on the fly but in
reality and from performance view it's recommended to serve a static css file from a cookieless domain
(which is another than where my CMS is located). If I would use a CDN additionally how should I change images
on the fly? And, a client wants to change an image in a WSIWYG editor not in a raw css file. We won't either as he
can destroy the entire stylesheet. I hope you now understand better what I mean.
But he won't edit "the entire stylesheet"; he'll create a new one.


Gmane