Bonsoir, bonjour, bonne nuit,
Je sais que certains d'entre vous s'y connaissent plutôt bien en développement web, et vous avez donc peut être des sites à me recommander pour faire ce que je cherche à faire.
Vous l'avez vu dans le titre, je cherche à nettoyer un fichier CSS. J'ai créé un site à partir d'un template, et petit à petit, forcément, il y a des balises en trop. Je cherche donc un site qui puisse les supprimer.
En cherchant sur internet, je tombe souvent sur des sites qui me disent quelles balises sont inutilisées, pour que je les supprime manuellement. Le hic, c'est que non seulement il y en a des masses, et en plus, je ne les trouve pas forcément dans fichiers css, puisque les indications sont assez peu précises.
Donc si vous connaissez quelque chose qui puisse faire ça, je suis tout ouïe
Merci bien !
P.S.: Je ne sais pas si c'est la bonne rubrique pour poster ça, mais je ne vois pas où j'aurais pu le poster autrement.
P.S.2: Je sais que ce genre d'entraide n'est pas très fréquente sur le forum, et peut être que vous ne souhaitez pas voir ce genre de requêtes, qui n'ont aucun rapport avec les jeux indés. Mais comme j'aime particulièrement la communauté, je me permet de vous demander ça ici
Si ça vous dérange, dites-le moi, je comprend
J'ai du mal à saisir ce que tu appelles "balise" dans le CSS, étant donné que ce n'est pas balisé. J'ai pensé que tu parlais des instructions CSS associées à des ID/classes HTML mais tu parles d'un site qui indiquerait lesquelles retirer, ce qui n'a pas vraiment de sens, à moins que tu prennes un vieux template avec des instructions périmées.
J'imagine que tu veux simplement retirer des indications CSS qui ne sont pas utilisées dans tes templates. Par exemple si tu trouves un .maClass dans ton CSS, vérifier que cette classe existe bien quelque part dans l'un de tes templates et si ce n'est pas le cas, retirer le groupe lié à .maClass dans le CSS.
Je ne sais pas si ça existe. Mais ça m'intéresserait aussi. J'imagine que le logiciel demanderait les templates HTML et le CSS à comparer. Mais ça ne pourrait pas prendre en compte les classes CSS générées au travers de PHP par exemple. Sauf en récupérant le résultat de la source après génération.
Si quelqu'un connait un truc du genre, je suis curieux ! Et j'avoue que ça pourrait - presque - être drôle à coder
Trop de stress pour un si petit renard.
quelques outils utiles selon vos pratiques, mais pas de nettoyeur de css il me semble
sinon il est possible de tester ça, jamais utilisé pour ma part.
Clean CSS permet uniquement de minifier (supprimer les espaces ici) ou au contraire d'étendre la mise en forme pour la rendre lisible. Ca ne correspond donc pas à ce qui est recherché
Pour le premier lien, ce sont en effet des aides, mais rien pour réellement "nettoyer" les instructions inutilisées
Trop de stress pour un si petit renard.
le premier lien je sais d'où le il me semble, cela reste des petits outils bien utile.
ceci dit, si ton html est correctement structuré tu ne devrais pas avoir tant de chose à nettoyer
plus que nettoyer le produit final, repenser la méthode de travail ? (je suis méchant, je sais).
Dans le cas de Colchope, s'il reprend un template mais vire des trucs, il aimerait bien virer aussi ceux dans le CSS, c'est compréhensible. Donc la méthode de travail ne se pose pas réellement. Dans mon cas, le site a subi un grand nombre de petites évolutions/petites suppressions et il est toujours risqué de retirer du CSS qui n'est - à priori - plus utilisé. Dans le doute, je préfère le laisser que de me rendre compte qu'une page a explosé, et passer des heures à chercher pourquoi.
C'est d'ailleurs pour ça que la version responsive permettra de remettre le code à plat une bonne fois pour toute. Je vais tout refaire de 0. Contrairement à la création du site, je sais où je vais pour toutes les évolutions à venir. Ca me permettra d'un peu mieux préparer tout ça
Trop de stress pour un si petit renard.
En général, plutôt que de retirer des bouts à du CSS déjà existant, je préfère y ajouter des règles. Si tu as possibilité de rajouter des classes à tes balises, ça te permettras d'être plus spécifique et précis. Si une propriété ne convient pas, il y a toujours moyen de la surcharger avec un !important plutôt que de la chercher et l'enlever au risque de casser quelque chose d'autre.
Mes jeux sur itch.io
Mes vidéos sur Youtube
Mes reins sur ebay (pas encore disponible)
Houlà, c'est allé vite !
Alors, oui, Seldell, c'est pas balise, mais un "groupe". En fait, je sais pas trop comment appeler ça, mais je suppose que c'est ce que tu appelles "Instruction".
Sinon, j'utilise pas de PHP, mon site est vraiment très basique.
Maokiel, c'est pas faux, mais comme l'a dit Seldell moi c'était un template que j'ai utilisé. Ceci dit, ma manière de faire ne doit pas être la meilleure, mais bon :')
Après, moi je me rappelle d'avoir utilisé des sites comme GTmetrix ou Unused-CSS, mais le truc c'est qu'ils ne donnent que des stats globalement, ou alors ils ne disent que où sont les erreurs sans les corriger. C'est déjà ça, mais moi je dois en avoir tellement que c'est impossible quoi...
Bonsoir!
Après avoir testé à l'instant Unused-CSS, tu peux te faire envoyer par mail les stats plus détaillé et un aperçu du CSS nettoyé, cependant il faut payer pour avoir toute les fonctionnalités dont le download du fichier... Mais bon c'est mieux que rien !
Aussi attention, il peuvent te mettre qu'une balise n'est pas utile car elle n'est juste pas présente sur la page ! (par exemple sur mon site j'ai tester via la page d'un article qui ne possédait pas de liste à puce, il m'ont considéré la balise ul comme inutile, l'option pour parcourir l’intégralité du site et non une seule page est aussi payante...)
J'ai également testé GTmetrix, tu peux avoir la version "optimiser" du CSS mais la version proposé ne vérifie en rien la redondance d'instruction css ou leurs inutilités mais permet simplement d'optimiser le poids pour accélérer le temps de chargement d'une page.
Sinon j'ai trouver csslint qui, à défauts de proposer une analyse du css selon ta page html, te permet de trouver les redondances et les erreurs dans ton fichiers ce qui est déjà un début! (Cependant le site est contre l'utilisation d'id en temps que sélecteurs par défauts et il mets des warnings à chaque fois, tu peux demander dans les options de ne pas mettre d'erreurs si tu utilises des id) Malheureusement je n'ai rien trouver d'autre du coup je penses coder un ptit logiciel pour faire ça, j'ai déjà fait un programme de mise en forme auto d'html par analyse de balise ça devrait être simple
Un bon IDE peut très bien faire ça pour toi. Par exemple Webstorm de Jetbrains peut analyser des fichiers CSS par rapport à ton projet et te lister les anomalies qu'il détecte, dont les selector CSS inutilisés. Il te propose ensuite de "corriger" ces erreurs, notamment en supprimant les selector non utilisés.
Après, faut toujours être prudent avec ce genre d'outils, qui peuvent parfois être un peu trop gourmand ou au contraire rater des trucs (genre s'il y a du Javascript qui modifie dynamiquement ta page, l'outil va pas le détecter), mais Webstorm en général fait du bon boulot.
Bon par contre, Webstorm est un outil payant, mais avec une période d'essais gratuite de 30 jours (sans limitation de fonctionnalités pendant la période de validité), donc ça devrait être suffisant pour faire ton nettoyage.
Peut-être que des IDE gratuits comme Netbeans ou Eclipse peuvent le faire aussi, mais bon je ne les utilise plus depuis un bon moment donc je ne sais pas s'ils proposent cette fonctionnalité.
Si ça te tente d'utiliser Webstorm, un petit tuto rapide pour faire ce que tu veux, histoire que tu ne cherches pas pendant des heures, avec un petit projet de test (Note : moi j'utilise IDEA IntelliJ, qui est un autre IDE de Jetbrains pour le développement Java, mais qui inclus les fonctionnalités de Webstorm et à une interface quasi identique, donc ça devrait marcher aussi sur Webstorm):
Ouvre ton projet avec Webstorm. Dans mon exemple, j'ai juste 2 pages html, 1 fichier css et un fichier js (clique sur les images pour les avoir en taille réelle).
Il y a donc du code CSS dans le fichier de style, mais aussi dans la page html elle-même (le "breh").
Dans l'explorateur de fichier, sur la racine du projet, ou alors sur le répertoire contenant tes fichiers CSS (si tu veux restreindre les fichiers à analyser), ou alors sur le fichier que tu veux analyser, clique droit > Analyze > Inspect Code.
Laisse l'IDE faire son analyse, et lorsqu'il aura terminé, il fera apparaître un onglet avec les résultats. Il n'y aura pas forcément que des résultats en rapport avec les selectors inutilisés, donc regarde les résultats qui disent "Unused CSS Selector".
Là tu peux soit traiter individuellement par fichier, si tu veux vérifier un peu, soit tu cliques droit sur la racine de l'anomalie "Unused CSS Selector" et tu cliques sur "Apply Fix 'Remove xxxxx'".
L'IDE supprimera tout le code concerné dans les fichiers correspondants.
Tu remarqueras dans mon exemple que l'IDE n'a pas détecté l'ajout au chargement de la page, via Javascript, de la classe "dummy-css", donc il faudra peut-être faire preuve de prudence.
Ha ça serait super utile MrTogimaro !
Edit : Alpha, je te laisse mettre un lien vers ta capture en taille réelle. J'ai limité la taille max d'affichage mais il faudra que je la retire. Elle est un peu trop forte
Trop de stress pour un si petit renard.
Pages