@import support & Drupal 7 #107

Closed
joshmiller83 opened this Issue Feb 15, 2012 · 5 comments

Projects

None yet

4 participants

@joshmiller83

Quick Solution
If respond.js is not working on Drupal 7 or it has bugs or errors, you must use CSS aggregation for it to work in Internet Explorer 7 and 8 (IE7 & IE8).

Research on Bug
I've been creating a Drupal 7 theme that uses intializr.com's template. This includes modernizr 2.5.2 and respond.js 1.1.0 by default. But my theme in IE7 and IE8 obviously wasn't understanding any sort of media queries.

Because of the Internet Explorer 31 stylesheet limit http://support.microsoft.com/kb/262161 and Drupal's propensity to use tons of CSS files from various modules, we decided to respond to this issue only if Drupal hits the magical 31 mark and start using @import for all CSS files. You can read all evilness here: http://drupal.org/node/228818 (see page 2 for final resolution).

This potentially means any normal Drupal 7 site (there will likely be hundreds of thousands in the next few years) could be living on @import rules until they turn on the core CSS aggregator which typically reduces the CSS files into four or five <link>ed files.

After reading through the respond.js code, I can see you are literally parsing the CSS to find the media queries and then reacting by appending the right css code based on the query. Very very cool, but anyone running into the 31 stylesheet limit for older IE browsers is also likely trying to use the @import rule to get around it. Respond.js doesn't "follow" those css files and thus misses the media queries.

Resolution
So what kind of resolution do we need? I have a couple of ideas:

  1. Add a note to the homepage/download/documentation for respond.js that you do not support CSS files using @import.
  2. Make respond.js support @import rules
  3. I could find or create a Drupal module that would not @import CSS stylesheets that include media queries.

Thoughts?

@joshmiller83

Related Issues

#15
#27 (apparently the fact that you can't use @import is in the readme.txt?)
https://github.com/scottjehl/Respond <-- this limitation is listed here, half way down in the middle of "Support & Caveats"

Do you think we could bring more attention to the fact that it doesn't support @import ? Perhaps a quick

console.log("Notice: respond.js does not support @import");
@joshmiller83

And there is a Drupal module for this... And it highly recommends the fix that I detailed above as well...

http://drupal.org/project/respondjs

Josh

@designerbrent

Thanks for these pointers, Josh. Found exactly the solution to the problem I'm having...

@jefflembeck
Collaborator

As mentioned above

(apparently the fact that you can't use @import is in the readme.txt?)

Thanks!

@henrix343

//
// Implementation of HOOK_css_alter().
//
function HOOK_css_alter(&$css) {
// For each item, don't allow preprocessing to disable @import.
foreach ($css as &$item) {
if (file_exists($item['data'])) {
$item['preprocess'] = FALSE;
}
}
}

HOOk - you template name

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment