Skip to content

Commit a329011

Browse files
scottjehlscottjehl
committed
Merge pull request paulirish#42 from weblinc/master
Complete rewrite in an effort to gain performance
2 parents 62f30a8 + b848ceb commit a329011

6 files changed

Lines changed: 861 additions & 35 deletions

File tree

‎matchMedia.js‎

Lines changed: 45 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -1,36 +1,46 @@
1-
/*! matchMedia() polyfill - Test a CSS media type/query in JS. Authors & copyright (c) 2012: Scott Jehl, Paul Irish, Nicholas Zakas. Dual MIT/BSD license */
2-
3-
window.matchMedia = window.matchMedia || (function( doc, undefined ) {
4-
5-
"use strict";
6-
7-
var bool,
8-
docElem = doc.documentElement,
9-
refNode = docElem.firstElementChild || docElem.firstChild,
10-
// fakeBody required for <FF4 when executed in <head>
11-
fakeBody = doc.createElement( "body" ),
12-
div = doc.createElement( "div" );
13-
14-
div.id = "mq-test-1";
15-
div.style.cssText = "position:absolute;top:-100em";
16-
fakeBody.style.background = "none";
17-
fakeBody.appendChild(div);
18-
19-
return function(q){
20-
21-
div.innerHTML = "&shy;<style media=\"" + q + "\"> #mq-test-1 { width: 42px; }</style>";
22-
23-
docElem.insertBefore( fakeBody, refNode );
24-
bool = div.offsetWidth === 42;
25-
docElem.removeChild( fakeBody );
26-
27-
return {
28-
matches: bool,
29-
media: q
1+
/*! matchMedia() polyfill - Test a CSS media type/query in JS. Authors & copyright (c) 2012: Scott Jehl, Paul Irish, Nicholas Zakas, David Knight. Dual MIT/BSD license */
2+
3+
window.matchMedia || (window.matchMedia = function() {
4+
"use strict";
5+
6+
// For browsers that support matchMedium api such as IE 9 and webkit
7+
var styleMedia = (window.styleMedia || window.media);
8+
9+
// For those that don't support matchMedium
10+
if (!styleMedia) {
11+
var style = document.createElement('style'),
12+
script = document.getElementsByTagName('script')[0],
13+
info = null;
14+
15+
style.type = 'text/css';
16+
style.id = 'matchmediajs-test';
17+
18+
script.parentNode.insertBefore(style, script);
19+
20+
// 'style.currentStyle' is used by IE <= 8 and 'window.getComputedStyle' for all other browsers
21+
info = ('getComputedStyle' in window) && window.getComputedStyle(style) || style.currentStyle;
22+
23+
styleMedia = {
24+
matchMedium: function(media) {
25+
var text = '@media ' + media + '{ #matchmediajs-test { width: 1px; } }';
26+
27+
// 'style.styleSheet' is used by IE <= 8 and 'style.textContent' for all other browsers
28+
if (style.styleSheet) {
29+
style.styleSheet.cssText = text;
30+
} else {
31+
style.textContent = text;
32+
}
33+
34+
// Test if media query is true or false
35+
return info.width === '1px';
36+
}
37+
};
38+
}
39+
40+
return function(media) {
41+
return {
42+
matches: styleMedia.matchMedium(media || 'all'),
43+
media: media || 'all'
44+
};
3045
};
31-
32-
};
33-
34-
}( document ));
35-
36-
46+
}());

‎test/body.html‎

Lines changed: 75 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,75 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<title>matchMedia polyfill test page</title>
5+
</head>
6+
<body>
7+
<script type="text/javascript" src="lib/JSLitmus.js"></script>
8+
<script type="text/javascript" src="../matchMedia.js"></script>
9+
<script type="text/javascript" src="../matchMedia.addListener.js"></script>
10+
<script type="text/javascript">
11+
var typeScreen = window.matchMedia('screen'),
12+
typePrint = window.matchMedia('print'),
13+
onlyAll = window.matchMedia('only all'),
14+
minWidth = window.matchMedia('(min-width: 0px)'),
15+
minWidth768 = window.matchMedia('(min-width: 768px)'),
16+
handleMinWidth768 = function(mql) {
17+
alert('Browsers that support CSS3 media queries: "(min-width: 768px)" = ' + mql.matches);
18+
};
19+
20+
// This group should be supported by everything
21+
alert('All browsers: "screen" = ' + typeScreen.matches);
22+
alert('All browsers: "print" = ' + typePrint.matches);
23+
24+
// Supports CSS3 media queries such as width/height, device-width/height, orientation but not matchMedia api
25+
// See http://caniuse.com/#search=media%20queries and http://caniuse.com/#search=matchMedia
26+
// The following browsers should return true to 'onlyAll.matches' and 'minWidth.matches'
27+
// IE 9,
28+
// Firefox 3.5 - 5.0,
29+
// Chrome 4.0 - 8.0,
30+
// Safari 4 - 5.0,
31+
// Opera 9.5 - 12.0,
32+
// iOS 3.2 - 4.3,
33+
// Android 2.1 - 2.3
34+
// Opera mini 10.0 - 12.0
35+
// Blackberry 7.0
36+
alert('Browsers that support CSS3 media queries: "only all" = ' + onlyAll.matches);
37+
alert('Browsers that support CSS3 media queries: "(min-width: 0px)" = ' + minWidth.matches);
38+
39+
// Testing addListener support
40+
minWidth768.addListener(handleMinWidth768);
41+
</script>
42+
<script type="text/javascript">
43+
// Performance test
44+
JSLitmus.test('matchMedia.js', function() {
45+
window.matchMedia('screen and (min-width: 600px) and (min-height: 400px), screen and (min-height: 400px)');
46+
});
47+
</script>
48+
49+
<form>
50+
<fieldset>
51+
<legend>
52+
Test case for IE auto closing select elements
53+
</legend>
54+
55+
<select name="demoSelect" id="demoSelect">
56+
<option value="value1" selected>Value 1</option>
57+
<option value="value2">Value 2</option>
58+
<option value="value3">Value 3</option>
59+
</select>
60+
61+
<p>
62+
Click on the select. If it auto closes in 500 milliseconds then we've failed.
63+
</p>
64+
</fieldset>
65+
</form>
66+
67+
<script type="text/javascript">
68+
document.getElementById('demoSelect').onmousedown = function() {
69+
setTimeout(function() {
70+
window.matchMedia('screen');
71+
}, 500);
72+
};
73+
</script>
74+
</body>
75+
</html>

‎test/head.html‎

Lines changed: 74 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,74 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<title>matchMedia polyfill test page</title>
5+
<script type="text/javascript" src="lib/JSLitmus.js"></script>
6+
<script type="text/javascript" src="../matchMedia.js"></script>
7+
<script type="text/javascript" src="../matchMedia.addListener.js"></script>
8+
<script type="text/javascript">
9+
var typeScreen = window.matchMedia('screen'),
10+
typePrint = window.matchMedia('print'),
11+
onlyAll = window.matchMedia('only all'),
12+
minWidth = window.matchMedia('(min-width: 0px)'),
13+
minWidth768 = window.matchMedia('(min-width: 768px)'),
14+
handleMinWidth768 = function(mql) {
15+
alert('Browsers that support CSS3 media queries: "(min-width: 768px)" = ' + mql.matches);
16+
};
17+
18+
// This group should be supported by everything
19+
alert('All browsers: "screen" = ' + typeScreen.matches);
20+
alert('All browsers: "print" = ' + typePrint.matches);
21+
22+
// Supports CSS3 media queries such as width/height, device-width/height, orientation but not matchMedia api
23+
// See http://caniuse.com/#search=media%20queries and http://caniuse.com/#search=matchMedia
24+
// The following browsers should return true to 'onlyAll.matches' and 'minWidth.matches'
25+
// IE 9,
26+
// Firefox 3.5 - 5.0,
27+
// Chrome 4.0 - 8.0,
28+
// Safari 4 - 5.0,
29+
// Opera 9.5 - 12.0,
30+
// iOS 3.2 - 4.3,
31+
// Android 2.1 - 2.3
32+
// Opera mini 10.0 - 12.0
33+
// Blackberry 7.0
34+
alert('Browsers that support CSS3 media queries: "only all" = ' + onlyAll.matches);
35+
alert('Browsers that support CSS3 media queries: "(min-width: 0px)" = ' + minWidth.matches);
36+
37+
// Testing addListener support
38+
minWidth768.addListener(handleMinWidth768);
39+
</script>
40+
<script type="text/javascript">
41+
// Performance test
42+
JSLitmus.test('matchMedia.js', function() {
43+
window.matchMedia('screen and (min-width: 600px) and (min-height: 400px), screen and (min-height: 400px)');
44+
});
45+
</script>
46+
</head>
47+
<body>
48+
<form>
49+
<fieldset>
50+
<legend>
51+
Test case for IE auto closing select elements
52+
</legend>
53+
54+
<select name="demoSelect" id="demoSelect">
55+
<option value="value1" selected>Value 1</option>
56+
<option value="value2">Value 2</option>
57+
<option value="value3">Value 3</option>
58+
</select>
59+
60+
<p>
61+
Click on the select. If it auto closes in 500 milliseconds then we've failed.
62+
</p>
63+
</fieldset>
64+
</form>
65+
66+
<script type="text/javascript">
67+
document.getElementById('demoSelect').onmousedown = function() {
68+
setTimeout(function() {
69+
window.matchMedia('screen');
70+
}, 500);
71+
};
72+
</script>
73+
</body>
74+
</html>

‎test/iframe_body.html‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<title>matchMedia polyfill test page</title>
5+
</head>
6+
<body>
7+
<iframe src="body.html"></iframe>
8+
</body>
9+
</html>

‎test/iframe_head.html‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<title>matchMedia polyfill test page</title>
5+
</head>
6+
<body>
7+
<iframe src="body.html"></iframe>
8+
</body>
9+
</html>

0 commit comments

Comments
 (0)