更新網站的CSS而不刷新頁面

Question

我用CSS創建了一個頁面。 現在我必須從我的編輯器更改為我的瀏覽器並刷新整個頁面，只是為了看看每一個小變化。 但我不想刷新頁面，因為我有一些動畫。

那么我有什么可以使用我的網站在CSS更新后自動更新？
也許使用JavaScript，jQuery，Ajax或其他東西？

Answer 1

你在這里： http ： //cssrefresh.frebsite.nl/

CSSrefresh是一個小型，無阻礙的javascript文件，用於監控網頁中包含的CSS文件。 只要保存CSS文件，就可以直接實現更改，而無需刷新瀏覽器。

只需插入javascript文件即可使用！

但請注意：它僅在您擁有服務器上的文件時才有效！

---

編輯：LiveStyle

如果您使用Sublime Text和Google Chrome或Apple Safari進行開發，那么您應該使用Emmet LiveStyle 。 這是一個更強大的Live CSS-Reloader。
現在我使用它而不是CSS Refresh 。

如果您想了解有關此精彩插件的更多信息，請閱讀Smashing Magazine的帖子

Answer 2

使用jQuery，您可以創建一個重新加載外部樣式表的函數。

/**
 * 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 3

看看http://livereload.com/ 。

它可以作為OS X和Windows的瀏覽器插件。 我喜歡它，因為我不必嵌入額外的JavaScript，我可能會在我的版本控制中意外提交。

Answer 4

我發現瀏覽器插件/擴展是最簡單的解決方案。 它們不需要對您的各個站點進行任何代碼更改。 它們可用於網絡上的任何網站 - 如果我在內存中快速修改內容以隱藏工具欄或暫時修復錯誤，這將非常有用; 一旦完成了它，我可以按一個鍵，所有的CSS恢復正常。

安裝后，（大多數）CSS重新加載的插件/擴展不會自動重新加載CSS。 但通常使用簡單的工具欄按鈕，上下文菜單項和/或簡單的按鍵來重新加載CSS。 我發現這種方法不易出錯，並且比那里的一些自動化解決方案復雜得多。

一些例子（隨意提出其他一些）：

鉻：

• tin.cr （包括自動重新加載，並且可以在瀏覽器中保留對源文件的更改）
• CSS刷新

火狐：

• CSS重裝上陣
• CSS刷新

Answer 5

這是我的小項目。 請試一試
CSS在Github上重新加載

Answer 6

是的，你可以通過jQuery操縱CSS ：

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

您還可以使用toggleClass方法。

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

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

Answer 7

FireFox的Firebug。

它是附加/單獨窗口中的插件。 對HTML / CSS的更改立即顯示，元素突出顯示。

JS hacks的優勢在於您無法將此意外復制到生產實例中。

Answer 8

您正在尋找Live Reload：

它可作為瀏覽器擴展，易於實現

http://livereload.com/

Answer 9

新的開源代碼編輯器括號具有實時開發功能，您可以在編輯器中編輯CSS，它將立即反映在Chrome瀏覽器中。 它目前僅適用於CSS編輯，但HTML編輯即將推出！

Answer 10

Firebug for Firefox是我首選的方法： https ： //addons.mozilla.org/de/firefox/addon/firebug/您可以動態編輯HTML和CSS，快速停用CSS規則（不刪除它們），添加或刪除HTML等等。 如果您不想調整您的設計，這是您的選擇。 您甚至可以將更改保存到本地副本，但我幾乎不使用該功能。

Answer 11

這可能會有所幫助 - > chaicode

它是一個實時的CSS，Javascript和HTML編輯器，它是opensource和wip。 github上

Answer 12

如果您使用的是Firefox，則可以從Firefox的附加組件安裝Web Developer Toolbar 1.2.2，它具有Reload Linked Stylesheets選項。

Answer 13

嘗試使用CSS Brush ，一個用於創建CSS live的chrome插件。 您不必在文本編輯器中編寫所有CSS，返回瀏覽器並重新加載它，而是像在文本編輯器中一樣編寫CSS。 您將擁有比文本編輯器更多的功能，如上下文相關菜單，使用重復屬性，直接從頁面選擇完整的CSS路徑或元素的過濾路徑。