更新网站的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路径或元素的过滤路径。