Drupal 7 : Mettre en place des CSS ciblées pour IE via commentaires conditionnels
Publié le sam, 05/02/2011 - 18:29 par robin
Créer des feuilles de style CSS spécifiques pour Internet Explorer via des commentaires conditionnels n'est pas nouveau, c'est une technique bien connue de tous les intégrateurs Web. Nous allons voir comment les implanter dans Drupal 7.
Dans Drupal 6 :
Dans drupal 6, personnellement, je les place directement dans la balise <head> dans mon page.tpl.php.
(Il est possible aussi de coder une fonction dans le template.php)
Exemple dans le page.tpl.php de mon thème de base FuelDeLuxe :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<?php echo $language->language ?>" lang="<?php echo $language->language ?>" dir="<?php echo $language->dir ?>">
<head>
<title><?php echo $head_title; ?></title>
<?php echo $head; ?>
<?php echo $styles; ?>
<!--[if lte IE 6]>
<style type="text/css" media="all">
@import "<?php echo $base_path . path_to_theme() ?>/css/ie6.css";
</style>
<![endif]-->
<!--[if IE 7]>
<style type="text/css" media="all">
@import "<?php echo $base_path . path_to_theme() ?>/css/ie7.css";
</style>
<![endif]-->
<?php echo $scripts; ?>
</head>
<body class="<?php echo $body_classes; ?>">
<div id="skip-nav"><a href="#content">Skip to Content</a></div>
<div id="page-wrapper">
<div id="page">
...
Dans Drupal 7 :
Pour faire la même chose que ci-dessus dans drupal 7, il vous faudra mettre en place dans votre thème un template html.tpl.php (il se trouve par les fichiers core ici /modules/system/html.tpl.php).
C'est dans ce nouveau template pour D7 que vous trouverez la section HEAD html :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML+RDFa 1.0//EN"
"http://www.w3.org/MarkUp/DTD/xhtml-rdfa-1.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<?php print $language->language; ?>" version="XHTML+RDFa 1.0" dir="<?php print $language->dir; ?>"<?php print $rdf_namespaces; ?>>
<head profile="<?php print $grddl_profile; ?>">
<?php print $head; ?>
<title><?php print $head_title; ?></title>
<?php print $styles; ?>
<?php print $scripts; ?>
</head>
<body class="<?php print $classes; ?>" <?php print $attributes;?>>
<div id="skip-link">
<a href="#main-content" class="element-invisible element-focusable"><?php print t('Skip to main content'); ?></a>
</div>
<?php print $page_top; ?>
<?php print $page; ?>
<?php print $page_bottom; ?>
</body>
</html>
Il est donc, en théorie, possible de faire la même chose que notre exemple sous D6 en plaçant les commentaires conditionnels en dessous de la variable <?php print $styles; ?>
Mais la meilleure solution est d'utiliser un preprocess dans votre fichier template.php, cela vous évitera d'ailleurs de créer un html.tpl.php dans votre thème.
Vous pouvez en voir un exemple dans le template.php du thème Bartik fournit avec Drupal :
function YourThemeName_preprocess_html(&$variables) {
// Add conditional stylesheets for IE
drupal_add_css(path_to_theme() . '/css/ie.css', array('group' => CSS_THEME, 'browsers' => array('IE' => 'lte IE 7', '!IE' => FALSE), 'preprocess' => FALSE));
drupal_add_css(path_to_theme() . '/css/ie6.css', array('group' => CSS_THEME, 'browsers' => array('IE' => 'IE 6', '!IE' => FALSE), 'preprocess' => FALSE));
} // end preprocess_html
Un autre exemple que j'utilise :
function YourThemeName_preprocess_html(&$variables) {
// Add conditional stylesheets for IE (from Bartik)
drupal_add_css(path_to_theme() . '/css/ie7.css', array('group' => CSS_THEME, 'browsers' => array('IE' => 'lte IE 7', '!IE' => FALSE), 'preprocess' => FALSE));
drupal_add_css(path_to_theme() . '/css/ie6.css', array('group' => CSS_THEME, 'browsers' => array('IE' => 'IE 6', '!IE' => FALSE), 'preprocess' => FALSE));
} // end preprocess_html
Ce preprocess produira le code source suivant sous IE :
<!--[if lte IE 7]> <link type="text/css" rel="stylesheet" href="http://xxxxxx/sites/all/themes/xxxx/css/ie7.css" media="all" /> <![endif]--> <!--[if IE 6]> <link type="text/css" rel="stylesheet" href="http://xxxxx/sites/all/themes/xxxx/css/ie6.css" media="all" /> <![endif]-->
Sources Web :
- Les commentaires conditionnels pour Internet Explorer
- API : /modules--system--html.tpl.php/7/source
- drupal_add_css : /function/drupal_add_css/7
- Adding browser-specific style sheets
- drupal_pre_render_conditional_comments : /function/drupal_pre_render_conditional_comments/7
- Mots-clés :
- 5824 lectures
Modules Drupal :
actions
blocktheme
blogtheme
calendar
CCK content construction kit
content-unpublish
content taxonomy
context
date
display suite
drupal administration menu
drush
drush make
Embedded Media Field
FeedAPI
Feed Element Mapper
GMap Module
imagecache
imagefield
locale
location
node reference url widget
Organic groups
Override Node Options
path
pathauto
path redirect
permissions lock
profile
rules
sexybookmarks
Similar by Terms
simplenews
site-map
sitemenu
swf tools
taxonomy block
taxonomy blocks
taxonomy menu
thickbox
trigger
twitter
update status
upload
Vertical Tabs
views
views attach
views rotator
views slideshow
wysiwyg api
Commentaires :
Merci pour l'information, ça
Merci pour l'information, ça fonctionne nickel !
Poster un nouveau commentaire