Re: The lazyload and postpone attribute for images

On Fri, 06 Sep 2013 11:16:15 +0100, Marcos Caceres <marcos@marcosc.com>  
wrote:

> Just wanted to bring your attention to some new W3C work [1] called  
> "Resource Priorities" (crappy name!), which is proposing a "lazyload"  
> and "postpone" attribute for images

I've noticed that there could be a way to reduce verbosity of picture,  
verbosity of media queries, have one central place to manage breakpoints,  
and optionally pospone loading of images until CSS is loaded, all as  
side-effect of a simple syntax: Media Query Variables.



https://github.com/ResponsiveImagesCG/picture-element/issues/64



1. You can define Media Query variables that are aliases for actual media  
queries: `@var-media name: media query;` at top of a stylesheet, e.g.

 @var-media tablet: screen and (max-device-width:768px) and  
(pointer:coarse); /* I know it's not the best definition of a tablet — you  
can invent a better one you won't need to fix it in other places :) */

2. To refer to MQ variable you use var(name), e.g. @media var(tablet) {}  
or <source media="var(tablet)">

3. var() with a name that isn't defined yet doesn't match. It will match  
as soon as it's defined, so:

<picture>
 <source media="var(tablet)" src="tap.png">
 <source media="var(not-a-tablet)" src="click.png">
</picture>

If you define tablet/desktop variables in <style> in <head>, then preload  
scanner will see them and know which one matches and load the right image  
ASAP, but if you prefer you can define those variables in an external  
stylesheet. Neither will match until CSS is loaded, so you don't have  
double-download — It'll automatically postpone as long as necessary.


-- 
regards, Kornel

Received on Thursday, 12 September 2013 23:44:20 UTC