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

Question

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

javascriptjqueryhtmlcssajax

82

我使用CSS创建了一个页面，现在每次想查看每个小改动时都要从编辑器切换到浏览器并且刷新整个页面。但是我不想刷新页面，因为我有一些动画效果。

那么是否有什么方法可以在CSS更新后自动更新我的网站呢？
也许可以用JavaScript、jQuery、Ajax之类的东西吗？

- user1671245

1

你可以使用Chrome的开发者工具包来实时测试网站的更改，如果它能正常工作，你就可以将其添加到你的.css文件中... - Mathlight

大家好。现在我正在寻找同样的东西，但是用于更改HTML文件！有人知道吗？ - user1714425

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

1

+1 给 @TWCrap 的推荐。我经常这样做。 - Parris

13个回答

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);
    });
}

- Sebass van Boxel

感谢您的回答。首先，我尝试了dTDesign的建议，因为它看起来有点简单，因为我不熟悉jquery...但再次感谢。 - user1671245

4

请查看http://livereload.com/。

它是适用于OS X和Windows的浏览器插件。我喜欢它，因为我不需要嵌入额外的JavaScript代码，这可能会意外提交到我的版本控制中。

- Hendrik

4

我认为浏览器插件/扩展是最简单的解决方案。它们不需要对个人站点进行任何代码更改。并且可以用于Web上的任何站点，这在快速修改内存中的内容以隐藏工具栏或暂时修复错误时非常有用；完成操作后，按下键即可将所有CSS恢复正常。

一旦安装，（大多数）CSS重新加载插件/扩展不会自动重新加载CSS。但通常可以使用诸如工具栏按钮、上下文菜单项和/或简单的按键来重新加载CSS。我认为这种方法不容易出错，并且比某些自动化解决方案简单得多。

以下是一些示例（欢迎推荐其他）：

Chrome：

- tin.cr（包括自动重新加载，并且可以将浏览器中的更改保留到源文件中） - CSS Refresh Firefox：

- Jon Adams

3

这是我的小项目，请试用一下
CSS自动重新加载项目。

- Albert Einstein

2

你可以通过 jQuery 来操作 CSS：

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

你也可以使用 toggleClass 方法。 http://api.jquery.com/toggleClass/ http://jqueryui.com/demos/switchClass/

- Darren

但它与Sebass van Boxel相同。我不熟悉jquery... 但还是谢谢 :) - user1671245

2

Firebug是Firefox浏览器的一个插件。

它可以在附加/单独的窗口中使用。HTML/CSS的更改会立即显示，元素也会被高亮显示。

相比JS hack的优点是，您不会意外地将其复制到生产实例中。

- Levente Pánczél

1

您正在寻找Live Reload：

它可以作为浏览器扩展程序使用，并且易于实现。

http://livereload.com/

- Brian Noah

1

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

- jeffslofish

1

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

- Zim84

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Michael Schmidt · Accepted Answer

这是你需要的链接：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发布的文章。