我用 CSS 创建了一个页面。现在我必须从我的编辑器切换到我的浏览器并刷新整个页面，只是为了看看每一个微小的变化。但我不想刷新页面，因为我有一些动画。
那么，在 CSS 更新后，我的网站会自动更新吗？
也许使用 JavaScript、jQuery、Ajax 或其他东西？
user1671245
问问题
17792 次
13 回答
82
你在这里：http ://cssrefresh.frebsite.nl/
CSSrefresh 是一个小型的、通畅的 javascript 文件，用于监控网页中包含的 CSS 文件。保存 CSS 文件后，更改会直接实施，无需刷新浏览器。
只需插入 javascript 文件，它就可以工作了！
但请注意：仅当您在服务器上有文件时它才有效！
编辑：生活风格
如果您使用Sublime Text和 Google Chrome 或 Apple Safari 进行开发，那么您应该使用Emmet LiveStyle。这是一个更强大的 Live CSS-Reloader。
现在我用它代替CSS Refresh。
如果您想了解更多关于这个很棒的插件的信息，请阅读Smashing Magazine 的帖子
于 2012-10-02T07:48:02.023 回答
10
使用 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);
});
}
于 2012-10-02T07:48:24.923 回答
4
它作为 OS X 和 windows 的浏览器插件工作。我喜欢它，因为我不必在我的版本控制中嵌入可能不小心提交的额外 javascript。
于 2012-10-07T20:59:13.347 回答
4
我发现浏览器插件/扩展是最简单的解决方案。它们不需要对您的各个站点进行任何代码更改。它们可以用于网络上的任何站点——如果我快速修改内存中的内容以隐藏工具栏或临时修复错误，这将非常有用；完成处理后，我可以按一个键，所有 CSS 都恢复正常。
安装后，（大多数）CSS 重新加载插件/扩展不会自动重新加载 CSS。但通常使用一些简单的东西，如工具栏按钮、上下文菜单项和/或简单的按键来重新加载 CSS。我发现这种方法无论如何都不太容易出错，并且比那里的一些自动化解决方案要简单得多。
一些例子（随意提出一些其他的）：
铬合金：
火狐：
于 2012-10-11T02:15:42.123 回答
3
这是我的小项目。请在 Github 上尝试一下
CSS Auto reload
于 2012-10-11T08:11:44.970 回答
2
FireFox 的萤火虫。
它是附加/单独窗口中的插件。对 HTML/CSS 的更改会立即出现，元素会突出显示。
JS hacks 的优势在于您不能意外地将其复制到您的生产实例中。
于 2012-10-13T19:32:38.117 回答
2
是的，您可以操纵CSSvia jQuery：
$(".classToBeReplaced").switchClass( "classToBeReplaced", "newClass", 1000 );
您也可以使用该toggleClass方法。
于 2012-10-02T07:50:29.443 回答
1
于 2012-10-12T05:41:41.470 回答
1
新的开源代码编辑器，括号，具有实时开发功能，您可以在编辑器中编辑 CSS，它会立即反映在 chrome 浏览器中。它目前仅适用于 CSS 编辑，但 HTML 编辑即将推出！
于 2012-10-14T05:57:42.753 回答
1
Firebug for Firefox 是我的首选方法： https ://addons.mozilla.org/de/firefox/addon/firebug/ 您可以即时编辑 HTML 和 CSS，快速停用 CSS 规则（不删除它们），添加或删除 HTML等等。如果您不想调整您的设计，这是您的选择。您甚至可以将更改保存到本地副本，但我几乎从未使用过该功能。
于 2012-10-14T20:24:15.293 回答
0
如果您使用的是 Firefox，那么您可以从 Firefox 的附加组件安装 Web Developer Toolbar 1.2.2，该附加组件具有重新加载链接样式表的选项。
于 2012-10-15T10:10:58.743 回答
0
尝试使用CSS Brush，一个用于实时创建 CSS 的 chrome 插件。您不必在文本编辑器中编写所有 CSS，返回浏览器并重新加载它，而是像在文本编辑器中那样实时编写 CSS。您将拥有比文本编辑器更多的功能，例如上下文相关菜单、使用重复属性、直接从页面选择完整的 CSS 路径或元素的过滤路径。
于 2015-01-16T22:22:04.537 回答