6 Déc 2016

les bizarreries d’IE – Les limites de règles par fichier CSS

Avec l’avènement du responsive, nos applications sont maintenant composées de nombreux fichiers CSS afin d’avoir un site multi-navigateurs, multi-plateformes, multi-tout. Et nous avons beau être en 2016, parfois il faut que nos beaux sites web soient compatibles avec d’anciens navigateurs, notamment le vieillissant IE9 (ça pourrait être pire, vous vous souvenez d’IE6 ?). Et forcement sur ce dernier nous avons rencontré un bug un peu étrange.

le résultat attendu, ici sur chrome

Le résultat attendu, ici sur Google Chrome

Le résultat sous IE9. Vous remarquerez le champ de recherche démesuré, le libellé “Accueil” qui devrait être masqué, ou encore le bouton “hamburger” qui ne devrait être visible qu’en mode mobile

Tu me vois, tu me vois plus

Bien que nous n’ayons rencontré aucun problème lors du développement, notre site ne ressemble plus à grand chose sur IE9 depuis que notre site est passé sur les environnements d’anté-prod!  Par contre aucun problème sur les autres navigateurs. Comme d’habitude sur IE le réflexe est de spammer F5, CTRL+F5, ALT+SHIFT+SUPPR et tout autre technique pour vider un cache qui ne se vide jamais complètement, mais cette fois sans résultat.

Le debug n’est pas évident car les fichiers CSS sont minifiés (sans compter la galère pour trouver un poste avec IE9), mais après avoir creusé un peu il semblerait que les classes CSS que nous avons rajoutés dans nos fichiers customs, ceux chargés après la librairie Bootstrap, soient passés à la trappe (hum). Pourtant après avoir récupéré directement le fichier CSS minifié, ces dernières sont bien présentes!

 

Le Nettoyeur

Et bien après avoir creusé nos méninges je me suis rappelé d’un cas similaire sur un autre site il y a quelques années pour lequel il avait fallu couper le fichier minifié en 2. Pourquoi donc me direz-vous? Et bien tout simplement parce que IE9 (et peut-être d’autres versions plus anciennes) limite à 4095 le nombre de règles et de sélecteurs par fichier CSS. Du coup si vous dépassez ce chiffre toutes les règles suivantes seront simplement supprimées. Plutôt embêtant sachant que la plupart du temps nous plaçons nos CSS maison après ceux fournis par les frameworks.

Un air de famille?

Il n’y a donc pas 36 solutions, soit couper notre bundle en 2, soit en sortir les fichiers CSS les plus importants.

 

Il y a moyen de détecter rapidement ce problème?

Parfois le site est assez complexe, et il peut être difficile de voir si il manque quelques classes. Pour être sûr que toutes les règles sont bien prises en compte, j’ai trouvé un petit script qui permet de compter le nombre de règles et sélecteurs contenus dans tous les fichiers CSS présents sur le site, ainsi que dans les balises inline. Vous pouvez le copier/coller dans n’importe quelle console javascript (sauf celle d’IE9 qui forcement verra au maximum 4095 règles -_-)

Et voilà le résultat de ce script avec notre application:

Maintenant le jour où vous aurez un comportement étrange avec IE en prod mais pas en dev, vous saurez qui est le coupable 😉

Share