在不刷新页面的情况下更新网站的 CSS

Posted 2023-02-22

【中文标题】在不刷新页面的情况下更新网站的 CSS

【英文标题】：Update the CSS of a Website without refreshing the Page

【发布时间】：2012-09-23 01:44:56

【问题描述】：

我用 CSS 创建了一个页面。现在我必须从我的编辑器切换到我的浏览器并刷新整个页面，只是为了看看每一个微小的变化。但是我不想刷新页面，因为我有一些动画。

那么有什么东西可以让我的网站在 CSS 更新后自动更新？ 也许使用 javascript、jQuery、Ajax 或其他东西？

【问题讨论】：

您可以使用 chrome 的开发者工具包即时测试对您网站的更改，如果它正常工作，您可以将其添加到您的 .css 文件中...

大家好。现在我搜索相同的内容，但要查找 html 文件中的更改！有人吗？

@Karen，请发布一个新问题，因为这需要一个完全不同的答案。

+1 表示@TWCrap 的推荐。我一直这样做。

【参考方案1】：

你在这里：http://cs-s-refresh.frebsite.nl/

CSSrefresh 是一个小型、通畅的 javascript 文件，用于监控网页中包含的 CSS 文件。保存 CSS 文件后，更改会直接实施，无需刷新浏览器。

只需插入 javascript 文件即可！

但请注意：它仅在您将文件放在服务器上时才有效！

---

编辑：LiveStyle

如果您使用 Sublime Text 和 Google Chrome 或 Apple Safari 进行开发，那么您应该使用 Emmet LiveStyle。这是一个更强大的 Live CSS-Reloader。 现在我用它来代替 CSS Refresh。

如果您想了解更多关于这个很棒的插件的信息，请阅读Post by Smashing Magazine

【讨论】：

这很好，但是在将网站部署到生产环境之前不要忘记删除它，否则会给服务器带来相当多的不必要的负载。

@dTDesign，如果这是正确答案，为什么会有赏金？

我在这个论坛上的时间不长。 Firstitried 这是什么，我获得了徽章。而且我没有标记它，因为它需要一些答案，它标记的原因是它需要更多的关注。我的答案不是唯一正确的。

@dTDesign 应该与 Eclipse 一起使用吗？因为我已经测试过并且似乎无法正常工作或者我必须将 js 放在服务器上而不是本地？

@mcmwhfy：在 css 之后插入 js，它只适用于服务器。它也适用于 xampp 或其他东西......

【参考方案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);
    );

【讨论】：

首先感谢您的回答我尝试了 dTDesign 的建议，因为我看起来更容易一些，因为我不熟悉 jquery...但再次感谢

【参考方案3】：

看看http://livereload.com/。

它可以作为 OS X 和 windows 的浏览器插件使用。我喜欢它，因为我不必在我的版本控制中嵌入可能不小心提交的其他 javascript。

【参考方案4】：

我发现浏览器插件/扩展是最简单的解决方案。它们不需要对您的各个站点进行任何代码更改。它们可以用于网络上的任何站点——如果我快速修改内存中的内容以隐藏工具栏或临时修复错误，这将非常有用；一旦完成处理，我可以按一个键，所有的 CSS 都恢复正常。

一旦安装，（大多数）CSS 重新加载插件/扩展不会自动重新加载 CSS。但通常使用一些简单的东西，如工具栏按钮、上下文菜单项和/或简单的按键来重新加载 CSS。无论如何，我发现这种方法不太容易出错，并且比现有的一些自动化解决方案复杂得多。

一些例子（请随意提出其他一些建议）：

铬：

tin.cr（包括自动重新加载，并且可以在浏览器中对源文件进行持久更改） CSS Refresh

火狐：

CSS Reloaded CSS Refresh

【参考方案5】：

这是我的小项目。请尝试一下CSS Auto reload on Github

【参考方案6】：

是的，您可以通过jQuery 操作CSS：

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

您也可以使用toggleClass 方法。

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

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

【讨论】：

坦克。但它和 Sebass van Boxel 一样。我不熟悉 jquery ......但再次感谢 :)

【参考方案7】：

FireFox 的 Firebug。

它是附加/单独窗口中的插件。对 HTML/CSS 的更改会立即显示，元素会突出显示。

相对于 JS hack 的优势在于您不会意外地将其复制到您的生产实例中。

【参考方案8】：

您正在寻找 Live Reload：

它可以作为浏览器扩展使用，易于实现

http://livereload.com/

【参考方案9】：

新的开源代码编辑器brackets具有实时开发功能，您可以在编辑器中编辑 CSS，它会立即反映在 chrome 浏览器中。它目前仅适用于 CSS 编辑，但 HTML 编辑即将推出！

【参考方案10】：

Firebug for Firefox 是我的首选方法： https://addons.mozilla.org/de/firefox/addon/firebug/ 您可以即时编辑 HTML 和 CSS，快速停用 CSS 规则（不删除它们），添加或删除 HTML 等等。如果您不想调整您的设计，这是您的选择。您甚至可以将更改保存到本地副本，但我几乎从不使用该功能。

【参考方案11】：

如果您使用的是 Firefox，那么您可以从 Firefox 的附加组件安装 Web Developer Toolbar 1.2.2，该附加组件具有重新加载链接样式表的选项。

【参考方案12】：

尝试使用CSS Brush，这是一个用于实时创建 CSS 的 chrome 插件。您不必在文本编辑器中编写所有 CSS，返回浏览器并重新加载它，而是像在文本编辑器中一样实时编写 CSS。您将拥有比文本编辑器更多的功能，例如上下文相关菜单、使用重复属性、直接从页面选择完整的 CSS 路径或元素的过滤路径。

【参考方案13】：

这可能会有所帮助 -> chaicode

它是一个实时的 CSS、Javascript 和 HTML 编辑器，是开源和 wip 的。 github

【讨论】：

提供的链接已损坏。