Existe-t-il un moyen simple de recharger css sans recharger la page?

Question

J'essaie de créer un éditeur css en direct avec une fonction de prévisualisation qui permettrait de recharger la feuille de style et de l'appliquer sans avoir à recharger la page. Quelle serait la meilleure façon de s'y prendre?

Answer 1

Peut-être pas applicable à votre situation, mais voici la fonction jQuery que j'utilise pour recharger des 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);
    });
}
 

Answer 2

Sur le "modifier la page", au lieu d'inclure votre code CSS dans la voie normale (avec un <link> tag), d'écrire tout cela à un <style> balise. L'édition de l' innerHTML de la propriété de qui va automatiquement mettre à jour la page, même sans un aller-retour vers le serveur.

<style type="text/css" id="styles">
    p {
        color: #f0f;
    }
</style>

<textarea id="editor"></textarea>
<button id="preview">Preview</button>

Le Javascript, à l'aide de jQuery:

jQuery(function($) {
    var $ed = $('#editor')
      , $style = $('#styles')
      , $button = $('#preview')
    ;
    $ed.val($style.html());
    $button.click(function() {
        $style.html($ed.val());
        return false;
    });
});

Et cela devrait être!

Si vous voulez être vraiment de fantaisie, fixez la fonction de la keydown sur le textarea, bien que vous pourriez obtenir certains effets indésirables (la page serait cesse d'évoluer à mesure que vous tapez)

Edit: testé et fonctionne (dans Firefox 3.5, au moins, devrait cependant être bien avec les autres navigateurs). Voir la démo ici: http://jsbin.com/owapi

Answer 3

Découvrez le projet Vogue d’Andrew Davey - http://aboutcode.net/vogue/

Answer 4

Une solution jQuery supplémentaire

Pour une seule feuille de style avec l'id "css", essayez ceci:

 $('#css').replaceWith('<link id="css" rel="stylesheet" href="css/main.css?t=' + Date.now() + '"></link>');
 

Enveloppez-le dans une fonction qui a une portée globale et vous pourrez l’utiliser à partir de la console pour développeurs sous Chrome ou de Firebug sous Firefox:

 var reloadCSS = function() {
  $('#css').replaceWith('<link id="css" rel="stylesheet" href="css/main.css?t=' + Date.now() + '"></link>');
};
 

Answer 5

Sur la base de précédentes solutions, j'ai créé un signet avec du code JavaScript:

javascript: { var toAppend = "trvhpqi=" + (new Date()).getTime(); var links = document.getElementsByTagName("link"); for (var i = 0; i < links.length;i++) { var link = links[i]; if (link.rel === "stylesheet") { if (link.href.indexOf("?") === -1) { link.href += "?" + toAppend; } else { if (link.href.indexOf("trvhpqi") === -1) { link.href += "&" + toAppend; } else { link.href = link.href.replace(/trvhpqi=\d{13}/, toAppend)} }; } } }; void(0);

L'Image de Firefox:

Que faut-il faire?

Il recharge CSS en ajoutant de la chaîne de requête params (comme les solutions ci-dessus):

• Contenu Du Site.css devient du Contenu du Site.css?trvhpqi=1409572193189 (ajoute de la date)
• Contenu Du Site.css?trvhpqi=1409572193189 devient du Contenu du Site.css?trvhpqi=1409572193200 (changement de date)
• http://fonts.googleapis.com/css?family=Open+Sans:400,300,300 italic,400italic,800italic,800,700 italic,700,600 italic,600&subset=latin,latin-ext devient http://fonts.googleapis.com/css?family=Open+Sans:400,300,300 italic,400italic,800italic,800,700 italic,700,600 italic,600&subset=latin,latin-ext&trvhpqi=1409572193189 (ajoute de nouvelles de la chaîne de requête de paramètre avec la date)