10 août

Tutoriel Zend Framework : Intégrez vos feuilles de styles spécifiques à Internet Explorer via headLink

Posted by: Fred Blanc  /  Category: Programmation, Tutoriels, Zend Framework

CSS pour Internet Explorer, pour quoi faire ?

Internet Explorer n’interprète pas les CSS comme les autres navigateurs. En fait, le navigateur ne respecte pas tout à fait les standards établis par le W3C. Les développeurs sont donc obligés, pour assurer la compatibilité sur tous les navigateurs de leur création, de mettre en place des ‘hacks‘ permettant à Internet Explorer de comprendre qu’il doit charger ses propres feuilles de styles.

Pour en savoir plus : les hacks CSS

Voyons à présent comment mettre en place ces feuilles de styles spécifiques ainsi que leur syntaxe d’appel particulière grâce à Zend Framework.

Chargez vos styles CSS spécifiques avec Zend Framework

Alors même si habituellement la documentation du Zend Framework est relativement claire, il faut dire que sur ce point ce n’était pas aussi évident et j’ai du creuser pour trouver la solution. Et quand je dis trouver, ne croyez pas que je l’ai trouvé tout seul, j’ai eu un petit coup de main de Oscar Reales via son article ‘How to append a conditional stylesheet using headLink placeholder in Zend Framework‘. En effet dans la documentation officielle, on peut lire à propos de la fonction headLink()->appendStylesheet, peu ou prou la chose suivante :

  1. appendStylesheet($href, $media, $conditionalStylesheet)

La valeur par défaut de $media vaut screen, mais peut être n’importe quelle valeur de média valide. $conditionalStylesheet est un booléen, et sera utilisé au moment du rendu pour déterminer si des commentaires spéciaux doivent être inclus pour empêcher le chargement de la feuille de style sur certaines plateformes.

Or,il apparait grâce à l’article de Oscar, qu’il est possible de placer autre chose qu’un simple booléen en lieu et place de la variable $conditionalStylesheet.

Il est donc possible pour réaliser la source (partielle) suivante :
<link href="/css/style.css" media="screen" rel="stylesheet" type="text/css" />
<link href="/css/syntax.css" media="screen" rel="stylesheet" type="text/css" />
<!--[if IE]> <link href=”/css/syntaxIE.css” media=”screen” rel=”stylesheet” type=”text/css” /><![endif]–>
<!–[if IE 6]> <link href=”/css/syntaxIE6.css” media=”screen” rel=”stylesheet” type=”text/css” /><![endif]–>
d’utiliser le code suivant dans votre fichier de layout ou de vue :

headLink()->appendStylesheet('/css/style.css')
->appendStylesheet('/css/syntax.css')
->appendStylesheet('/css/syntaxIE.css', 'screen', 'IE')
->appendStylesheet('/css/syntaxIE6.css', 'screen', 'IE 6');
?>

N’oubliez pas après avoir fait toutes vos déclarations headLink, de lancer un écho sur ce dernier :

echo $this->headLink();

Il suffit donc de spécifier pour le paramètre $conditionalStylesheet, la version de Internet Explorer à laquelle s’adresse le fichier CSS en question.

Voilà, en espérant que cela pourra vous servir en cas de besoin.

Tags: , , , , , , ,

Comments are closed.