public
Last active

  • Download Gist
adapt.js
JavaScript
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123
/*
Adapt.js licensed under GPL and MIT.
 
Read more here: http://adapt.960.gs
*/
 
// Closure.
(function(w, d, config, undefined) {
// If no config, exit.
if (!config) {
return;
}
 
// Empty vars to use later.
var url, url_old, timer;
 
// Alias config values.
var path = config.path;
var range = config.range;
var range_len = range.length;
 
// Create empty link tag:
// <link rel="stylesheet" />
var css = d.createElement('link');
css.rel = 'stylesheet';
 
// Adapt to width.
 
 
function adapt() {
// This clearInterval is for IE.
// Really it belongs in react(),
// but doesn't do any harm here.
clearInterval(timer);
 
// Parse browser width.
var x = w.innerWidth || d.documentElement.clientWidth || d.body.clientWidth || 0;
 
// While loop vars.
var arr, arr_0, val_1, val_2, is_range, file;
 
// How many ranges?
var i = range_len;
var last = range_len - 1;
 
while (i--) {
// Turn string into array.
arr = range[i].split('=');
 
// Width is to the left of "=".
arr_0 = arr[0];
 
// File name is to the right of "=".
// Presuppoes a file with no spaces.
file = arr[1].replace(/\s/g, '');
 
// Assume min/max if "to" isn't present.
is_range = arr_0.match('to');
 
// If it's a range, split left/right sides of "to",
// and then convert each one into numerical values.
// If it's not a range, turn min/max into a number.
val_1 = is_range ? parseInt(arr_0.split('to')[0], 10) : parseInt(arr_0, 10);
val_2 = is_range ? parseInt(arr_0.split('to')[1], 10) : undefined;
 
// Check for: minimum, maxiumum, range.
if ((!val_2 && i === 0 && x <= val_1) || (!val_2 && range_len > 1 && i === last && x > val_1) || (x > val_1 && x <= val_2)) {
// Built full URL to CSS file.
url = path + file;
break;
} else {
// Blank if no conditions met.
url = '';
}
}
 
// Was it created yet?
if (url_old && url_old !== url) {
// If so, just set the URL.
css.href = url;
url_old = url;
} else {
// If not, set URL and append to DOM.
css.href = url;
url_old = url;
// Use faster document.head if possible.
(d.head || d.getElementsByTagName('head')[0]).appendChild(css);
}
}
 
// Fire off once.
adapt();
 
// Slight delay.
 
 
function react() {
// Clear interval as window resize fires,
// so that it only calls adapt() when the
// user has finished resizing the window.
clearInterval(timer);
timer = setInterval(adapt, 100);
}
 
// Do we want to watch for
// resize and device tilt?
if (config.dynamic) {
// Event listener for window resize,
// also triggered by phone rotation.
if (w.addEventListener) {
// Good browsers.
w.addEventListener('resize', react, false);
} else if (w.attachEvent) {
// Legacy IE support.
w.attachEvent('onresize', react);
} else {
// Old-school fallback.
w.onresize = react;
}
}
 
// Pass in window, document, config, undefined.
})(this, this.document, ADAPT_CONFIG);

Instead of loading specific CSS files, I would go for adding a specific class to the <html> tag:

<html class="w_800">

You could also do that.

The benefit here is that you're not sending down any CSS that isn't absolutely needed. To attempt to load faster on mobile. With what you're proposing, you'd send down CSS for all possible scenarios, and then scope it via class-based descendent selectors.

I think this would work nicely. I'd like to see server-side CSS merging & compression lend a hand, were this a living site. Where the JS builds a call for a CSS assets, it could get back a single reply. Perhaps something like getMergedMediaFriendlyCSS.js?480,800,homepage where 400 & 800 would be media-query wrapped CSS and homepage could be page-specific rules? Of course, caching would be weird. But it could alleviate the need to watch for a resize event.

I suppose the decision-maker is how much CSS lives within each media-query block. If it's just a few lines, that's negligible. If it's a bunch of stuff targeting a specific device group—like major header/footer changes—that's where this makes sense.

