Question

I’m using adapt.js for the first time on a project. I have a range 0 to 720, I want to load a mobile.css file as well as a second css file, we’ll call it style.css. Is this possible? Are there any work arounds? I tried this but it didn’t work, as expected.

var ADAPT_CONFIG = {
    path: 'css/',

    dynamic: true,

    range: [
        '0px    to 720px  = style.css',
        '0px    to 720px  = mobile.css',
        '720px            = 720.css'
    ]
};

Answer 1

I’m afraid that this is impossible, but if you’re feeling daring you could probably modify the source of adapt.js to do this. Here’s the critical part of adapt.js:

// 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 maximum 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 maxiumum or range.
if ((!val_2 && i === last && width > val_1) || (width > val_1 && width <= val_2)) {
    // Build full URL to CSS file.
    file && (url = path + file);

    // Exit the while loop. No need to continue
    // if we've already found a matching range.
    break;
}

which is inside a while loop that checks the range conditions you specify in ADAPT_CONFIG. As you can see, once a path has been found, “range” ceases to be checked for any additional matches. You could probably change the code to allow it though – you’d probably have to move the code following the while loop into the above if statement and remove the break (this is an educated guess, I have not attempted this).

However, depending on how you’re serving the files, I would strongly consider looking into an asset manager to combine “style.css” and “mobile.css” into a single file – precompiling assets allows for a few other fun tricks, like automatically making the css files as small as possible.

EDIT – if you’re interested in an asset manager, there’s really no one way to do it; it will depend heavily on the environment you’re using at work. For something like rails this is super easy since merging files is fairly cooked in, and the sprockets gem has plenty of other features for asset management (combining files in it is pretty fast). If I were you though I’d probably just do some quick googling along the lines of “combining css files with “, there will be plenty of options. PHP scripts for this are all over the place if you don’t have a fancy framework (here’s a promising example), and Google makes an Apache mod for this kind of wok.

If you do go this route, I’d encourage you to play around a bit once you get the basics working – you could do something nifty like generate the values for range in ADAPT_CONFIG in the same place as where you combine the files, giving you a nice clean, single point from where you can manage style files.