Aktualisieren Sie das CSS einer Website, ohne die Seite zu aktualisieren

Ich habe eine Seite mit CSS erstellt. Jetzt muss ich von meinem Editor zu meinem Browser wechseln und die ganze Seite aktualisieren, um mir jede kleine Änderung anzusehen. Ich möchte die Seite jedoch nicht aktualisieren, da ich einige Animationen habe.

Gibt es also etwas, das ich verwenden kann, damit meine Website nach einem CSS-Update automatisch aktualisiert wird?
Vielleicht mit JavaScript, jQuery, Ajax oder so?

Hier sind Sie: http://cssrefresh.frebsite.nl/

CSSrefresh ist eine kleine, unauffällige Javascript-Datei, die die auf Ihrer Webseite enthaltenen CSS-Dateien überwacht. Sobald Sie eine CSS-Datei speichern, werden die Änderungen direkt implementiert, ohne dass Sie Ihren Browser aktualisieren müssen.

Fügen Sie einfach die Javascript-Datei ein und es funktioniert!

Aber beachten Sie: Es funktioniert nur, wenn Sie die Dateien auf einem Server haben!

Bearbeiten: LiveStyle

Wenn Sie mit Sublime Text und Google Chrome oder Apple Safari entwickeln, sollten Sie Emmet LiveStyle verwenden . Dies ist ein leistungsfähigerer Live CSS-Reloader.
Jetzt benutze ich es anstelle von CSS Refresh .

Wenn Sie weitere Informationen zu diesem fantastischen Plugin wünschen, lesen Sie bitte den Beitrag von Smashing Magazine

Mit jQuery können Sie eine Funktion erstellen, mit der externe Stylesheets neu geladen werden.

/**
 * 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);
    });
}

Schauen Sie sich http://livereload.com/ an .

Es funktioniert als Browser-Plugin für OS X und Windows. Ich mag es, weil ich kein zusätzliches Javascript einbetten muss, das ich versehentlich in meine Versionskontrolle übernehmen könnte.

Ich finde Browser-Plugins / -Erweiterungen die einfachste Lösung. Sie erfordern keine Codeänderungen an Ihren einzelnen Websites. Und sie können für jede Site im Web verwendet werden - was nützlich ist, wenn ich etwas im Speicher sehr schnell ändere, um eine Symbolleiste auszublenden oder einen Fehler vorübergehend zu beheben. Sobald ich damit fertig bin, kann ich eine Taste drücken und das gesamte CSS ist wieder normal.

Nach der Installation laden (die meisten) neu geladenen CSS-Plugins / -Erweiterungen das CSS nicht automatisch neu. Arbeiten Sie jedoch normalerweise mit einer einfachen Symbolleistenschaltfläche, einem Kontextmenüelement und / oder einem einfachen Tastendruck, um das CSS neu zu laden. Ich finde, diese Methode ist sowieso weniger fehleranfällig und viel weniger kompliziert als einige der automatisierten Lösungen da draußen.

Einige Beispiele (zögern Sie nicht, andere vorzuschlagen):

Chrom:

• tin.cr (beinhaltet das automatische Neuladen und kann Änderungen an Quelldateien im Browser beibehalten )
• CSS-Aktualisierung

Feuerfuchs:

• CSS neu geladen
• CSS-Aktualisierung

Hier ist mein kleines Projekt. Bitte probieren Sie
CSS Auto Reload auf Github aus

Ja, Sie können die CSSVia manipulieren jQuery:

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

Sie können auch die toggleClassMethode verwenden.

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

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

Firebug für FireFox.

Es ist ein Plugin in einem angehängten / separaten Fenster. Änderungen an HTML / CSS werden sofort angezeigt, Elemente werden hervorgehoben.

Der Vorteil gegenüber JS-Hacks besteht darin, dass Sie dies nicht versehentlich in Ihre Produktionsinstanz kopieren können.

Sie suchen nach Live Reload:

Es ist als Browser-Erweiterung verfügbar und einfach zu implementieren

http://livereload.com/

Der neue Open-Source-Code-Editor in Klammern verfügt über eine Live-Entwicklungsfunktion, mit der Sie CSS im Editor bearbeiten können. Diese wird sofort im Chrome-Browser angezeigt. Es funktioniert derzeit nur für die CSS-Bearbeitung, aber die HTML-Bearbeitung kommt bald!

Firebug für Firefox ist meine bevorzugte Methode: https://addons.mozilla.org/de/firefox/addon/firebug/ Sie können HTML und CSS im laufenden Betrieb bearbeiten, CSS-Regeln schnell deaktivieren (ohne sie zu löschen), HTML hinzufügen oder entfernen und so weiter. Wenn Sie Ihr Design nicht optimieren möchten, haben Sie die Wahl. Sie können sogar Änderungen an einer lokalen Kopie speichern, aber ich verwende diese Funktion kaum.

Wenn Sie Firefox verwenden, können Sie die Web Developer Toolbar 1.2.2 über das Add-on von Firefox installieren, das die Option zum Verknüpfen verknüpfter Stylesheets bietet.

Versuchen Sie es mit CSS Brush , einem Chrome-Plugin zum Erstellen von CSS live. Sie müssen nicht alles CSS in einem Texteditor schreiben, zum Browser zurückkehren und es neu laden, sondern das CSS live schreiben, als ob Sie es in einem Texteditor tun würden. Sie haben hier mehr Funktionen als einen Texteditor wie das Kontextmenü, verwenden doppelte Eigenschaften, wählen den vollständigen CSS-Pfad oder einen gefilterten Pfad eines Elements direkt von der Seite aus.

Dies könnte helfen -> Chaicode

Es ist ein Live-CSS-, Javascript- und HTML-Editor, der Open Source und ein Wip ist. Github