How to matchMedia

1,143
-1

Published on

This is a short presentation created for an internal front-end development team @weblinc. The goal was to generate interest and knowledge about matchMedia and its usage. Presentation links: http://www.w3.org/TR/css3-mediaqueries/, http://davidwalsh.name/function-debounce, http://www.w3.org/TR/css3-mediaqueries/#syntax, http://dev.w3.org/csswg/cssom/#serializing-media-queries, http://caniuse.com/css-mediaqueries, http://caniuse.com/matchmedia, https://hacks.mozilla.org/2012/06/using-window-matchmedia-to-do-media-queries-in-javascript/, https://github.com/weblinc/media-match, https://github.com/paulirish/matchMedia.js/

Published in: Technology, News & Politics
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,143
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
0
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

How to matchMedia

  1. 1. matchMedia What is it? What you could do with it Quirks Browser support
  2. 2. matchMedia is a method for testing css media queries in javascript
  3. 3. @media screen and (min-width: 500px) { ... } CSS snippet: matchMedia('screen and (min-width: 500px)'); Javascript snippet: <link media="screen and (min-width: 500px)" href="project.css" rel="stylesheet" />
  4. 4. Why would I use matchMedia? Trigger or remove functionality at breakpoints such as navigation, dialogs, images or use your imagination.
  5. 5. Anatomy of a MediaQueryList object var mql = matchMedia('screen and (min-width: 500px)'); mql has the following properties: matches : <Boolean getter> media : <String> addListener : <Function> removeListener : <Function>
  6. 6. MediaQueryList + addListener var mql = matchMedia('screen and (min-width: 500px)'), handleMediaQuery = function(mql) { if (mql.matches) { // Media query matches } else { // Media query does not match anymore } }; mql.addListener(handleMediaQuery);
  7. 7. What triggers a MediaQueryList listener width: width, min-width, max-width height: height, min-height, max-height device-width: device-width, min-device-width, max-device-width device-height: device-height, min-device-height, max-device-height aspect-ratio: aspect-ratio, min-aspect-ratio, max-aspect-ratio device-aspect-ratio: device-aspect-ratio, min-device-aspect-ratio, max-device-aspect-ratio orientation: orientation resolution: resolution, min-resolution, max-resolution device-pixel-ratio: device-pixel-ratio, min-device-pixel-ratio, max-device-pixel-ratio http://www.w3.org/TR/css3-mediaqueries/
  8. 8. Alternative to addListener var mql = matchMedia('screen and (min-width: 500px)'), update = function() { // Debounced function, see slide links if (mql.matches) { // Media query matches } else { // Media query does not match anymore } }; window.addEventListener('resize', update, false); http://davidwalsh.name/function-debounce
  9. 9. Browser quirks: OSX Chrome 27 and Firefox 22
  10. 10. Incorrect property name matchMedia('(minwidth: 1800px)'); Chrome { matches: false, media: "not all" } Firefox { matches: false, media: "not all" }
  11. 11. Missing leading '(' matchMedia('width: 1800px)'); Chrome { matches: false, media: "invalid" } Firefox { matches: false, media: "not all" }
  12. 12. Missing '()' matchMedia('width: 1800px'); Chrome { matches: false, media: "invalid" } Firefox { matches: false, media: "not all" }
  13. 13. No spaces. Spec indicates spaces are not required... matchMedia('(min-width:0px)and(max-width:1800px)'); Chrome { matches: true, media: "(max-width: 1800px) and (min-width: 0px)" } Firefox { matches: false, media: "not all" } http://www.w3.org/TR/css3-mediaqueries/#syntax
  14. 14. One space only matchMedia('(min-width:0px)and (max-width:1800px)'); Chrome { matches: true, media: "(max-width: 1800px) and (min-width: 0px)" } Firefox { matches: true, media: "(min-width: 0px) and (max-width: 1800px)" }
  15. 15. Notice how the properties are sorted matchMedia('(min-width: 0px) and (max-width: 1800px)'); Chrome { matches: true, media: "(max-width: 1800px) and (min-width: 0px)" } Firefox { matches: true, media: "(min-width: 0px) and (max-width: 1800px)" } http://dev.w3.org/csswg/cssom/#serializing-media-queries
  16. 16. What support do we have for matchMedia? ü  Android stock browser * ü  Chrome 9+ ü  Chrome beta on Android * ü  Firefox 6+ ü  Firefox mobile ü  IE 10+ ü  Safari 5.1+ * ü  Safari 5 on iOS * http://caniuse.com/css-mediaqueries http://caniuse.com/matchmedia https://hacks.mozilla.org/2012/06/using-window-matchmedia-to-do-media-queries-in-javascript/ * Note: doesn’t support addListener
  17. 17. What do we do for the rest? Maybe nothing. Depends what you expect matchMedia to do. Polyfills: A polyfill is code that provides functionality that is not native to the browser. https://github.com/weblinc/media-match https://github.com/paulirish/matchMedia.js/ If matchMedia is required, what can I do?
  18. 18. http://www.w3.org/TR/css3-mediaqueries/ http://davidwalsh.name/function-debounce http://www.w3.org/TR/css3-mediaqueries/#syntax http://dev.w3.org/csswg/cssom/#serializing-media-queries http://caniuse.com/css-mediaqueries http://caniuse.com/matchmedia https://hacks.mozilla.org/2012/06/using-window-matchmedia-to-do-media-queries-in-javascript/ https://github.com/weblinc/media-match https://github.com/paulirish/matchMedia.js/ Presentation links

×