Improve 960gs adaptive CSS

Question

Im using 960gs adaptive CSS in all the pages of my site. I have the script below in all the pages:

<script>
var ADAPT_CONFIG = {
  path: '/css/960gs/',
  dynamic: true,
  range: [
    '0px    to 760px  = mobile.min.css',
    '760px  to 980px  = 720.min.css',
    '980px  to 1280px = 960.min.css',
    '1280px to 1600px = 1200.min.css',
  ]
};
</script>
<script src="/js/adapt.min.js" type="text/javascript"></script>

My problem is that when a user go to another page, the selection of appropriate stylesheet is visible to the user specially when using Mozilla Firefox. What I mean is that at first, the layout takes all the screen and in less than a second, the lay-out changed to the appropriate one. I don't know how to describe this thing. But what I want is to improve it's performance in loading the appropriate stylesheet.

Thanks

score 1 · Accepted Answer · answered Jun 15 '12 at 07:56

On the 960.gs site it states

"A potential drawback of Adapt.js is the possibility of a brief flash of unstyled content as a new stylesheet is being fetched (think of it as “Ajax” for CSS). I have done my best to mitigate this by keeping CSS files small (3 KB). It is worth noting this is a proposed, not prescribed, approach to a problem with multiple solutions"

So this is a known issue. I have to say I'm not a big fan of doing this with javascript, CSS is perfectly capable of handling different resolutions. If you have your basic CSS and add some separate properties for handling different resolutions as follows:

@media only screen and (min-width: 980px) and (max-width: 1280px) { <<<CSS Here>>> }
@media only screen and (min-width: 760px) and (max-width: 980px) { <<<CSS Here>>> }
@media only screen and (max-width: 767px) { <<CSS for mobile portrait>> }
@media only screen and (min-width: 480px) and (max-width: 767px) { <<CSS for Mobile landscape>> }

Improve 960gs adaptive CSS

1 Answers1