Mettre à jour le CSS d'un site Web sans rafraîchir la page

Question

J'ai créé une page avec des CSS. Maintenant, je dois passer de mon éditeur à mon navigateur et rafraîchir la page complète, juste pour voir chaque petit changement. Mais je ne veux pas rafraîchir la page, car j'ai des animations.

Y a-t-il quelque chose que je puisse utiliser pour que mon site se mette à jour automatiquement après une mise à jour CSS ?
Peut-être avec JavaScript, jQuery, Ajax ou autre ?

Answer 1

Oui, vous pouvez manipuler le CSS via jQuery :

$(".classToBeReplaced").switchClass( "classToBeReplaced", "newClass", 1000 );

Vous pouvez également utiliser le toggleClass méthode.

http://api.jquery.com/toggleClass/

http://jqueryui.com/demos/switchClass/

Answer 2

Firebug pour FireFox.

C'est un plugin dans une fenêtre attachée/séparée. Les modifications apportées au HTML/CSS apparaissent instantanément, les éléments sont mis en évidence.

L'avantage par rapport aux bidouillages JS est que vous ne pouvez pas copier accidentellement ceci sur votre instance de production.

Answer 3

Cela pourrait aider -> qckMeddler

C'est un éditeur CSS, Javascript et HTML en direct qui est opensource et un wip. github

Answer 4

Vous êtes à la recherche de Live Reload :

Il est disponible sous la forme d'une extension de navigateur et est facile à mettre en œuvre.

http://livereload.com/

Answer 5

Le nouvel éditeur de code open-source, parenthèses , a un Développement en direct qui permet de modifier le CSS dans l'éditeur et de le répercuter immédiatement dans le navigateur Chrome. Actuellement, cela ne fonctionne que pour l'édition CSS, mais l'édition HTML sera bientôt disponible !