J'ai eu ce problème pour toujours, et j'ai finalement décidé que nous ne devions pas éditer des choses dans l'inspecteur Web et construit quelque chose pour cela ( https://github.com/viatropos/design.io ).
Une meilleure solution:
Le navigateur reflète automatiquement les modifications CSS sans recharger lorsque vous appuyez sur Enregistrer dans votre éditeur de texte .
La principale raison pour laquelle nous éditons le css dans l'inspecteur Web (j'utilise webkit, mais FireBug va dans le même sens) est que nous devons faire de petits ajustements et que le rechargement de la page prend trop de temps.
Il y a 2 problèmes principaux avec cette approche. Tout d'abord, vous êtes autorisé à modifier un élément individuel qui peut ne pas avoir de idsélecteur. Ainsi, même si vous pouviez copier / coller le CSS généré à partir de l'inspecteur Web, il devrait générer un idpour définir la portée du css. Quelque chose comme:
#element-127 {
background: red;
}
Cela commencerait à mettre votre css en désordre.
Vous pouvez contourner cela en changeant uniquement les styles d'un sélecteur existant (le .spacesélecteur de classe dans l'image de l'inspecteur Webkit ci-dessous).
Pourtant, le deuxième problème. L'interface de cette chose est assez rude, il est difficile de faire de grands changements - comme si vous voulez essayer de copier très rapidement ce bloc de css à cet endroit, ou autre.
Je préfère m'en tenir à TextMate.
L'idéal serait d'écrire simplement le CSS dans votre éditeur de texte et de laisser le navigateur refléter les modifications sans recharger la page . De cette façon, vous écrivez votre css final pendant que vous apportez les petits changements.
Le niveau suivant serait d'écrire dans un langage CSS dynamique, comme Stylus, Less, SCSS, etc., et de mettre à jour le navigateur avec le CSS généré. De cette façon, vous pouvez commencer à créer des mixins comme box-shadow(), qui résorbent les complexités, ce que l'inspecteur Web ne peut certainement pas faire.
Il y a quelques choses qui font ça, mais rien ne le rationalise vraiment à mon avis.
- LiveReload : pousse le css vers le navigateur sans actualiser lorsque vous appuyez sur Enregistrer, mais c'est une application Mac , donc ce serait difficile à personnaliser.
- CodeKit : également une application Mac, mais elle actualise le navigateur à chaque fois que vous enregistrez.
Ne pas avoir la possibilité de personnaliser facilement leur fonctionnement est la principale raison pour laquelle je ne les ai pas utilisés.
J'ai mis en place https://github.com/viatropos/design.io spécifiquement pour résoudre ce problème, et en faire ainsi:
- Le navigateur reflète le css / js / html / etc à chaque fois que vous enregistrez, sans recharger la page
- Il peut gérer n'importe quel modèle / langage / framework (Stylus, Less, CoffeeScript, Jade, Haml, etc.)
- Il est écrit en JavaScript et vous pouvez créer des extensions très rapidement en JavaScript.
De cette façon, lorsque vous devez apporter ces petits changements au CSS, vous pouvez dire, définir la couleur d'arrière-plan, appuyer sur Enregistrer, voir non, pas tout à fait, ajuster la teinte par 10, enregistrer, non, ajuster par 5, enregistrer, ça a l'air bien.
La façon dont cela fonctionne est de regarder chaque fois que vous enregistrez un fichier (au niveau du système d'exploitation), de traiter le fichier (c'est là que fonctionnent les extensions) et de pousser les données vers le navigateur via des websockets, qui sont ensuite gérées (côté client de l'extension).
Pas à brancher ou quoi que ce soit, mais j'ai lutté avec ce problème pendant longtemps.
J'espère que cela pourra aider.
