web-dev-qa-db-fra.com

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

J'ai créé une page avec CSS. Maintenant, je dois passer de mon éditeur à mon navigateur et actualiser la page entière, 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 peux utiliser que mon site met à jour automatiquement après une mise à jour CSS?
Peut-être avec JavaScript, jQuery, Ajax ou quelque chose?

javascriptjqueryhtmlcssajax
81
user1671245

Vous voici: http://cssrefresh.frebsite.nl/

CSSrefresh est un petit fichier javascript non obstructif qui surveille les fichiers CSS inclus dans votre page Web. Dès que vous enregistrez un fichier CSS, les modifications sont directement implémentées, sans avoir à rafraîchir votre navigateur.

Insérez simplement le fichier javascript et cela fonctionne!

Mais notez: cela ne fonctionne que lorsque vous avez les fichiers sur un serveur!

Modifier: LiveStyle

Si vous développez avec Sublime Text et Google Chrome ou Apple Safari, vous devez utiliser Emmet LiveStyle =. Ceci est un Reloader Live CSS plus puissant.
Maintenant, je l'utilise au lieu de Actualisation CSS .

Si vous voulez plus d'informations sur ce plugin génial, veuillez lire le Post by Smashing Magazine

80
Michael Schmidt

Avec jQuery, vous pouvez créer une fonction qui recharge les feuilles de style externes.

/**
 * Forces a reload of all stylesheets by appending a unique query string
 * to each stylesheet URL.
 */
function reloadStylesheets() {
    var queryString = '?reload=' + new Date().getTime();
    $('link[rel="stylesheet"]').each(function () {
        this.href = this.href.replace(/\?.*|$/, queryString);
    });
}
11
Sebass van Boxel

Jetez un oeil à http://livereload.com/ .

Il fonctionne comme un plugin de navigateur pour OS X et Windows. Je l'aime parce que je n'ai pas à intégrer de javascript supplémentaire que je pourrais accidentellement commettre dans mon contrôle de version.

4
Hendrik

Je trouve que les plugins/extensions de navigateur sont la solution la plus simple. Ils ne nécessitent aucune modification de code sur vos sites individuels. Et ils peuvent être utilisés pour n'importe quel site sur le Web - ce qui est utile si je modifie quelque chose en mémoire très rapidement pour masquer une barre d'outils ou corriger un bogue temporairement; une fois le nettoyage terminé, je peux appuyer sur une touche et tout le CSS est revenu à la normale.

Une fois installés, (la plupart) des plugins/extensions CSS rechargés ne rechargent pas automatiquement le CSS. Mais généralement, travaillez avec quelque chose d'aussi simple qu'un bouton de barre d'outils, un élément de menu contextuel et/ou une simple pression sur une touche pour recharger le CSS. Je trouve que cette méthode est moins sujette aux erreurs de toute façon et est beaucoup moins compliquée que certaines des solutions automatisées.

Quelques exemples (n'hésitez pas à en suggérer d'autres):

Chrome:

  • tin.cr (inclut le rechargement automatique et peut persister les modifications dans le navigateur des fichiers source)
  • Actualisation CSS

Firefox:

4
Jon Adams

Voici mon petit projet. Veuillez essayer
Rechargement automatique CSS sur Github

3
Albert Einstein

Oui, vous pouvez manipuler le CSS via jQuery:

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

Vous pouvez également utiliser la méthode toggleClass.

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

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

2
Darren

Firebug pour FireFox.

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

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

2
Levente Pánczél

Le nouvel éditeur de code open-source, crochets , a une fonctionnalité de développement en direct où vous pouvez modifier CSS dans l'éditeur et sera immédiatement reflété dans le navigateur chrome. Il ne fonctionne actuellement que pour l'édition CSS, mais l'édition HTML arrive bientôt!

1
jeffslofish

Firebug pour Firefox est ma méthode préférée: https://addons.mozilla.org/de/firefox/addon/firebug/ Vous pouvez modifier HTML et CSS à la volée, désactiver rapidement les règles CSS (sans supprimer eux), ajoutez ou supprimez du HTML, etc. Si vous ne souhaitez pas modifier votre conception, c'est votre choix. Vous pouvez même enregistrer des modifications sur une copie locale, mais je n'utilise presque jamais cette fonctionnalité.

1
Zim84

Vous recherchez Live Reload:

Il est disponible en tant qu'extension de navigateur et facile à mettre en œuvre

http://livereload.com/

1
Brian Noah

Cela pourrait aider -> chaicode

C'est un éditeur CSS, Javascript et HTML en direct qui est open source et un essuyage. github

0
zeusdeux

Si vous utilisez Firefox, vous pouvez installer Web Developer Toolbar 1.2.2 à partir du module complémentaire de Firefox qui a l'option de recharger les feuilles de style liées.

0
Kunal

Essayez d'utiliser CSS Brush , un chrome pour créer des CSS en direct. Vous n'avez pas besoin d'écrire tous les CSS dans un éditeur de texte, de revenir au navigateur et de le recharger) , écrivez plutôt le CSS en direct comme si vous le faisiez dans un éditeur de texte. Vous aurez ici plus de fonctionnalités qu'un éditeur de texte comme le menu contextuel, utilisez les propriétés en double, sélectionnez le chemin CSS complet ou le chemin filtré d'un élément directement à partir de la page.

0
ramu