How to React to Changing Environments Using matchMedia
I was at my parents place over Christmas. Besides eating the whole day and playing board games I tried to read two books I brought with me.
One of the books was RESPONSIBLE RESPONSIVE DESIGN by Scott Jehl. It was released recently and it is a really good read. I have not finished it yet, but I enjoy it and it is for sure in the TOP5 list of my favourite books about responsive web design.
In the world of responsive web design we deal with media queries all the time to give our visitors the best experience possible depending on the their devices and environments. Usually this means that web developers deal with screen dimensions inside of media queries and this is becoming crazier and more useful every day.
Media queries are mostly used inside of the CSS files to adapt the styling to the particular device the visitor is using. This makes total sense, but responsive web design should not be only about “making it look pretty”.
It should also be about only using and initializing needed components.
The only thing that always bothered me about the implementations in famous frameworks like Bootstrap and Foundation is that the scripts and modules used for smaller devices are also executed on larger devices and vice versa.
No matter if the modules and their functionality are needed or not, the given code is executed and all event handlers are still bound. These event handlers will not be triggered in a lot of cases, because the given DOM elements connected to the functionality are hidden via CSS in several environment combinations.
There is a lot of discussion regarding what to serve to a customer in terms of feature detection and custom builds, but not every project has enough time and resources to implement complicated build systems.
This is why I started to initialize given modules only when needed. A custom build of Modernizr is usually included in my projects so that the handy
Modernizr.mq function is largely used to not initialize things that are not needed at all.
1 2 3 4 5 6
Modernizr.mq – how does it work?
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29
As we see internally Modernizr uses the
matchMedia function ( when available ), which is defined in the spec for the CSSOM View Module. If
matchMedia is not supported it provides a shim to achieve the same functionality.
window.matchMedia – so what?
Modernizr.mq already gives us support to get information on whether the given media query is matching or not. One key thing to watch out here is, that
matchMedia does not return a boolean value to work with – instead it returns a MediaQueryList Interface.
The information if the media query matches is stored inside of the property
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17
I already read a lot of articles about
matchMedia, but I did not know before that it provides more than just the
MediaQueryList Interface also provides the ability to attach listeners to the moment whenever the media query changes from matching to not matching or the other way around.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32
This is exactly what I was looking for a while, it gives an easy way to enhance an interface on changing environments on the fly and save resources from the beginning.
If you want to play around with it I created a pen for you to play around with.
And this is it for today – I hope you enjoyed the short read. Any ideas and comments are more than welcome. :)