Take the 2-minute tour ×
WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.

I want to load a different css for IE 9 below so I have two files : - style.css - ie.css

I used this code :

<!--[if !IE]> --> style.css <!-- <![endif]-->

and used this for IE

<!--[if IE]>  ie.css <![endif]-->

but I dont know how to use this condition to use style.css for both non-IE and IE9

share|improve this question
    
This question is not a duplicate of the referenced question. This question deals with IE conditionals for CSS, and the other question deals with loading template files based on UA. –  Chip Bennett Apr 11 '12 at 2:48
    
Okay, I re-opened it. But I think it is not on topic here, and is prepared so bad it shouldn't be asked anywhere in the SE network without further improvements. @Dave Try researching first. There are thousands of articles about this topic. –  toscho Apr 11 '12 at 2:53
    
I wasn't sure how to handle this one. I also think it's off-topic, but it can be answered in a WordPress-specific manner, if it addresses enqueueing stylesheets based on IE conditionals. –  Chip Bennett Apr 11 '12 at 2:58
    
Thank you for re-opening this topic and changing the topic title. –  Dave Apr 11 '12 at 4:06
add comment

2 Answers

While basic use of CSS IE conditionals is off-topic for WPSE, WordPress does include a method for enqueueing stylesheets conditionally, based on CSS IE conditionals.

First, you need to use the correct conditionals:

<!--[if lt IE 9]>  ie.css <![endif]-->

Second, you should enqueue this stylesheet properly, in functions.php, via callback hooked into wp_enqueue_scripts:

<?php
function wpse48581_enqueue_ie_css() {
    // Register stylesheet
    wp_register_style( 'wpse45851-ie', get_template_directory_uri() . '/css/ie.css' );
    // Apply IE conditionals
    $GLOBALS['wp_styles']->add_data( 'wpse45851-ie', 'conditional', 'lt IE 9' );
    // Enqueue stylesheet
    wp_enqueue_style( 'wpse45851-ie' );
}
add_action( 'wp_enqueue_scripts', 'wpse48581_enqueue_ie_css' );
?>

Edit

Based on this comment:

But I only want to use ie.css on IE less than IE9 and style.css for IE9 and non-IE browser

This is actually a non-standard way of defining stylesheets for IE support, because it completely circumvents the cascading part of CSS. Nevertheless, it is entirely possible. Simply use the above method to enqueue style.css also, using the appropriate conditionals. For example, this may not be the best approach, but it will work:

<?php
function wpse48581_enqueue_ie_css() {
    // Register and enqueue lt IE9 stylesheet
    wp_register_style( 'wpse45851-ie', get_template_directory_uri() . '/css/ie.css' );
    $GLOBALS['wp_styles']->add_data( 'wpse45851-ie', 'conditional', 'lt IE 9' );
    wp_enqueue_style( 'wpse45851-ie' );
    // Register and enqueue IE9 stylesheet
    wp_register_style( 'wpse45851-ie9', get_template_directory_uri() . '/style.css' );
    $GLOBALS['wp_styles']->add_data( 'wpse45851-ie9', 'conditional', 'IE 9' );
    wp_enqueue_style( 'wpse45851-ie9' );
    // Register and enqueue default stylesheet
    // Note that we use the SAME style.css as above
    wp_register_style( 'wpse45851-default', get_template_directory_uri() . '/style.css' );
    $GLOBALS['wp_styles']->add_data( 'wpse45851-default', 'conditional', '!IE' );
    wp_enqueue_style( 'wpse45851-default' );
}
add_action( 'wp_enqueue_scripts', 'wpse48581_enqueue_ie_css' );
?>

Caveat: this will work, but I strongly recommend that you reconsider your approach to your IE-specific style declarations. Your life will be much easier if you always use your default stylesheet, and then take advantage of the cascade to override the default, where necessary.

share|improve this answer
    
Thank you for the respond, I tried this , but the problem is that when the site is launched on a IE 8 the browser use style.css as well. But I only want to use ie.css on IE less than IE9 and style.css for IE9 and non-IE browser –  Dave Apr 11 '12 at 4:15
    
See updated answer. I think you're taking the wrong approach, but it can be done. –  Chip Bennett Apr 11 '12 at 11:50
add comment

You don't load different CSS files, you create different classes. Add this function to your functions.php:

/**
 * HTML5 start tag + language attribute + conditional tags for IE Win
 *
 * @link   http://paulirish.com/?p=88
 * @param  bool $print
 * @return void|string
 */
function t5_htmlstart( $print = TRUE )
{
    $out       = '<!Doctype html>';
    $wpclasses = join( ' ', get_body_class() );
    $lang      = t5_get_language_attributes();
    $ies       = array (
        6 => 'lte6 lte7 lte8'
    ,   7 => 'lte7 lte8'
    ,   8 => 'lte8'
    ,   9 => ''
    );

    foreach ( $ies as $n => $class )
    {
        $out .= "<!--[if IE $n]><html $lang class='ie ie$n $class lte9 $wpclasses'><![endif]-->";
    }

    $out .= "<!--[if !IE]><!--><html $lang class='$wpclasses'><!--<![endif]-->";

    $print and print $out;
    return $out;
}

/**
 * Returns the language attributes.
 *
 * Unobstrusive copy from the core.
 * Requires WP 3.0+
 *
 * @param string $doctype The type of html document (xhtml|html).
 */
function t5_get_language_attributes( $doctype = 'html' )
{
    $output = is_rtl() ? 'dir="rtl"' : '';

    if ( $lang = get_bloginfo( 'language' ) )
    {
        $output .= ( ( get_option( 'html_type' ) != 'text/html'
            || $doctype == 'xhtml' )
            ? ' xml:' : '') . 'lang="' . $lang . '"';
    }

    return apply_filters( 'language_attributes', $output );
}

In your header.php you call this function where you want to see the Doctype:

<?php t5_htmlstart() ?>

Now, you can address each individual IE or groups of them in your stylesheet:

.lte8 #searchform div {
    height:             1.9em;
}
.ie7 .widget_search input {
    margin:             -1px 0;
    padding:            5px 5px;
}
.ie9 .widget_search input {
    margin-left:        -2px;
}

But the possibility to use this code in a WordPress theme doesn't make it magically on topic. I will regret this.

share|improve this answer
    
the problem is that I am creating a responsive wordpress theme and I did not noticed that my theme is not working on IE<IE9 - so I want to create a second style sheet called ie.css - but when ever the site is opened in IE it also grabs the styles from style.css - –  Dave Apr 11 '12 at 4:07
    
@Dave See it as a good thing: You really don't want to duplicate your complete CSS, do you? Just overwrite the parts IE doesn't understand with specialized rules. –  toscho Apr 11 '12 at 10:39
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.