Your SlideShare is downloading. ×
0
How to matchMedia
How to matchMedia
How to matchMedia
How to matchMedia
How to matchMedia
How to matchMedia
How to matchMedia
How to matchMedia
How to matchMedia
How to matchMedia
How to matchMedia
How to matchMedia
How to matchMedia
How to matchMedia
How to matchMedia
How to matchMedia
How to matchMedia
How to matchMedia
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

How to matchMedia

910

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: …

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
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

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

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. matchMedia What is it? What you could do with it Quirks Browser support
  • 2. matchMedia is a method for testing css media queries in javascript
  • 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. Why would I use matchMedia? Trigger or remove functionality at breakpoints such as navigation, dialogs, images or use your imagination.
  • 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. 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. 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. 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. Browser quirks: OSX Chrome 27 and Firefox 22
  • 10. Incorrect property name matchMedia('(minwidth: 1800px)'); Chrome { matches: false, media: "not all" } Firefox { matches: false, media: "not all" }
  • 11. Missing leading '(' matchMedia('width: 1800px)'); Chrome { matches: false, media: "invalid" } Firefox { matches: false, media: "not all" }
  • 12. Missing '()' matchMedia('width: 1800px'); Chrome { matches: false, media: "invalid" } Firefox { matches: false, media: "not all" }
  • 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. 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. 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. 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. 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. 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

×