big refactor to incorporate nicholas's technique.

paulirish · Apr 1, 2011 · 50c64c8 · 50c64c8
1 parent cc40a9b
commit 50c64c8
Showing 1 changed file with 24 additions and 33 deletions.
diff --git a/matchMedia.js b/matchMedia.js
@@ -1,6 +1,6 @@
 /*
 * matchMedia() polyfill - test whether a CSS media type or media query applies
-* authors: Scott Jehl, Paul Irish
+* authors: Scott Jehl, Paul Irish, Nicholas Zakas
 * Copyright (c) 2010 Filament Group, Inc
 * MIT license
 
@@ -10,42 +10,33 @@
 * To check media type, just do: matchMedia('tv')
 */
 
-if (!window.matchMedia){
+
+window.matchMedia = window.matchMedia || (function(doc, undefined){
 
-  window.matchMedia = (function(doc, undefined){
+  var bool,
-
+      docElem  = doc.documentElement,
-    var bool,
+      refNode  = docElem.firstElementChild || docElem.firstChild,
-        docElem = doc.documentElement,
+      // fakeBody required for <FF4 when executed in <head>
-        fakeBody = doc.createElement('body'),
+      fakeBody = doc.createElement('body'),
-        testDiv = doc.createElement('div');
+      div      = doc.createElement('div');
+
+  div.id = 'mq-test-1';
+  div.style.cssText = "position:absolute;top:-100em";
+  fakeBody.appendChild(div);
+
+  return function(q){
 
-    testDiv.setAttribute('id','ejs-qtest');
+    div.innerHTML = '_<style media="'+q+'"> #mq-test-1 { width: 42px; }</style>';
-    fakeBody.appendChild(testDiv);
 
-    return function(q){
+    docElem.insertBefore(fakeBody, refNode);
-
+    div.removeChild(div.firstChild);
-        var styleBlock = doc.createElement('style'),
+    bool = div.offsetWidth == 42;  
-            cssrule = '@media '+q+' { #ejs-qtest { position: absolute; } }';
+    docElem.removeChild(fakeBody);
-
-        styleBlock.type = "text/css";	//must set type for IE!	
-        if (styleBlock.styleSheet){ 
-          styleBlock.styleSheet.cssText = cssrule;
-        } 
-        else {
-          styleBlock.appendChild(doc.createTextNode(cssrule));
-        } 
-        docElem.insertBefore(fakeBody, docElem.firstChild);
-        docElem.insertBefore(styleBlock, docElem.firstChild);
-        bool = ((window.getComputedStyle ? window.getComputedStyle(testDiv,null) : testDiv.currentStyle)['position'] == 'absolute');
-        docElem.removeChild(fakeBody);
-        docElem.removeChild(styleBlock);
-
-        return { matches: bool, media: q };
-    };
 
-  })(document);
+    return { matches: bool, media: q };
-
+  };
-}
+
+})(document);