Skip to content
Browse files

This commit adds support for media queries set via media attributes o…

…n the link element. Currently, media attribute-based queries will be ignored if the linked stylesheet contains inline media queries (which will work as usual), so this patch is incomplete, but it does allow you to use one mechanism or the other.
  • Loading branch information...
1 parent a9994e3 commit 2ee25b3c5aefbd75c70f8fe7f6ae4555a298bc1d scottjehl committed Apr 10, 2011
Showing with 70 additions and 15 deletions.
  1. +55 −14 respond.src.js
  2. +5 −0 test/test.css
  3. +2 −1 test/test.html
  4. +8 −0 test/test2.css
View
69 respond.src.js
@@ -27,49 +27,89 @@
resizeThrottle = 30,
head = doc.getElementsByTagName( "head" )[0] || docElem,
links = head.getElementsByTagName( "link" ),
+ requestQueue = [],
//loop stylesheets, send text content to translate
ripCSS = function(){
- var sheets = doc.styleSheets,
- sl = sheets.length;
+ var sheets = links,
+ sl = sheets.length;
for( var i = 0; i < sl; i++ ){
var sheet = sheets[ i ],
- href = sheet.href;
+ href = sheet.href,
+ media = sheet.media;
//only links plz and prevent re-parsing
if( !!href && !parsedSheets[ href ] ){
if( !/^([a-zA-Z]+?:(\/\/)?(www\.)?)/.test( href )
|| href.replace( RegExp.$1, "" ).split( "/" )[0] === win.location.host ){
- var fullhref = href;
- ajax( href, function( styles ){
- translate( styles, fullhref );
- parsedSheets[ fullhref ] = true;
+ requestQueue.push( {
+ href: href,
+ media: media
} );
}
else{
parsedSheets[ href ] = true;
}
}
- }
+ }
+ makeRequests();
+
+ },
+
+ //recurse through request queue, get css text
+ makeRequests = function(){
+ if( requestQueue.length ){
+ var thisRequest = requestQueue.shift();
+
+ ajax( thisRequest.href, function( styles ){
+ translate( styles, thisRequest.href, thisRequest.media );
+ parsedSheets[ thisRequest.href ] = true;
+ makeRequests();
+ } );
+ }
},
+
//find media blocks in css text, convert to style blocks
- translate = function( styles, href ){
+ translate = function( styles, href, media ){
var qs = styles.match( /@media ([^\{]+)\{([\S\s]+?)(?=\}\/\*\/mediaquery\*\/)/gmi ),
ql = qs && qs.length || 0,
//try to get CSS path
- href = href.substring( 0, href.lastIndexOf( "/" ));
+ href = href.substring( 0, href.lastIndexOf( "/" )),
+ repUrls = function( css ){
+ return css.replace( /(url\()['"]?([^\/\)'"][^:\)'"]+)['"]?(\))/g, "$1" + href + "$2$3" );
+ },
+ useMedia = !ql && media;
//if path exists, tack on trailing slash
if( href.length ){ href += "/"; }
+ //if no internal queries exist, but media attr does, use that
+ //note: this currently lacks support for situations where a media attr is specified on a link AND
+ //its associated stylesheet has internal CSS media queries.
+ //In those cases, the media attribute will currently be ignored.
+ if( useMedia ){
+ ql = 1;
+ }
+
+
for( var i = 0; i < ql; i++ ){
- var fullq = qs[ i ].match( /@media ([^\{]+)\{([\S\s]+?)$/ ) && RegExp.$1,
- eachq = fullq.split( "," ),
+ var fullq;
+
+ //media attr
+ if( useMedia ){
+ fullq = media;
+ rules.push( repUrls( styles ) );
+ }
+ //parse for styles
+ else{
+ fullq = qs[ i ].match( /@media ([^\{]+)\{([\S\s]+?)$/ ) && RegExp.$1;
+ rules.push( RegExp.$2 && repUrls( RegExp.$2 ) );
+ }
+
+ var eachq = fullq.split( "," ),
eql = eachq.length;
- rules.push( RegExp.$2 && RegExp.$2.replace( /(url\()['"]?([^\/\)'"][^:\)'"]+)['"]?(\))/g, "$1" + href + "$2$3" ) );
-
for( var j = 0; j < eql; j++ ){
var thisq = eachq[ j ];
mediastyles.push( {
@@ -80,6 +120,7 @@
} );
}
}
+
applyMedia();
},
View
5 test/test.css
@@ -22,6 +22,11 @@ a {
color: #333;
}
+/* hide the attribute-test element. test2.css will show it */
+#attribute-test {
+ display: none;
+}
+
/*styles for 480px and up!*/
@media only screen and (min-width: 480px), only screen and (max-width: 620px) {
body {
View
3 test/test.html
@@ -4,6 +4,7 @@
<meta charset="utf-8" />
<title>Respond JS Test Page</title>
<link href="test.css" rel="stylesheet"/>
+ <link href="test2.css" media="screen and (min-width: 600px)" rel="stylesheet"/>
<script src="../respond.src.js"></script>
</head>
<body>
@@ -13,7 +14,7 @@
<p>For a realistic use case for media queries: read up on <a href="http://www.alistapart.com/articles/responsive-web-design/">Responsive Web Design</a></p>
-
+ <p id="attribute-test">Media-attributes are working too! This should be visible above 600px.</p>
</body>
</html>
View
8 test/test2.css
@@ -0,0 +1,8 @@
+/* this stylesheet was referenced via a link that had a media attr defined
+it should only apply on screen > 600px */
+#attribute-test {
+ display: block;
+ color: #fff;
+ background: black;
+ text-align: center;
+}

0 comments on commit 2ee25b3

Please sign in to comment.
Something went wrong with that request. Please try again.