Tutos

Ajouter un fichier CSS conditionnel pour Internet Explorer

Le 07 août 2011 par Jonathan B. | 1

Internet Explorer est le vilain petit canard des navigateurs Internet. Découvrez une astuce pour ajouter des fichiers CSS conditionnels sur WordPress.

Internet Explorer est le cauchemar de tous les intégrateurs HTML/CSS. Pour spécifier un fichier CSS uniquement à IE, on utilise des conditions.

WordPress permet d’ajouter des conditions IE pour les fichiers CSS que l’on intègre à l’aide des fonctions wp_register_styles() et wp_enqueue_styles().

Pour ajouter une condition IE a un fichier CSS, la procédure de déclaration du fichier reste inchangée. La différence se fait à l’aide de la méthode add_data de la class WP_Styles. C’est grâce au troisième argument de cette méthode que nous allons modifier la condition de notre fichier CSS.

Comme d’habitude, ce code est à placer dans le fichier functions.php de votre thème.

add_action('wp_print_styles', 'gkp_ie_css');
function gkp_ie_css() {
	
    wp_register_style('style-ie', get_stylesheet_directory_uri() . '/style-ie.css'); 
    wp_enqueue_style('style-ie');
        
    global $wp_styles; 
    $wp_styles->add_data( 'style-ie', 'conditional', 'lte IE 7' ); // On met la condition ici !!
}

L’astuce suivante retourne le résultat suivant :

<!--[if lte IE 7]>
<link rel='stylesheet' id='style-ie-css' href='http://www.geekpress.fr/wp-content/themes/geekpress/design/style-ie.css?ver=3.2' type='text/css' media='all' />
<![endif]-->

Cet article a été mis à jour il y a 2534 jours - Il n'est peut être plus à jour !

Suivez-moi !

Article écrit par Jonathan B.

Jonathan est le co-fondateur de WP Media, startup connue pour être l’auteur de WP Rocket et Imagify. Il est aussi co-organisateur du WordCamp Lyon et Paris.

1 Commentaire

Kal dit :
11 juillet 2014 à 17 h 27 min
Je conseillerais plutôt de changer l’en-tête pour en mettre un du style :
```





```
Cela permet dans le CSS si l’on veut cibler ie7 par exemple d’utilisateur :
.ie7 .class { color:red; }