matchMedia.jsを改変
IE9で（ついでにIE7、IE8でも）text-shadow （jQuery移植版）のCSS自動読み込みに関連して、matchMedia()についてアレコレ調べていて遭遇したmatchMedia.js。 よく使われているらしいし、実際うちでも使うことにしたのだが、ソース見るとかなり強引なことをやっている印象なので改変してみた。
- Original
/* * matchMedia() polyfill - test whether a CSS media type or media query applies * authors: Scott Jehl, Paul Irish, Nicholas Zakas * Copyright (c) 2011 Scott, Paul and Nicholas. * Dual MIT/BSD license */ window.matchMedia = window.matchMedia || (function(doc, undefined){ var bool, docElem = doc.documentElement, refNode = docElem.firstElementChild || docElem.firstChild, // fakeBody required for <FF4 when executed in <head> fakeBody = doc.createElement('body'), div = doc.createElement('div'); div.id = 'mq-test-1'; div.style.cssText = "position:absolute;top:-100em"; fakeBody.appendChild(div); return function(q){ div.innerHTML = '­<style media="'+q+'"> #mq-test-1 { width: 42px; }</style>'; docElem.insertBefore(fakeBody, refNode); bool = div.offsetWidth == 42; docElem.removeChild(fakeBody); return { matches: bool, media: q }; }; })(document);- Revised
/* * matchMedia() polyfill - test whether a CSS media type or media query applies * authors: Scott Jehl, Paul Irish, Nicholas Zakas * Copyright (c) 2011 Scott, Paul and Nicholas. * Dual MIT/BSD license * Original Source matchMedia.js https://github.com/paulirish/matchMedia.js * Revised by Kazz http://asamuzak.jp */ window.matchMedia = window.matchMedia || (function() { return function(q) { var bool, dHead = document.getElementsByTagName('head')[0], dBody = document.getElementsByTagName('body')[0], dStyle = document.createElement('style'), dDiv = document.createElement('div'); dDiv.id = 'mq-test-1'; dDiv.style.cssText = 'margin:0;border:0;padding:0;height:0;visibility:hidden;'; dHead.appendChild(dStyle); dBody.appendChild(dDiv); dStyle.setAttribute('media', q); dStyle.innerHTML = '#' + dDiv.id + '{ width:42px; }'; bool = dDiv.offsetWidth == 42; dBody.removeChild(dDiv); dHead.removeChild(dStyle); return { matches: bool, media: q }; }; })();
ところで、オリジナル・ソースの第2引数の'undefined'って何のためにあるの?
FirefoxもSafariもChromeもすでにネイティブでmatchMediaをサポートしているので、とりあえずIE9でしか確認してないけど、引数なしで問題なく動いてるっぽいのだが…
あーっ、そいえばOperaでは検証してないや
"matchMedia.jsを改変"へのTwitter上でのコメントやRT
1件のツイートがあります。Topsyで確認する
asamuzaK.jp : matchMedia.jsを改変 http://t.co/7CCntMbW