WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. It only takes a minute to sign up.
Sign up to join this community
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
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' );
?>
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.
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.
