matchMedia.jsを改変
window.matchMediaを(主にIE9にも)適用させるための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(_doc) { var cNum = (function(n) { return function() { return n++; }})(0); return function(q) { var bool, dHead = _doc.getElementsByTagName('head')[0], dBody = _doc.getElementsByTagName('body')[0], dStyle = _doc.createElement('style'), dDiv = _doc.createElement('div'), dId = cNum(); dDiv.id = 'dDiv' + dId; dId++; dDiv.style.cssText = 'margin:0;border:0;padding:0;height:0;visibility:hidden;'; dStyle.setAttribute('media', q); dStyle.appendChild(_doc.createTextNode('#' + dDiv.id + '{ width:42px; }')); dHead.appendChild(dStyle); dBody.appendChild(dDiv); bool = dDiv.offsetWidth == 42; dBody.removeChild(dDiv); dHead.removeChild(dStyle); return { matches: bool, media: q }; }; })(document);
ところで、オリジナル・ソースの第2引数の'undefined'って何のためにあるの?
FirefoxもSafariもChromeもすでにネイティブでmatchMediaをサポートしているので、とりあえずIE9でしか確認してないけど、引数なしで問題なく動いてるっぽいのだが…
"matchMedia.jsを改変"へのTwitter上でのコメントやRT
3件のツイートがあります。
ツイート 1
asamuzaK.jp : matchMedia.jsを改変 http://t.co/7CCntMbW
ツイート 2
asamuzaK.jp : matchMedia.jsを改変 http://t.co/vUXluyn4
ツイート 3
asamuzaK.jp : matchMedia.jsを改変 http://t.co/9M6d4jkD