Comments on: Use CSS transitions to link Media Queries and JavaScript

By: lucky

lucky — Fri, 07 Sep 2012 05:17:21 +0000

Hi, I tried the sample given above and its really helpful.
Good to see this blog and the solution it provides for mediaquery and js handshake…

But I have one concern, when I try this on iPad, I find there is some delay before executing the function.
And delay is much more than 0.001ms (which is required for transition to complete.)
Is anyone else also seeing similar issue…

Please let me know if this is expected behaviour

By: Israelito

Israelito — Fri, 16 Mar 2012 22:35:30 +0000

sorry, did not read the last paragraph. Somehow it works in IE tedious?

By: Israelito

Israelito — Fri, 16 Mar 2012 22:32:03 +0000

I tried the demo, but apparently does not work in IE 8

By: Paul Hayes

Paul Hayes — Sat, 28 Jan 2012 14:19:45 +0000

@stephband: That assumes the media queries are mutually exclusive.

By: stephband

stephband — Fri, 27 Jan 2012 10:48:03 +0000

Of course, I left out the transitions in the example above, to keep it clear.

By: stephband

stephband — Fri, 27 Jan 2012 10:46:18 +0000

If you use CSS’s ‘content’ property, you only need to test one element, rather than one element per media query. Something like this:

@media all and (min-width: 42em) {
#mq {
content: ‘min-width: 42em’
}
}

@media all and (min-width: 60em) {
#mq {
content: ‘min-width: 60em’
}
}

You’ll find that all browsers can read the content property, even if it is not displayed on screen.

By: Brekk

Brekk — Tue, 20 Dec 2011 15:42:31 +0000

Wow! That’s really exciting — it offers a wealth of possibilities in the supported browsers. Thanks for posting.

By: Stefan

Stefan — Thu, 01 Dec 2011 12:50:24 +0000

I’m finding your blog post really hard to read as the font is so thin it doesn’t display very well. And the comments section is even more complicated as its light grey on black which offers no contrast.

Sorry to be a pain, but your putting up barriers to the content.

By: Marc Finnern

Marc Finnern — Thu, 01 Dec 2011 10:09:33 +0000

Nice Work!

By: Geert-Jan

Geert-Jan — Thu, 17 Nov 2011 16:12:35 +0000

@Dennis: it’s indeed needed for resize and resize alone. Also think of an iPhone user rotating his device from portrait to landscape, etc.

I think it’s great to have this last part of the circle almost complete.

By: Horia Dragomir

Horia Dragomir — Thu, 17 Nov 2011 14:32:19 +0000

I think this is great!

Also you can easily use this to determine other aspects of the current navigator, like devicePixelRatio.

It may also solve some viewport problems on handhelds.

By: Simon

Simon — Thu, 17 Nov 2011 14:13:44 +0000

I don’t agree with Dennis and think this codes are useful for sure and worth checking out.

Thanks for sharing!

To reply to Dennis;
It’s not only for the user’s expectation, but to optimize both the User Experience and screen / space usage.

By: Dennis

Dennis — Tue, 08 Nov 2011 12:58:15 +0000

I don’t see the point to trigger event on mediaqueries browser change. Isn’t matchMedia enough to specify different js behaviour from mediaqueries ?

Not sure if users often (not saying never) resize their browser and expect for change in interface.

But maybe i miss something from mistranslation so i’ll be glad to hear your thoughts on this.