28172 sujets

CSS et mise en forme, CSS3

Bonjour à tous,

Je suis confronté à un problème hors du commun : j'ai terminé le site d'un client, qui fonctionne à merveille sur toutes les machines que j'ai pu tester (pas loin d'une centaine). SAUF... sauf sur les machines de mon client ! ...


La config :
CMS : WordPress 4.3
Thème : DreamTeam The7
Plugins : Akismet, AllInOneSEO, GravityForms, HideMyWP, SucuriSecurity, UberMenu, UpDraftPlus, WPML.


Le bug :
Sur toutes les machines du réseau local de mon client, les navigateurs (tous) agissent comme si la ligne suivante n'existait pas :
<link rel="stylesheet" id="dt-custom.less-css" href="http://www.domain.com/fichiers/wp-less/theme/css/custom-b7b6bc2661.css" type="text/css" media="all">

Toutes les autres feuilles de style sont pourtant correctement lues.

Je vous laisse essayer d'aller sur n'importe quelle page du site et constater l'horreur quand on supprime ladite ligne (via la console F12 par exemple) : tout est sans dessus dessous, les textes sont en blanc sur fond blanc, les images ne sont pas chargées, bref.

D'ailleurs, une fois saisie l'URL (domain.com/fichiers/wp-less/theme/css/custom-b7b6bc2661.css) dans le navigateur des machines de mon client, ce dernier retourne une erreur 404 : le fichier n'existe pas. Pourtant, sur toutes les autres machines que j'ai pu tester, le fichier s'affiche correctement !

J'en déduis donc que le routeur et/ou le fournisseur d'accès doit brider quelque chose quelque part. Je copie ensuite l'intégralité dudit fichier CSS dans le fichier main.css. Et BIM !, c'est désormais le fichier main.css qui n'est plus lu par le navigateur ! --> 404 !

J'en déduis donc que le routeur et/ou le fournisseur d'accès doit brider quelque chose dans le code source du fichier CSS en question.


Mes questions :

1 - Mon raisonnement est-il cohérent ?

2 - Y a-t-il un moyen simple d'identifier précisément l'origine du problème au niveau du code ? Et le cas échéant, de le corriger ou de le contourner.

3 - Y a-t-il un moyen simple d'identifier précisément l'origine du problème au niveau du routeur et/ou du fournisseur d'accès ? Et encore une fois, le cas échéant, de le corriger ou de le contourner.


D'avance un immense merci à tous ceux qui pourront m'aider à résoudre ce mystérieux bug.

Cordialement,

AKAPROD
Modifié par AKAPROD (06 Feb 2016 - 19:02)
Bonjour,

Je pense que ton fichier est bien trop lourd.
Même le validateur css du W3C n'en veux pas, ça le fait planter.
Pour tester, laisse seulement les 2000 premières lignes de ton css, et regarde si le fichier pose toujours problème.
Par contre n'oublie pas de bien vider le cache navigateur.

Dans tous les cas, 8000 lignes de css c'est n'importe quoi. Ton fichier fait quand même 500ko Smiley eek

De plus, quels sont les navigateurs testés et sur quel OS ? Et quel est le fournisseur d'accès internet (on sait jamais) ?
Bonjour et merci pour cette première piste.

Le problème est que c'est un fichier CSS concaténé et généré par le thème via du php : sauf erreur, le fichier lui-même n'existe pas en statique. Donc je ne sais pas bien comment y toucher...

Les navigateurs testés sont les dernières versions de Chrome, Firefox et IE, sur XP, Win7 et Win8.1... Et les mêmes machines ont été testées avec des connexions 3G, et là tout fonctionne !

Le fournisseur est un fournisseur local.

Chez moi le validateur CSS du W3C fonctionne sans problème : voir ici.
Il affiche 27 erreurs, mais il fonctionne.
Modifié par AKAPROD (06 Feb 2016 - 19:04)
AKAPROD a écrit :
Chez moi le validateur CSS du W3C fonctionne sans problème : voir ici.
Il affiche 27 erreurs, mais il fonctionne.


Ah... moi il m'affiche ça.

edit : Ah il y a deux validateurs, je ne dois pas être sur une bonne version... J'utilise css-validator.org au lieu de jigsaw.w3.org.
Modifié par Raphi (08 Sep 2015 - 11:34)
Tu as moyen de tester chez d'autre personne qui ont le même fournisseur, voir si le problème persiste ?
Oui, c'est d'ailleurs déjà fait, et il n'y a aucun problème !

Le bug ne survient que sur le réseau local de la société. Je me demandais si un pare-feu ne pourrait pas interpréter la feuille de style comme une menace... pour une raison ou pour une autre...

Ceci-dit si le pare-feu cause une erreur parce qu'il est mal configuré, il y a forcément une ligne de la feuille de style qui pose problème, et qui fait interpréter au routeur que le fichier est dangereux...
Ok, alors tu as peut-être une solution pour déboguer.

Tu créé une copie de ce css.
Si cette copie n'est pas détectée en 404 alors le problème vient peut-être du nom du fichier (???).
Si cette copie est détectée en 404, tu effaces au fur et à mesure des lignes de css, jusqu'à trouver ce qui coince.

Question bête, les règles data:image ne pourraient pas éventuellement poser problème ? (on sait jamais)
Modifié par Raphi (08 Sep 2015 - 14:06)
Donc.
Le même fichier avec le même nom dans un autre dossier, 404.
Le même fichier avec un nom différent (test.css), c'est ok.
Le même fichier avec une extension (custom-b7b6bc2661.txt), c'est ok.
Un fichier avec le même nom (custom-b7b6bc2661.css) mais seulement une ou deux lignes de code, c'est ok.

C'est à n'y rien comprendre...

Quant aux règles data:image, je crois comprendre que ce sont des URI dans la feuille de style, mais comme déjà évoqué plus haut, cette feuille de style est générée dynamiquement, et n'est pas censée être manuellement modifiable.
Bonjour.

Je ne sais pas si ça peut être ça, mais ton fichier CSS commence par @charset "utf-8" mais il est encodé en ANSI, pas en utf-8.

De plus, à première vue, tu dois tu dois pouvoir supprimer sans problème pas mal de propriétés préfixées. Vérifie sur http://caniuse.com/. Ça sera déjà ça de gagné.
Modifié par thierry (08 Sep 2015 - 15:44)
AKAPROD a écrit :
Donc.
Le même fichier avec le même nom dans un autre dossier, 404.
Le même fichier avec un nom différent (test.css), c'est ok.
Le même fichier avec une extension (custom-b7b6bc2661.txt), c'est ok.
Un fichier avec le même nom (custom-b7b6bc2661.css) mais seulement une ou deux lignes de code, c'est ok.

C'est à n'y rien comprendre...

Bah si !
Ça prouve que c'est une ligne ou plusieurs de ton fichier css qui pose problème. Reste plus qu'à identifier lesquelles.
Pour la génération du fichier tu verras plus tard, déjà identifie le problème. Smiley cligne

edit : utilises la méthode de bourrin qui consiste à effacer un bon paquet de lignes de code jusqu'à ce que ça fonctionne, puis tu en remet jusqu'à ce que ça bloque et tu vois ce qui bloque dans ce que tu as rajouté, en isolant ces nouvelles lignes (je sais pas si c'est très clair).
Modifié par Raphi (08 Sep 2015 - 15:45)