Code snippets for symfony 1.x

Navigation

Refine Tags

Snippets tagged "css ie helper"

Work with IE conditional comments

sometimes you may need to include a stylesheet only for IE, the best effort you give, this box-model gives you headaches and there is no other solution. Same issue for JS files (but it should not happen anymore thanks to prototype).

In these cases you can simply add this in your <head> section

<head>

<?php include_http_metas() ?>
<?php include_metas() ?>

<?php include_title() ?>

<link rel="shortcut icon" href="/favicon.ico" />
<?php include_javascripts() ?>
<?php include_stylesheets() ?>

<!--[if IE 7]>
<?php echo stylesheet_tag('my-css-for-IE7') ?>
<![endif]-->
<!--[if lte IE 6]>
<?php echo stylesheet_tag('my-css-for-IE6-or-lower') ?>
<![endif]-->
</head>

I made a helper for this, so your header will look more like this :

<?php use_helper('IE') ?>
<?php use_ie_stylesheet('my-css-for-IE7', 'version=7') ?>
<?php use_ie_stylesheet('my-css-for-IE6-or-lower', 'version=6 operator=lte') ?>
...
<head>

<?php include_http_metas() ?>
<?php include_metas() ?>

<?php include_title() ?>

<link rel="shortcut icon" href="/favicon.ico" />
<?php include_javascripts() ?>
<?php include_stylesheets() ?>
<?php include_ie_metas() ?>
</head>

Code is not shorter, but it's more "symfony-like" as you don't explicitly write yourself the strange-syntax comments and don't have to remember their (strange) syntax anymore.

The ideal way would be adding a filter inspired by "lib/symfony/sfCommonFilter.class.php" so we would not even have to call the include_* functions ;)

IMPORTANT :

If you do this (using IE helper or not) to OVERRIDE some CSS rules, don't forget that Symfony automagically adds your CSS and JS files just before </head>, so your CSS will be inserted BEFORE all the CSS included via "use_stylesheet()". So you have to call

<?php include_stylesheets() ?>
<?php include_javascripts() ?>

before adding your conditional comments.

And the code of the helper, to be written in "lib/helper/IEHelper.php"

<?php
 
function get_opening_ie_conditional_comments($version = null, $operator = null) {
    return '<!--[if ' . ($version ? $operator.' ' : '') . 'IE' . ($version ? ' '.$version : '') . ']>';
}
 
function get_closing_ie_conditional_comments($version = null, $operator = 'lte') {
    return '<![endif]-->';
}
 
function get_ie_conditional_comments($version = null, $operator = null) {
    return array(
        get_opening_ie_conditional_comments($version, $operator),
        get_closing_ie_conditional_comments($version, $operator)
    );
}
 
function get_ie_metas($type = null) {
    if ($type == 'javascripts' || $type == 'stylesheets') {
        $metas = '';
        $already_seen = array();
        // Stylesheets
        $assets = sfContext::getInstance()->getResponse()->getParameter($type, array(), 'ie');
        foreach ($assets as $asset_info) {
            list($asset, $options) = $asset_info;
            $file = $type == 'stylesheets' ? stylesheet_path($asset) : javascript_path($asset);
            if (isset($already_seen[$file])) {
                continue;
            } else {
                $already_seen[$file] = true;
            }
            // IE version (default : none)
            $version = isset($options['version']) ? $options['version'] : null;
            unset($options['version']);
            // IE version comparison operator (default : "le")
            $operator = isset($options['operator']) ? $options['operator'] : null;
            unset($options['operator']);
            // get corresponding comments
            list($start_comment, $end_comment) = get_ie_conditional_comments($version, $operator);
            $include = $type == 'stylesheets' ? stylesheet_tag($file, $options) : javascript_include_tag($file, $options);
            $metas .= $start_comment . "\n" . $include . $end_comment . "\n";
        }
        return $metas;
    } elseif (is_null($type)) {
        return get_ie_metas('javascripts') . "\n" . get_ie_metas('stylesheets');
    }
}
 
function include_ie_metas() {
    echo get_ie_metas();
}
 
function use_ie_stylesheet($stylesheet, $options = array()) {
    $stylesheets = sfContext::getInstance()->getResponse()->getParameter('stylesheets', array(), 'ie');
    if (!is_array($options)) $options = sfToolkit::stringToArray($options);
    $stylesheets[] = array($stylesheet, $options);
    sfContext::getInstance()->getResponse()->setParameter('stylesheets', $stylesheets, 'ie');
}
 
function include_ie_stylesheets() {
    echo get_ie_stylesheets();
}
 
function get_ie_stylesheets() {
    return get_ie_metas('stylesheets');
}
 
function use_ie_javascript($js, $options = array()) {
    $javascripts = sfContext::getInstance()->getResponse()->getParameter('javascripts', array(), 'ie');
    if (!is_array($options)) $options = sfToolkit::stringToArray($options);
    $javascripts[] = array($javascript, $options);
    sfContext::getInstance()->getResponse()->setParameter('javascripts', $javascripts, 'ie');
}
 
function include_ie_javascripts() {
    echo get_ie_javascripts();
}
 
function get_ie_javascripts() {
    return get_ie_metas('javascripts');
}
by Nicolas Chambrier on 2007-07-27, tagged css  helper  ie  view 
(3 comments)