[whatwg] <imgset> responsive imgs proposition (Re: The src-N proposal)

Mon Nov 18 17:08:39 PST 2013

On Nov 18, 2013, at 2:54 PM, Tab Atkins Jr. <jackalmage at gmail.com> wrote:

> On Mon, Nov 18, 2013 at 1:35 PM, Maciej Stachowiak <mjs at apple.com> wrote:
>> I'm not enough of a CSS expert to understand the implications of that change. What would be the observable behavior changes that 'content: replaced' would produce?
>> 
>>>> - For Firefox, the 'content' property doesn't work on an element (as opposed to :before and :after)..
>>> 
>>> This is just a lack of implementation.
>>> 
>>>> I was able to get Safari and Chrome to work by getting rid of 'replaced' and specifying the images in CSS instead of using url(attr). With those changes, I noted the following possibly undesirable effects:
>>> 
>>> It didn't actually work - if you try to size the element, you'll note
>>> that the images don't care.
>> 
>> Not sure what you mean by this. Do you mean that explicitly sizing the <img> will be ignored by the replaced 'content' image? Because that does not seem to be Safari or Chrome's current behavior. In particular, this markup always gives me a 10x10 image but the contents change with the window size:
> 
> Ah, right, WK/Blink violate the spec wrt 'content' on real elements.
> They don't support the normal value set, but do support a single
> url(), which makes the element replaced.
> 
> Try it on a ::before pseudo, which implements the actual spec for 'content':
> 
> <!DOCTYPE html>
> <div></div>
> <style>
> div::before {
>  display: block;
>  width: 400px;
>  height: 100px;
>  border: thin solid;
>  content: "foo" url(http://xanthir.com/pony);
> }
> </style>
> 
> Even if you remove the "foo" string, so it's just a single image, it
> still just sits there in the pseudo-element at its normal size,
> ignoring the div::before's size entirely.
> 
> The "replaced" keyword will be a new branch in the 'content' grammar,
> which allows a single url() after it, and does what WK/Blink currently
> do.

I see. It seems like it would be simpler to just define content on a real element to have the existing WK/Blink behavior without saying "replaced". It is not obvious why ignoring the element size is a useful default behavior. But I suppose that discussion is out of scope here and would better be discussed in a CSS-relevant forum.

For the sake of curiosity: is there any reasonably accurate current draft that describes what 'content' is supposed to do on a non-pseudo element?

The most recent reference I could find is <http://www.w3.org/TR/css3-content/> but that hasn't been updated in a while. It says "If the computed value of the part of the 'content' property that ends up being used is a single URI, then the element or pseudo-element is a replaced element. The box model defines different rules for the layout of replaced elements than normal elements. Replaced elements do not have '::before' and '::after' pseudo-elements; the 'content' property in the case of replaced content replaces the entire contents of the element's box." But I can't tell if that matches what you say or is the opposite.

Regards,
Maciej