J'ai un énorme fichier CSS et un fichier HTML. Je voudrais savoir quelles règles ne sont pas utilisées lors de l'affichage d'un fichier HTML. Existe-t-il des outils pour cela?
Le fichier CSS a évolué au cours des dernières années et d'après ce que je sais, personne n'y a jamais rien supprimé - les gens ont simplement écrit de nouvelles règles primordiales encore et encore.
EDIT: Il a été suggéré d'utiliser les sélecteurs Dust-Me ou l'outil de performances des pages Web de Chrome. Mais ils fonctionnent tous les deux au niveau des sélecteurs et non des règles individuelles. J'ai beaucoup de cas où une règle à l'intérieur d'un sélecteur est toujours remplacée - et c'est ce dont je veux surtout me débarrasser. Par exemple:
body { color: white; padding: 10em; }
h1 { color: black; }
p { color: black; }
...
ul { color: black; }Tout le texte de mon HTML est à l'intérieur d'un élément wrapper, il n'est donc jamais blanc. bodyLe rembourrage de fonctionne toujours, donc bien sûr tout le bodysélecteur ne peut pas être supprimé. Et je voudrais aussi me débarrasser de ces règles inutiles.
EDIT: Et un autre cas de règle inutile: quand il duplique un existant sans rien changer:
a { margin-left: 5px; color: blue; }
a:hover { margin-left: 5px; color: red; }Je me débarrasserais avec plaisir de la seconde margin-left... encore une fois, il me semble que ces outils ne trouvent pas de telles choses.
EDIT: J'apprécie toutes les réponses, mais malheureusement, les outils que vous avez suggérés n'ont fait aucune suggestion utile. J'ai voté pour vos réponses, mais j'attendrai un outil qui fasse les choses de manière plus granulaire, comme spécifié ci-dessus.
Merci,
la source
Réponses:
Extension Firefox de Dust Me Selecters
Dans les outils de développement de Chrome, vous pouvez utiliser l'outil de performances des pages Web pour trouver des règles CSS inutilisées.
la source
.abca une marge différente,<a class="abc">changerait sa marge au survol je pense. Maintenant, ce n'est probablement pas ce que vous envisagez, mais cela pourrait certainement l'être, et vous ne pouvez pas supprimer aveuglément cette règle en double.a.abcou s'il n'y a pas de <a class="abc"/> nulle part dans le HTML, cela n'existe pas. Quoi qu'il en soit, j'ai déjà terminé la tâche qui m'a incité à poser cette question ici, et j'ai terminé avec l'application de beaucoup d'heuristiques. J'ai essayé les outils de développement de Chrome, mais ils ne m'ont pas beaucoup aidé.Vous pouvez également jeter un œil à Unused-CSS.com Cet outil explorera vos pages et construira des fichiers CSS optimisés sans les sélecteurs inutilisés
la source
J'ai toujours aimé l' utilisation de CSS . C'est un plugin pour Firebug et vous permet de parcourir la page et de voir quelles règles CSS ne sont pas appliquées. Il analysera même automatiquement et fonctionnera sur plusieurs pages.
la source
Vérifiez uncss, c'est un module de noeud.
"UnCSS est un outil qui supprime le CSS inutilisé de vos feuilles de style. Il fonctionne sur plusieurs fichiers et prend en charge le CSS injecté par Javascript."
https://www.npmjs.com/package/uncss
Modifier après commentaire:
Je pense que vous demandez deux choses différentes:
Supprimez automatiquement les règles inutilisées, c'est ce que uncss peut faire pour vous. J'ai également créé cet outil, CSS byebye, mais ce n'est pas automatique comme vous le demandez: https://www.npmjs.com/package/css-byebye
Optimisez la feuille de style où les règles peuvent être fusionnées / simplifiées.
Dans ce cas, je recommanderais deux outils qui font ce genre de choses:
Ils font plus ou moins les mêmes optimisations, parfois l'un a de meilleurs résultats que l'autre, et parfois c'est le contraire. Cela dépend de votre feuille de style. (vous pouvez aussi courir l'un après l'autre: P)
Je les utilise dans le cadre d'un processus de construction avec grognement. Ce n'est donc pas vraiment une chose visuelle comme vous le demandez, mais ils font le genre d'optimisations que vous souhaitez.
Voici ce qu'ils disent pour CSSO (informations complètes ici: https://en.bem.info/tools/optimizers/csso/ )
Optimisations structurelles:
la source
@John: excellent outil, merci pour le lien
@liori: Je recommande également fortement le plugin Firefox Web Developer qui vous permet d'afficher les noms / propriétés des éléments, d'éditer le css en temps réel (n'écrit pas dans votre fichier css) afin que vous puissiez éditer et tester les changements css sans faff d'avoir à enregistrer et télécharger votre CSS tous les 3 secondes. + charge plus de fonctionnalités.
Il y a aussi un très bon inspecteur DOM qui se branche sur Firebug qui se branche également et est idéal pour trier Javascript.
la source
En fait, John, le nouveau navigateur Firefox Developer Edition est meilleur que d'utiliser Firebug ou l'utilitaire Firefox. Essayez-le et vous ne serez pas déçu, j'en suis sûr!
https://www.mozilla.org/en-US/firefox/developer/?utm_medium=paidsearch&utm_source=google&utm_campaign=dev-sem-q1-2015
la source