Que celui qui n'a jamais eu de problèmes pour faire fonctionner un site web sous IE (Internet Explorer), alors que ce dernier tourne pourtant parfaitement bien sur les autres navigateurs (Firefox, Safari, Chrome,..), nous jète la première pierre. Après plusieurs heures infructueuses pour comprendre pourquoi le site yoja-web.com ne fonctionnait pas parfaitement sous IE, nous avions depuis quelques mois abdiqué par manque de temps mais surtout par un certain raz le bol des surprises de ce bon vieux IE. Cependant depuis le début d'année et notre regain de motivation pour faire évoluer notre site, nous avons enfin compris la source du problème : IE ne veut pas charger plus de 31 CSS.
Et oui, IE (version 6, 7, 8 et surement 9 ) ne charge que les 31 premières CSS importées dans une page. Vous pouvez tester vous même que le 32ieme import est ignoré par IE.
<link type="text/css" rel="stylesheet" media="all" href="fichier1.css" /> <link type="text/css" rel="stylesheet" media="all" href="fichier2.css" /> <link type="text/css" rel="stylesheet" media="all" href="fichier3.css" /> ... <link type="text/css" rel="stylesheet" media="all" href="fichier32.css" />
Je vous accorde que le fait de charger plus de 31 CSS sur une page est assez rare (voir même déconseillé pour l'optimisation de la bande passante). Cependant, ce problème peut apparaître sur certains générateurs de site ou CMS comme Drupal qui chargent un nombre important de CSS (en général 1 CSS par module complémentaire installé).
Je vous vois venir... vous allez me demander : Mais pourquoi donc IE ne charge que 31 CSS ?. Je devrais alors vous avouer qu'avec le temps déjà perdu à cause d'IE, j'ai eu la flemme de chercher. Surement pour notre histoire de bande passante et qu'appeler 31 requêtes serveur juste pour charger des styles c'est pas vraiment top . Mais tout de même, IE pourrait nous laisser décider ça nous même ou au moins nous afficher un petit message du genre "Attention ! Il y a plus de 31 stylesheets à charger, certains styles seront ignorés..." juste histoire de nous faire gagner un peu de temps.
Il existe 2 modules Drupal permettant de régler ce problème :
Personnellement, j'ai utilisé temporairement IE CSS Optimizer (qui peut agréger les CSS en une seule) mais le résultat n'est pas totalement satisfaisant car certains styles semblent perdus lors de la manipulation. La 2e solution IE Unlimited CSS Loader est certes mois élégante mais fonctionne bien dans notre cas.