Outils pour debugger un fichier css ?

[paikan06]

Bonjour à tous !

Je récupère un site web relativement lourd (css, js), après avoir bien étudié l’architecture je suis persuadé qu'une grande partie du code css ne sert à rien.
Connaissez vous des soft qui permettes d'analyser et de repérer le codes css inutiles ???

Je vous remercie d'avance pour votre aide.
Très bonne journée.

 

[mipc]

il me semble que l'un des meilleurs c'est celui là:

http://www.minifycss.com/css-compressor/

bon ça va surtout aider à minifier le code, c'est pas fait pour etre exploiter par un humain, c'est de la mise en production, car si non tu voi plus rien de ton code.


si non les autres:

http://www.cleancss.com/

http://iceyboard.no-ip.org/projects/css_compressor

http://www.cssdrive.com/index.php/main/csscompressor

http://www.csscompressor.com/

si non à une époque un plugin pour firefox appeler google pagespeed le faisait très bien, le plugin google pagespeed pour firefox permet de viré les code CSS inutile car pas utilise dans la page.

 

[paikan06]

Merci énormément pour ta réponse rapide, je regarde de suite !!!!!
Très bonne continuation

 

[mipc]

le plugin google pages speed pour firefox il faut en premier installer le plugin Firebug pour que google pagespeed puisse fonctionner:

https://addons.mozilla.org/en-US/firefox/addon/firebug/versions/

http://code.google.com/speed/page-speed/download.html

 

[paikan06]

Alors la félicitation , vous venez de remplir ma journée de boulot de demain !!!
Merci

 

[Leonick]

nettoyer le css, c'est bien différent de juste compresser le code, c'est surtout supprimer les sélecteurs qui ne servent à rien dans le site. Il y a un outil qui permet de le faire, mais juste age par page. Pour l'intégralité d'un site, je ne sais pas si ça existe.

 

[mipc]

nettoyer le css, c'est bien différent de juste compresser le code, c'est surtout supprimer les sélecteurs qui ne servent à rien dans le site. Il y a un outil qui permet de le faire, mais juste age par page. Pour l'intégralité d'un site, je ne sais pas si ça existe.

c'est pour ça que j'ai donner le plugin firebug et le plugin google pagespeed pour firefox qui donne les entré orphelines qui ne servent à rien sur la page HTML analyser.

edit, j'me site:

il me semble que l'un des meilleurs c'est celui là:

http://www.minifycss.com/css-compressor/

bon ça va surtout aider à minifier le code, c'est pas fait pour etre exploiter par un humain, c'est de la mise en production, car si non tu voi plus rien de ton code.


si non les autres:

http://www.cleancss.com/

http://iceyboard.no-ip.org/projects/css_compressor

http://www.cssdrive.com/index.php/main/csscompressor

http://www.csscompressor.com/

si non à une époque un plugin pour firefox appeler google pagespeed le faisait très bien, le plugin google pagespeed pour firefox permet de viré les code CSS inutile car pas utilise dans la page.

j'me re site encore une fois:

le plugin google pages speed pour firefox il faut en premier installer le plugin Firebug pour que google pagespeed puisse fonctionner:

https://addons.mozilla.org/en-US/firefox/addon/firebug/versions/

http://code.google.com/speed/page-speed/download.html

 

[Leonick]

c'est pour ça que j'ai donner le plugin firebug et le plugin google pagespeed pour firefox qui donne les entré orphelines qui ne servent à rien sur la page HTML analyser.

oui, mais s'il faut passer sur toutes les pages, une par une, afin de vérifier les sélecteurs non utilisés, ça n'est vraiment pas pratique. Même avec quelques dizaines de pages. Alors quand on en a plusieurs dizaines (voire centaines) de milliers :roll:

 

[mipc]

j'ai jamais dit que s'était simple.

 

[paikan06]

Bonjour à tous
Je te remercie Leonick d'avoir fait la distinction entre nettoyer et compresser. Les différentes références citées vont beaucoup m'aider une fois que le code inutile sera effacer.
De mon côté, j'ai trouvé un site qui a l'aire sympa : http://unused-css.com/

Si vous avez des avis, c'est avec plaisir
Très bonne journée à tous !!

 

[Leonick]

je ne suis pas pour la compression à outrance des code html, js et css, ne serait que pour débugger/faire évoluer le site.
On peut me répondre que gg le fait bien, sauf que gg, la qualité du code, 'est loin d'être sa priorité il suffit de voir es erreurs affichées dans firebug, voir valid xhtml sur des pages contenant des bouts de code de gg

 

[mipc]

moi se que j'avais fait à un moment, c'est des fichier de développement ou je codais dessus, puis une fois ceci fait et que tous était OK, je faisais générer un code minifier de chaque fichier pour la mise en production, comme ça moi coté développement le code était compréhensible par un humaine car pas fouille et relativement propre, m'enfin après j'ai arrêter parce que j'ai très peut de page.

 

[Leonick]

et quand tu veux débogger en ligne, ça va t'indiquer que ce style là est ligne 1. Comme tout le reste des styles, vu que tout est compressé et tient sur une ligne !

 

[mipc]

et quand tu veux débogger en ligne, ça va t'indiquer que ce style là est ligne 1. Comme tout le reste des styles, vu que tout est compressé et tient sur une ligne !

nan mais je débogguais avec le code de développement pas avec le code de production, m'enfin maintenant je ne minifie plus tellement mon code car pour un site plutôt petit s'était des queues de cerises et en gros c'est plus une perte de temps qu'autre chose.

pour dire le j'ai fusionner CSS et html parce que mon fichier CSS était vraiment ridicule et que techniquement il valait mieux laisser les feuille de style CSS directement dans le HTML question vitesse de chargement, en fait quant le fichier CSS fait 8KO et moins ça ne sert à rien de le mettre à part autant l'intégrer au code HTML sans les séparer, après si le code CSS est plus lourd, ça peut avoir un intérêt de les Séparer, sauf que moi j'ai jamais réussi à faire en sorte que le serveur sache Gzip le CSS, du coup j'ai laisser tomber et j'ai fusionner CSS dans le HTML.

 

[Leonick]

tu t'en fou que le css soit zippé. L'avantage de l'avoir en externe, c'est qu'au delà de la 1° page, le fichier reste en cache dans le navigateur, donc pas besoin de le recharger

 

[mipc]

nan mais j'ai analyser avec pagespeed, le plugin pour google chrome, et même avec pingdom.com et yslow et ma méthode est meilleurs au final, de quasiment rien mais c'est meilleurs, ça reste des queue de cerise dans l'ensemble.

 

[fobec]

Bonjour à tous
Je te remercie Leonick d'avoir fait la distinction entre nettoyer et compresser. Les différentes références citées vont beaucoup m'aider une fois que le code inutile sera effacer.
De mon côté, j'ai trouvé un site qui a l'aire sympa : http://unused-css.com/

Si vous avez des avis, c'est avec plaisir
Très bonne journée à tous !!

Sous Firefox, je te conseille le plugin Dustme
-http://www.sitepoint.com/dustmeselectors/

L'outil prend en compte l'utilisation d'une même feuille de style pour plusieurs pages.
Petit bemol, l'extension DustMe n'est plus supporté par la version FireFox 11

 

[Leonick]

Petit bemol, l'extension DustMe n'est plus supporté par la version FireFox 11

il suffit de peut de chose pour faire accepter un plgin en version supérieure de FF, sous réserve d'éventuels dysfonctionnements du plugin, mais souvent, c'est juste la version haute qui n'a pas été prévue suffisamment haute, du fait du versionning hyper rapide de FF ces derniers temps