Delay before correct style applied

denisjacquemin commented 12 years ago

Hi Ben,

I did a design with 4 breakpoints, very clean solution thanks

but... I have an issue...

The (correct) style needs to wait for the breakpoint class to be added to html element, the default style is applied the time it takes for the js to be loaded

It result with an annoying switch between what I call the default style and the correct one.

By default style I mean the one applied if there is no breakpoint class in the html element.

benschwarz commented 12 years ago

How / where is metaquery included in your HTML? Have you considered adding the most common breakpoint to the HTML node for the init phase?

Can you supply your markup here?

Cheers,

Ben On Aug 16, 2012 11:28 PM, "Denis Jacquemin" notifications@github.com wrote:

Hi Ben,

I did a design with 4 breakpoints, very clean solution thanks

but... I have an issue...

The (correct) style needs to wait for the breakpoint class to be added to html element, the default style is applied the time it takes for the js to be loaded

It result with an annoying switch between what I call the default style and the correct one.

By default style I mean the one applied if there is no breakpoint class in the html element.

— Reply to this email directly or view it on GitHubhttps://github.com/benschwarz/metaquery/issues/6.

denisjacquemin commented 12 years ago

yes I can add a default breakpoint in the HTML node, but no real most common, still annoying

here is the markup http://wort-responsive.herokuapp.com (tablet not yet implemented)

All js files are included at the end of the markup, I'll try to move them in the HEAD node and see if it change something

benschwarz commented 12 years ago

Great stuff, will check it out... Metaquery (and the match media poly fill) should both be fine in the head of your document On Aug 17, 2012 12:13 AM, "Denis Jacquemin" notifications@github.com wrote:

yes I can add a default breakpoint in the HTML node, but no real most common, still annoying

here is the markup http://wort-responsive.herokuapp.com (tablet not yet implemented)

All js files are included at the end of the markup, I'll try to move them in the HEAD node and see if it change something

— Reply to this email directly or view it on GitHubhttps://github.com/benschwarz/metaquery/issues/6#issuecomment-7786532.

benschwarz commented 12 years ago

Denis, that wort redesign is looking really great. Are you happier with the performance now that you've moved the script to head?

On 17/08/2012, at 12:13 AM, Denis Jacquemin notifications@github.com wrote:

yes I can add a default breakpoint in the HTML node, but no real most common, still annoying

here is the markup http://wort-responsive.herokuapp.com (tablet not yet implemented)

All js files are included at the end of the markup, I'll try to move them in the HEAD node and see if it change something

— Reply to this email directly or view it on GitHub.

denisjacquemin commented 12 years ago

looks better, I still need to do more test on monday, I'll let you know

thanks again for your awesome work

denisjacquemin commented 12 years ago

logically, the issue remains on a slower desktop

I will get back to 'traditional' media queries, not too bad because I use sass and I can avoid duplication by using variables (http://thesassway.com/intermediate/responsive-web-design-in-sass-using-media-queries-in-sass-32)

benschwarz commented 12 years ago

I referenced that technique in the readme, which I also use myself. To be honest, I primarily write metaquery for responsive images, the classes were a bit of a 'value add' kind of feature…

I'll have a bit of a think to see if I can make metaquery faster to execute…

denisjacquemin commented 12 years ago

Here is some thoughts about my experience with metaquery

I will get back to use traditional media queries to avoid the issue described above.
for the IMG tag, maybe avoid to write SRC attribute in the markup, this is the job of the js to write it, this to avoid loading irrelevant default image
the use of metaQuery.bind looks fine, need more experience with it to be honnest
with SASS and @import instruction I can go further, I'll try to generate a stylesheet by breakpoint, the goal is to avoid useless styles (ie: loading desktop style on a phone), a js handler should observe the resize event to load a new stylesheet if the viewport is resized. The generation of each stylesheet can be achieved by using @import instruction (for SASS), write your styles once but generate multiple stylesheets

benschwarz / metaquery

Delay before correct style applied #6