EDIT: vu que live.js fait la même chose en mieux, il n’y a pas de raison de continuer le développement de LiveCss.js
LiveCss.js est une petite bibliothèque javascript qui rafraichie les styles CSS d’une page quasiment en temps réel, sans la recharger. Elle est distribuée sous licence Do what the fuck you want par the Sam et Max incorporation company of the world.
Le plus simple pour l’utiliser est le format bookmarklet. Il suffit de glisser et déposer le lien suivant dans vos favoris :
Quand vous voulez activer LiveCss.js, cliquez sur le favoris. Pour le désactiver, cliquez à nouveau.
Il n’y a rien de plus à faire. Éditez votre CSS comme d’habitude, et au moment de sauvegarder, la page sera mise à jour automatiquement.
ATTENTION
Du fait de la politique de sécurité de certains navigateurs, liveCss.js pourrait ne pas fonctionner avec le protocole file:// (en local). Pour ces navigateurs, on peut contourner le problème en lançant un petit serveur Web à la racine du projet.
Python (nativement installé sur la plupart des systèmes GNU/Linux et Mac OS), vous permet de le faire en une commande:
python -m "SimpleHTTPServer" |
On peut ensuite accéder aux pages à l’adresse http://127.0.0.1:8000
Usage manuel
Si vous avez besoin d’un peu plus de contrôl sur l’exécution de LiveCss.js, vous pouvez inclure la bibliothèque elle même dans la page (mais n’oubliez pas de la retirer avant le passage en prod) :
Ensuite juste en dessous :
<script type="text/javascript">// <![CDATA[
liveCss.start();
// ]]></script> |
C’est tout.
Il y a plusieurs options avec lesquelles on peut jouer :
liveCss.start(); // recharge les fichiers CSS toutes les demies secondes liveCss.stop(); // arrête de recharger les fichiers CSS liveCss.toggle(); // commencer ou arrêter de recharger les fichiers CSS // toggle préserve l'état du plugin si on ne lui passe pas de paramètres // contrairement à start/stop/start liveCss.start({interval: 100}); // recharge les fichiers toutes les secondes // recharge les fichiers CSS dont l'adresse est // "./static/css/style.css" ou "./static/css/ie.css" liveCss.start({stylesheets: ["./static/css/style.css", "./static/css/ie.css"]}); // positioner la petit boite verte qui vous dit quand LiveCss.js est // en train de tourner en bas à droite // (ce doit être au format du positionnement absolu en CSS) liveCss.start({hintPosition: 'right:0;bottom:0'}); |
Ajustez ces paramètres pour avoir un rafraichissement plus rapide. Vous pouvez bien entendu utiliser plusieurs options en même temps.
Notez bien que l’utilisation de debuggers comme Firebug en même temps que LiveCss.js pourrait être lent car ils inspectent la stack alors que LiveCss.js utilise une boucle récursive infinie. C’est utilisable, mais pas aussi rapide que l’expérience habituelle.
Comment ça marche?
La bibliothèque lance une boucle infinie avec un timer entre chaque tour, durant lesquels elle charge chaque fichier CSS en AJAX. A chaque requête, le CSS est dumpé dans un tag de style inline et le noeud de style correspondant est désactivé.
LiveCss.js s’inspire de css_autoreload, le mode watch de less.js et Xrefresh, mais est très jeune en comparaisons. Attendez-vous donc à des bugs, surtout que pour le moment ce n’est testé que sous Firefox.
Comme d’hab, merci de rapporter les bugs, ou de nous notifier si ça marche sous une autre config qu’on puisse l’ajouter à la liste des compatibilités. N’hésitez pas à postez vos success stories en commentaire du genre:
Depuis que j’utilise LiveCss.js, j’ai perdu du poids et je n’ai plus de problème d’érection
.
Bravo à S&M Inc. ! Et merci pour cette commande Python bien pratique :)
Mazette ! ÇA, c’est ce que j’appelle de la comm’ !
Ah, la magie de l’internet.
On cherche un outil sans jamais le trouver, et on finit par le coder. Puis on le poste tout fier le résultat sur reddit.
Et bam, quelqu’un vous apprend en comment que ça existe déjà en mieux:
http://livejs.com/
Ce machin reload les CSS ET le HTML ET le Javascript.
Mais pourquoi on m’a jamais parlé de ce truc avant ?
La vache, ils ont même fait un truc qui permet de sauvegarder le css édité sous firebug:
http://blog.handcraft.com/2010/08/backfire-save-css-changes-made-in-firebug/
En rajoutant ça:
http://wearekiss.com/simpless
Plus de raison de ne pas utiliser less.
Arf, toute ma stack de dev client va encore changer.
Je viens (enfin) de tester et je ne m’attendais pas à ce que cela fonctionne ainsi.
Il y a deux problèmes avec la création de balises styles :
– On se retrouve avec énormément d’élément inutiles (mais ça ça peut se nettoyer)
– Les url sont relatives au document et non plus au fichier css (j’ai fait un script à base de regex qui corrige ça mais en php, si ça vous intéresse demandez ^^)
Du coup je me suis permis de proposer une solution alternative. Peut-être l’avez vous déjà testé et avez rencontré des limitations. En tout cas la solution est toute simple, j’ajoute un paramètre à l’url des css contenant un timestamp ce qui à pour effet de causer un rafraichissement du fichier (c’est ce point qui n’est peut-être pas vrais dans toute les situations, à vérifier). Je vous met le code sur un jsFiddle, il est pas dégrossi, j’ai juste rapidement pris mon plugin boilerplate et y ai posé l’idée. Ne regardez donc pas trop en détail, certaines choses ne marcheront pas (comme l’appel au méthodes publiques très certainement) :
http://jsfiddle.net/cahnory/zefvp/
Avec la découverte de Live.js, je penses qu’on peut tout simplement abandonner livecss.js.
Et bien à vrai dire j’ai testé live.js et ça n’a pas fonctionné. Je ne me suis pas penché plus que ça sur ce qui pouvait poser problème mais du coup c’est pas aussi cross-situation que promis (ce qu’on attend d’un bookmarklet).
Je pense qu’il y a encore matière à travailler.