Load Unlimited Stylesheets in IE7
- 10 Comments
- Latest Comment
What a bane of the theme developers life, IE’s inability to load more than 30 linked stylesheets. This is a huge pita and forces you to either turn off modules or manually aggregate your themes stylesheets, such as how the Genesis theme does with its option to use an “all-in-one.css” stylesheet as a workaround.
Those days may be behind us thanks to the newly released IE Unlimited CSS Loader module. Put simply, this module turns stylesheet links into @import. Some may argue this has performance implications, moreover, still others have pointed out that the modules approach may not play well with YAML or other themes that modify the CSS array.
I can see this module coming in handy during theme development.
These things said, I can see this module coming in handy during theme development. Once your done with development, switch the module off, aggregate and compress CSS and happy days.
If you can’t turn on CSS aggregation because you are using private download method, this module will provide a pretty good bridge until a real solution is implemented for Drupal core.
PHPtemplate_preprocess_page(&$please)
And what you say, you don’t want to use yet another module? No problem, the developer shows how this can be done using phptemplate_preprocess_page:
<?php
function phptemplate_preprocess_page(&$vars) {
/**
* Slove 30 CSS files limit in Internet Explorer
*/
$preprocess_css = variable_get('preprocess_css', 0);
if (!$preprocess_css) {
$styles = '';
foreach ($vars['css'] as $media => $types) {
$import = '';
$counter = 0;
foreach ($types as $files) {
foreach ($files as $css => $preprocess) {
$import .= '@import "'. base_path() . $css .'";'."\n";
$counter++;
if ($counter == 15) {
$styles .= "\n".'<style type="text/css" media="'. $media .'">'."\n". $import .'</style>';
$import = '';
$counter = 0;
}
}
}
if ($import) {
$styles .= "\n".'<style type="text/css" media="'. $media .'">'."\n". $import .'</style>';
}
}
if ($styles) {
$vars['styles'] = $styles;
}
}
}
?>Drupal Version:
Drupal Development:
Drupal:
Position:
Social Tags:
Calais Document Category:
Comments
#2 Thanks!
Thanks for highlighting this module, this is exactly what I need for a large project I’m working on. We much have about 35 stylesheets currently being loaded from CiviCRM and various modules for the site and without compressing the CSS of course IE6 and IE7 break. I love the fact that I can leave the CSS uncompressed and let this module handle loading the CSS stylesheets for IE when I’m developing. I highly recommend this module for projects with many CSS stylesheets, thanks again.
#3 hmm
Dont want to be a part pooper, but I think you’re doing something wrong if you end up with 30 stylesheets. It will make your website dead-slow. If you’re having so many stylesheets because of modules it would be better to consolidate those stylesheets into one and remove them from the modules. Better of course is to use aggregation but its not always possible.
#5 True
I hear what you’re saying, but when your are adding so many modules and each one has their own stylesheet there really aren’t many options. Of course I will disable this module and use CSS compression once the development of the site is complete but when I’m still working on building it out this is an excellent module to use.
#6 Doing something wrong if
Doing something wrong if there are more than 30 style sheets? I’m surprised that was brought up from someone who knows Drupal theming. This is the consequence of Drupal’s modular design. Have more than a handful of modules installed and you’ll hit that ceiling before you know it. I opted to force aggregation to be disabled for all theme owned styles while developing with aggregation turned on but that’s only done when peeking into IE. In all other cases, it doesn’t interfere at all. Until there’s a fool proof solution, I think I’ll stick with that.
If you have private file serving enabled, then your out of luck. In that case, I would look into using some other library out there to aggregate the files not dependent on Drupal.
As for using @import, according to that article, it seems to be too touchy to rely upon. Possible race conditions with javascript, inaccurate inclusion order and throwing a single <link ...> tag to include a style can stall all @import styles. It can easily happen if your not aware of all the issues. For theme development, the module or this preprocess alteration seems like a nice solution but the complete rearrangement of the styles I often do would make it impossible to work with.
#7 Why not use <link> instead of @import
The link tag works better across all browsers and according to this research is faster and safer to use as to avoid potential JS race conditions.
http://www.stevesouders.com/blog/2009/04/09/dont-use-import/
Yes I know that in core @import is used but I think that would be a great thing to get in place before code freeze of the 7 release.
#9 This is awesome. Thank you :)
This is awesome. Thank you :) Nothing wrong with this whatsoever. Unless you hate awesomeness.
#10 unlimited_css
drupal module fixes this
#1 Great
I need this, thanks very much for posting this so many things are buried in drupal.org and hard to find. I use Ubercart and with the other modules and my theme there are soooo many stylesheets. This works a charm!