Tiff: Yeah, that'd be cool. I was thinking the site-wide styles: typography, colors, branding, etc. could live in a minified / concatenated file, and then the conditionally loaded CSS would be a minified grid / layout only.

For the recently redesigned Today.com, we had a similar mix of sitewide & grid-based CSS though ultimately some business decisions came down that gutted our best media-query-based ideas (ads, of course). What we ended up with is a backup media-query solution, where modern browsers get the media-query-wrapped ruleset but <=IE8 gets an extra copy via conditional comments. Same rules twice, which sucks given the number of rules. (<=IE8 also gets an IE-hack CSS file that's large anyway, so the pain was already present.)

I wish media-queries had an optional pass-through for browsers that don't understand them.

Tiff: Me too. I was surprised to find that all the CSS files on this page get downloaded, even by modern browsers...

http://j.mp/g4trwR

Here's another thought: What about inserting the media attribute conditions on the link tags via JS? Doesn't solve the downloaded-resource issue but it would add fall-back behavior for older browsers?

Tiff: I'm not sure I follow. Could you make a gist so I can better understand what you mean?

Okay, built and tested my version: https://gist.github.com/907079

Or http://www.beermestrength.com/media_query_test.html (try it in a modern browser & IE8, for comparison)

The goal was to add media-query logic after older browsers download the CSS assets. This dosen't make a lot of sense for your Grid example, but could if the media-query logic was an additive effect.

Tiff: I was thinking of something like this...

<script
  src="assets/js/adapt.js"
  data-path="assets/css/"
  data-min="480=480.css"
  data-range="480-960=800.css"
  data-range="960-1280=960.css"
  data-range="1280-1600=1280.css"
  data-max="1600=1280.css"
></script>

Then the JS could parse all the values off its own

Gotcha. I usually hesitate to have anything watching document resize/scroll events. Hence trying out my little model, since media-queries serve that purpose. But that has little to do with your solution, more me exploring whether browsers observe JS-inserted media attributes. Which they do, so that's cool (and I have some clean-up to do).

I like the implications of your data-* attributes on that script tag. I wonder if something like this would work, given those args:

<script src="assets/js-adapt.js" data-path="assets/css/" data-range="{"480":"480.css","480-960":"800.css","960-1280":"960.css","1280-1600":"1280.css","1600":"1280.css"}"></script> or another JS object structure to collect the ranges.

Tiff:

Good call. Less attribute retrieval, and can immediately be turned into a JS object. Think on this further, I will. #Yoda

May I suggest using document.head when it’s available? It’s as simple as changing line 43 into:

(d.head || d.getElementsByTagName('head')[0]).appendChild(css);

Typo: the example in the comment on line 9 should read id="ADAPT_CSS" instead of id="adaptive_css".

@mathiasbynens

Changing line 43, as you suggested, would cause it not to work in browsers that understand document.head. A browser that understands document.head would never evaluate past the "or" conditional "||".

d.head || d.getElementsByTagName('head')[0].appendChild(css);

Instead, it would need to be...

d.head ? d.head.appendChild(css) : d.getElementsByTagName('head')[0].appendChild(css);

But that's extra code, when I'm only ever referencing <head> once. I agree that making a shortcut to it, as that article suggests, is a good idea if you're going to be using that convention repeatedly throughout your code. But for this one-liner, I don't think it really matters, because I would still have to add the lengthy selector for old browsers. By doing it only via getElementsByTagName, it works everywhere, and is less code overall.

Sorry, I made a mistake in my last comment. I’ve edited it now, but here is the proper solution again:

(d.head || d.getElementsByTagName('head')[0]).appendChild(css);

And yeah, it’s like 10 more bytes, but IMHO the speed gain in modern browsers is worth it.

@mathiasbynens

Boom, updated! :)

I thought I would note that I made this its own project:

http://adapt.960.gs

I'll leave this gist here for posterity, but won't be updating it any more.

Please sign in to comment on this gist.

Something went wrong with that request. Please try again.