> On Nov 20, 2013, at 3:22 PM, "Tab Atkins Jr." <[email protected]> wrote: > >> On Wed, Nov 20, 2013 at 3:11 PM, Timothy Hatcher <[email protected]> wrote: >>> On Nov 20, 2013, at 2:37 PM, Markus Ernst <[email protected]> wrote: >>> Something that just came to my mind: Unlike srcset and src-N, <picture> has >>> the power to support MQs beyond viewport width: >>> >>> <picture> >>> <source media="screen" src=...> >>> <source media="print" src=...> >>> <img src=...> >>> </picture> >>> >>> The UA will have to download both sources, or printing will be delayed. Is >>> this a problem? >> >> Building on this idea: >> >> I have been thinking how the art direction use case is really limited to the >> view port matches. (I understand that is because of preloader limitations.) >> Ignoring the preloader for a minute, I can imagine other cases where art >> direction can be useful based off of arbitrary CSS selector matches. Then >> JavaScript could be in control of the source selection by setting classes — >> no JS API required. >> >> The idea would be to have named sources that can be chosen by a property in >> CSS on the picture. If the same name is used by multiple sources, the first >> source to match based on the other source attributes (media, sizes, etc.) is >> used. Sources with no name would be used as the fallback/default. >> >> This approach to script based art direction can be done today with multiple >> <img> that are hidden and shown based on the same selectors. But using >> <picture> and <source> this way should give more control over what images >> actually load and don't load (ignoring preloader). >> >> The preloader would likely skip any source with a name since we don't know >> if the source is needed yet. That could cause double loading, so an >> attribute like defer might be needed to prevent defaults from being >> preloaded. >> >> Potential syntax: >> >> <picture> >> <source name="foo" src="foo.jpg"> >> <source name="bar" srcset="bar.jpg 1x, [email protected] 2x" media="screen"> >> <source name="bar" src="bar-print.jpg" media="print"> >> <source defer src="default.jpg"> >> <img> >> </picture> >> >> CSS syntax: >> >> picture.hero { >> source: none; /* Default */ >> } >> >> body.art-directed-one picture.hero { >> source: foo; >> } >> >> body.art-direction-two picture.hero { >> source: baz; >> } >> >> or >> >> picture.hero { >> content: none; /* Default */ >> } >> >> body.art-directed-one picture.hero { >> content: replaced source(foo); >> } >> >> body.art-direction-two picture.hero { >> content: replaced source(baz); >> } >> >> (Not sure if replaced would be required there or not.) > > This sounds interesting, but it looks like something we can add to the > proposal later. Do you mind holding off on this until we get a final > decision on the base proposal? > > ~TJ
I agree. It can happen later. — Timothy Hatcher
