HowTo include an IE Conditional Comments stylesheet

[joelfarris]

(This thread is a continuation of http://www.zen-cart.com/forum/showthread.php?p=294562 and attempts to improve upon that glorious snippet of code.)

I'm posting a new thread on the topic of IE Conditional Comments because the best one I've found so far (cited above) was in the wrong category for my needs, and an exhaustive search of the forums failed to turn up anything brand new on the subject. Apologies if I've chosen the wrong category to post in. It's my first time here! :=)

I'm working on my first ever ZenCart install, version 1.3.7, and I am needing to serve a stylesheet to all browsers that are less that IE 7. I need this to control the horribly huge font size that IE 6 and below thinks is "medium". All other browsers can use "medium" as whatever the user has chosen for their preferred font size, but not IE. Hence the exploration of the insanely great module called Internet Explorer Stylesheet Overrides and how it might be able to do even more for us. Here's what I want:

Duncanad and Kuroi's module is simple. It calls stylesheets from your /includes/templates/CUSTOM_TEMPLATE_NAME/css/ folder, and it does so using a single snippet of php. You just paste this code into your /includes/templates/CUSTOM_TEMPLATE_NAME/common/html_header.php file right below the section that calls all the regular stylesheets. (The comment says "load all template-specific stylesheets, named like "style*.css", alphabetically")

/**
 * IE Conditional Comments
 * Load all template-specific stylesheets for IE in alphabetical order, but AFTER 
 * the main stylesheets have been called, thus overriding them in the cascade.
 * Naming convention for stylesheet files is as follows:
 * "ie_stylesheet.css" targets all versions of IE
 * "ie7_stylesheet.css" only targets IE 7
 * "ie6_stylesheet.css" will only affect IE 6
 * "ie5.5_stylesheet.css" will only affect IE 5.5
 */
  $directory_array = $template->get_template_part($template->get_template_dir('.css',DIR_WS_TEMPLATE, $current_page_base,'css'), '/^ie[5-9]_/', '.css');
  while(list ($key, $value) = each($directory_array)) {
    $ver = substr ($value, 2, 1);
    echo '<!--[if IE ' . $ver . ']>' . "\n";
    echo '<link rel="stylesheet" type="text/css" href="' . $template->get_template_dir('.css',DIR_WS_TEMPLATE, $current_page_base,'css') . '/' . $value . '" />' . "\n";
    echo '<![endif]-->' . "\n";
  } 

As you can see, this module will load a stylesheet for all versions of Internet Explorer [if IE], or a separate stylesheet that just targets a flaw in IE5.5 [if IE 5.5]. But the module is lacking something. Conditional Comments also allow you to load a stylesheet for all versions of the browser that are less than a certain version. [if lt IE 7] means "all versions less-than IE 7". Version 7 doesn't suffer from the huge text flaw when "medium" is left up to the user's choice of font size. Hence the need for me to be able to serve a stylesheet to all version of IE that are less-than-IE7 a file that ratchets their default font sizes down by a click. body {font-size:small} and so forth.

I plan on hacking away at the above snippet of code until it does what I want it to. When I get it, I'll post again right here, and hopefully one of the Zen Masters will re-roll the module?

[joelfarris]

Update #1

I was wrong. The code snippet and/or module does not allow the creating of an ie_stylesheet.css file, even though it says so in the readme.html file. The version numbered ones, however, work perfectly. This ie_stylesheet problem will be my first to overcome.

[joelfarris]

Update #2

After several variations involving nested if() statements and a switch() here or there, adding a question mark to the regex to make it both greedy and make the numeric version number optional did the trick. Now I'm off to get that blasted less-than sign to compute!

// Change the ^ie[5-9]_ to ^ie[5-9]?_
$directory_array = $template->get_template_part($template->get_template_dir('.css',DIR_WS_TEMPLATE, $current_page_base,'css'), '/^ie[5-9]?_/', '.css'); 

[joelfarris]

Here's a new implementation that allows for any stylesheet named ieX_stylesheet.css, or an ie_stylesheet.css. Still to go is the section that grabs anything with a ieLT7_stylesheet or an ieLTE7_stylesheet.

/**
 * IE Conditional Comments
 * Load all template-specific stylesheets for IE in alphabetical order, but AFTER 
 * the main stylesheets have been called, thus overriding them in the cascade.
 * Naming convention for stylesheet files is as follows:
 * "ie_stylesheet.css" targets all versions of IE
 * "ie7_stylesheet.css" only targets IE 7
 * "ie6_stylesheet.css" will affect IE 6
 * "ie5_stylesheet.css" will only affect IE 5 and IE 5.5
 */
  $directory_array = $template->get_template_part($template->get_template_dir('.css',DIR_WS_TEMPLATE, $current_page_base,'css'), '/^ie[lt]?[lte]?[5-9]*_/', '.css');
    while(list ($key, $value) = each($directory_array)) {
        $allVersions = substr ($value, 0, 3); // Get the 'ie_' fro mthe array, if it's there.
      $versionNumber = substr ($value, 2, 1); // Get numeric digit from the array.
        // Check for an ie_stylesheet.css file in the css folder.
        if ($allVersions == "ie_") {
            echo '<!--[if IE]>' . "\n";
            echo '  <style type="text/css" media="all">@import "' . $template->get_template_dir('.css',DIR_WS_TEMPLATE, $current_page_base,'css') . '/ie_stylesheet.css";></style>' . "\n";
            echo '<![endif]-->' . "\n";
        }
        // Check for all other numbered versions of ieX_stylesheet.css files in the css folder.    
        if (preg_match("/^[5-9]/i", $versionNumber)) {
            echo '<!--[if IE ' . $versionNumber . ']>' . "\n";
            echo '<link rel="stylesheet" type="text/css" href="' . $template->get_template_dir('.css',DIR_WS_TEMPLATE, $current_page_base,'css') . '/' . $value . '" />' . "\n";
            echo '<![endif]-->' . "\n";
        }
  }
    unset($allVersions, $versionNumber, $key, $value); // A little housecleaning.