Blog

Internet Explorer has a 31 stylesheet limit for stylesheets that are added to pages using the link tag. Since this is such a large number this limit is usually not an issue but on more complex sites, especially Drupal sites with many enabled modules, hitting this limit is fairly easy. The consequence being that every stylesheet after the 31st will not load.

Thankfully many smart people have already tackled this issue and there are a few available solutions for Drupal 6 and a permanent fix in the core of Drupal 7.

There are two modules, IE CSS Optimizer and IE Unlimited CSS Loader, that you can drop in to resolve the issue.

There is also a way that you can resolve this issue in your theme's template.php file. The snippet posted below can be added to the YOURTHEME_preprocess_page function in your theme's template.php file. The original snippet was created by antoniodemarco and modified by ZoFreX. We have further modified it to include more comments and to only run if there are more than 29 stylesheets.

/*
 * Solve 31 CSS files limit in Internet Explorer
 * by converting link tags into @imports surrounded by style tags.
 * Only 15 @imports are included in each style tag.
 * This function will only run when there are over 29 stylesheets loaded.
 *
 * Notes: This problem can be solved by available modules but modules have the risk
 * of being overriden by other modules later in the load process. The theme layer
 * will one of the last things to have access to and alter $vars['styles']
 * 
 *
 * Original code - http://drupal.org/node/228818#comment-2609368
 * More info on IE limitation - http://support.microsoft.com/kb/262161
 */

 //Only run if Optimize CSS files is not on in /admin/settings/performance
 $preprocess_css = variable_get('preprocess_css', 0);
 if (!$preprocess_css) {

     //Get the total number of stylesheets, including those included with Conditional Styles Module
     $stylesheet_count = substr_count($vars['styles'], '<link');
     if (module_exists('conditional_styles')) {
        $stylesheet_count += substr_count($vars['conditional_styles'],0);
     }

     //Only run this function if there are over 29
     if ($stylesheet_count > 29) {
       $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>' . "\n";
         }
       }
       if ($styles) {
         //Adding styles configured with the Conditional Styles module
         $vars['styles'] = $styles . $vars['conditional_styles'];
       }
   }
 }