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


81

我用CSS创建了一个页面。现在,我必须从编辑器更改为浏览器,并刷新整个页面,以查看每一个小的更改。但是我不想刷新页面,因为我有一些动画。

那么,有什么我可以用来在CSS更新之后自动更新我的网站的信息吗?
也许使用JavaScript,jQuery,Ajax等?


1
您可以使用Chrome的developerstoolkit测试的变化就飞到你的网站,如果它的工作,你可以把它添加到您的.css文件...
Mathlight

大家好。现在,我搜索相同的内容,但要查找HTML文件中的更改!任何人?

@Karen,请发布一个新问题,因为这将需要一个完全不同的答案。
AMK 2012年

1
为TWCrap的推荐+1。我一直都这样。
帕里斯

Answers:


81

您在这里:http : //cssrefresh.frebsite.nl/

CSSrefresh是一个小的,无障碍的javascript文件,它监视网页中包含的CSS文件。保存CSS文件后,更改将直接实现,而无需刷新浏览器。

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

但请注意:仅当服务器上有文件时,它才起作用!


编辑:LiveStyle

如果您使用Sublime Text和Google Chrome或Apple Safari开发,则应使用Emmet LiveStyle。这是一个功能更强大的Live CSS-Reloader。
现在,我用它代替CSS Refresh

如果您想了解有关此插件的更多信息,请阅读Smashing MagazinePost


8
这很好,但是在将网站部署到生产环境之前,您一定不要忘记删除它,否则会在服务器上施加很多不必要的负载。
巴兹(Bazzz)2012年

1
真的很棒。
达哈尔

1
@dTDesign,如果这是正确的答案,为什么会有赏金呢?
AMK 2012年

我在这个论坛上的时间不多。首先,这是什么,我获得了徽章。而且我不标记它导致需要一些答案,它标记的原因需要更多的注意。我的答案不是唯一正确的答案。
Michael Schmidt 2012年

2
@mcmwhfy:在CSS之后插入js,它仅在服务器上起作用。它也适用于xampp或其他东西……
Michael Schmidt

11

使用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不熟悉...但是再次感谢


4

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

安装后,(大多数)CSS重新加载的插件/扩展不会自动重新加载CSS。但是通常可以使用诸如工具栏按钮,上下文菜单项和/或简单的按键之类的简单操作来重新加载CSS。我发现这种方法无论如何都不太容易出错,并且比某些自动化解决方案复杂得多。

一些示例(可以建议其他示例):

铬:

  • tin.cr(包括自动重新加载,并且可以持久保留浏览器中对源文件的更改)
  • CSS刷新

Firefox:




2

FireFox的Firebug。

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

与JS hacks相比,优点是您不能将其意外复制到生产实例中。



1

新的开源代码编辑器方括号具有实时开发功能,您可以在该功能中编辑CSS,并将CSS直接反映在chrome浏览器中。目前仅适用于CSS编辑,但是HTML编辑即将推出!


1

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


0

如果您使用的是Firefox,则可以从Firefox的附件安装Web Developer Toolbar 1.2.2,该工具具有“重新加载链接的样式表”选项。


0

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


By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.