- From: Kornel Lesiński <kornel@geekhood.net>
- Date: Mon, 16 Sep 2013 01:36:37 +0100
- To: "www-style list" <www-style@w3.org>
On Mon, 16 Sep 2013 00:59:44 +0100, Tab Atkins Jr. <jackalmage@gmail.com> wrote: >> Media query variables don't require browser to block. They're basically >> event-based. >> >> You can parse <style> asynchronously, and trigger <picture> source >> selection >> algorithm (asynchronously as well) at any time when you encounter MQ >> variable definition. > > No, you really can't. > > Obviously, multiple sources can match at any given time. Because of > this, you'll have some way of choosing between multiple valid sources. > This method is almost certainly not stable to additions - adding more > choices might mean that it's the new option that gets chosen. That's good. I'd like <picture> to be able to change selected source at any time, and not be frozen forever with choice that preload scanner had to make. It's not like the fragile algorithm in <video> which has to make the right choice on the first try. The source selection algorithm I'm proposing can be re-run at any time (https://github.com/ResponsiveImagesCG/picture-element/issues/62#issuecomment-24479164) <picture> is supposed to be *responsive*. If you have: <picture> <source media="screen and (max-width:300px)"...> <source media="screen and (max-width:500px)"...> <source...> </picture> it is supposed to switch sources as you resize the window. It's supposed to be roughly equivalent to: <img id=1..> <img id=2..> <img id=3..> <style> @media screen and (max-width:300px) { #2,#3 {display:none} } @media screen and (max-width:500px) and (min-width:301px) { #1,#3 {display:none} } @media screen and (min-width:501px) { #1,#2 {display:none} } and yes, it means that in some cases user may cause all 3 images to be loaded. That's fine, because these 3 images may have different sizes, different content (it's for art-direction case) and layout of the page (which does react to the same media queries) may depend on it. That's supposed to be responsive layout with responsive images. I think it would be awful misfeature if media queries in <picture> worked once and only once, while media queries in CSS could update dynamically. > A custom MQ is, at first, an invalid MQ, which doesn't match. As you > parse in definitions, some of them become valid, which means that the > set of valid sources might grow. This means that the "best" choice > might change as parsing happens. Yes, that's the point. When UA discovers that choice might change it's supposed to schedule re-running of source selection algorithm on the next tick. What I've defined is: - If possible, make the choice immediately. - If not possible to make the choice yet, wait until external CSS is loaded (first rendering starts) and then make choice with whatever data is available. - Update the choice at any time when conditions change, even if it means downloading and displaying a different image. The algorithm I'm proposing doesn't even delay <picture> that has unknown MQ in option that definitely won't be chosen, e.g. <picture> <source media="max-device-width:1000px" ...> <source media="var(unknown)"> </picture> won't wait for the variable on on devices with <1000px screens, since source selection algorithm won't reach delay logic. -- regards, Kornel
Received on Monday, 16 September 2013 00:37:13 UTC