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 ?
Vous êtes ici : 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 appliquées, sans devoir rafraîchir votre navigateur.
Il suffit d'insérer le fichier javascript et ça marche !
Mais attention : cela ne fonctionne que si vous avez les fichiers sur un serveur !
Si vous développez avec Texte sublime et Google Chrome ou Apple Safari, alors vous devez utiliser Emmet LiveStyle . Il s'agit d'un convertisseur CSS en direct plus puissant.
Maintenant, je l'utilise à la place de Rafraîchissement de la CSS .
Si vous souhaitez obtenir plus d'informations sur ce formidable plugin, veuillez lire le document suivant Posté par Smashing Magazine
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);
});
}
Jetez un coup d'œil à http://livereload.com/ .
Il fonctionne comme un plugin de navigateur pour OS X et Windows. Je l'apprécie car je ne dois pas intégrer de javascript supplémentaire que je pourrais accidentellement commettre dans mon contrôle de version.
Je trouve que les plugins/extensions de navigateur sont la solution la plus simple. Ils ne nécessitent aucune modification du code de vos sites individuels. Et ils peuvent être utilisés pour n'importe quel site sur le web - ce qui est utile si je modifie rapidement quelque chose en mémoire pour masquer une barre d'outils ou corriger temporairement un bug ; une fois que j'ai fini de m'amuser avec, je peux appuyer sur une touche et tout le CSS revient à la normale.
Une fois installés, (la plupart) des plugins/extensions à rechargement CSS ne rechargent pas le CSS automatiquement. Mais ils fonctionnent généralement avec quelque chose d'aussi simple qu'un bouton de la 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 de toute façon moins sujette aux erreurs et beaucoup moins compliquée que certaines des solutions automatisées qui existent.
Quelques exemples (n'hésitez pas à en suggérer d'autres) :
Chrome :
Firefox :
Voici mon petit projet. Essayez-le, s'il vous plaît.
CSS Auto reload sur Github
Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.
