Giters

nathansmith / adapt

Adapt.js serves CSS based on screen width.

Home Page:http://adapt.960.gs

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Remove all-or-nothing requirement tied to 'path' property

opened this issue · comments

commented

First, let me say "great work!" Lately I've spent a great deal of time exploring adaptive/responsive design and, although I appreciate that no one solution is perfect, I like what adapt.js brings to the table.

I do have a couple of feature requests, which I'll split into two issues. The first addresses the all-or-nothing requirement for using callbacks/stylesheets; specifically, you can't just trigger a callback on one range and load a stylesheet on another. A combination may be desirable (as it was for me) when style inheritance creates issues. In my case, for mobile devices I need to set width:auto !important; to override values set inline. I can't simply create a generic rule in my default (mobile) stylesheet because that can only be overridden be specifying a new rule in a child stylesheet, when what I want is to use the styles set inline (effectively "undoing" the rule rather than overriding it).

(The inline values weren't my idea, by the way. I'm just stuck with them.)

How this would work:

In my default stylesheet (styles.min.css), I've specified #mobile .col1 { width:auto !important; }.

MY <head>:

<link rel="stylesheet" href="css/styles.min.css" />
<script>
  var ADAPT_CONFIG = {
    path: 'css/',
    dynamic: true,
    callback: layout,
    range: [
      '0  to 760',
      '760 to 980 = 720.min.css',
      '980 = 980.min.css'
    ]
  };
  function layout(i, width) {
    if (i === 0) {
      document.documentElement.id = 'mobile';
    }
  }
</script>
<script src="js/adapt.min.js"></script>

Obviously what will happen here is an extra <link> tag will be written out with "0" as the file, causing 404 warnings. Of course I could just create a separate stylesheet with one rule - and I certainly will if you disagree that flexibility here is needed.

I'm not sure it's the best way, but I've gotten this working pretty easily by modifying adapt.js as below. It essentially removes the requirement to specify 'path' and instead checks for a file.

Check if file is not a number (line 76):

  url = '';
  // Check for maxiumum or range.
  if ((!val_2 && i === last && width > val_1) || (width > val_1 && width <= val_2)) {
    // Built full URL to CSS file.
    if (isNaN(file)) {
      url = path + file;
    }
    break;
  }

Check url instead of path (line 98):

  // Add the CSS, only if url is not empty.
  // Use faster document.head if possible.
  url && (d.head || d.getElementsByTagName('head')[0]).appendChild(css);

Of course your experienced eye may find I've missed something.

Thanks -

commented

I'm still mulling over whether to solve for this (kind of an edge case), when the solution is as easy as simply having a mobile stylesheet.

By the way, for your inline styles, check out this function I wrote awhile back, which kills all presentational HTML attributes:

https://gist.github.com/262366

commented

Hm. If you look at it that way, I can see how it may not seem worth tackling.

However, the way I see it, the limitation seems unnecessary given that removing it won't likely change your byte count much. Unless I am missing some other reason for taking this approach?

Also, checking path instead of file and url leaves more room for error -- again, unnecessarily. When path exists, a link tag will print in any case, and the browser error may not be immediately obvious. A simple check for a period "." would reduce the chance of error. If it fails, do nothing (or trigger a callback if one exists).

Having said that, is solving an edge case worthwhile if the solution is simple? I say yes! :) But that's just me.

Thanks for looking at this -
Lara

commented

Alright, tweaked the code a bit to allow for callbacks to fire with/without a file being specified.

Fixed in this commit...

28bc395#assets/js/adapt.js

I'm still adding a <link/> if path exists, since I'm assuming at least one of the ranges will have a file.

But now with no file specified, instead of getting the index as it's URL (not sure why I was assigning file as i), it will get href="", which won't throw a 404 error.

commented

Hey, great. It's a good tweak. Works like a charm.

<link/> .. will get href=""

Makes sense. Nice approach.

I've bookmarked your remove_style() function. I'm sure it'll come in handy.

Cheers -