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 = '&shy;<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でしか確認してないけど、引数なしで問題なく動いてるっぽいのだが…

そのまんまの答えを見つけた。 undefinedを引数に指定する | code up

"matchMedia.jsを改変"へのTwitter上でのコメントやRT

3件のツイートがあります。

ツイート 1

ツイート 2

ツイート 3

  • January 15, 2013 09:48:08
  • wjsnews