更新网站的CSS,而无需刷新页面

我用CSS创build了一个页面。 现在,我必须从我的编辑器更改到我的浏览器,并刷新整个页面,只是看看每一个小小的变化。 但我不想刷新页面,因为我有一些animation。

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

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

CSSrefresh是一个小型的,不受阻碍的JavaScript文件,用于监控网页中包含的CSS文件。 只要保存CSS文件,就可以直接执行更改,而无需刷新浏览器。

只需插入JavaScript文件,它的工作原理!

但是请注意:只有在服务器上有文件时才能使用!


编辑:LiveStyle

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

如果你想了解更多关于这个真棒插件的信息,请阅读Smashing杂志的文章

使用jQuery,您可以创build一个重新加载外部样式表的函数。

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

看看http://livereload.com/

它可以作为OS X和Windows的浏览器插件。 我喜欢它,因为我不必embedded额外的JavaScript,我可以不小心在我的版本控制提交。

我发现浏览器插件/扩展是最简单的解决scheme。 他们不需要对您的个人网站进行任何代码更改。 而且他们可以用于networking上的任何网站 – 这是有用的,如果我修改内存真的很快隐藏工具栏或临时修复一个错误; 一旦完成了它,我可以按一个键,所有的CSS恢复正常。

一旦安装,(大多数)CSS重新加载插件/扩展不会自动重新加载CSS。 但通常使用简单的工具栏button,上下文菜单项和/或简单的按键来重新加载CSS。 我发现这种方法不太容易出错,而且在那里的一些自动化解决scheme要简单得多。

一些例子(随便推荐一些其他的例子):

铬:

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

火狐:

  • CSS重装上阵
  • CSS刷新

这是我的小项目。 请试一试
CSS自动在Github上重新加载

是的,你可以通过jQuery操纵CSS

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

你也可以使用toggleClass方法。

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

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

FireFox的Firebug。

这是一个附加/单独窗口中的插件。 对HTML / CSS的更改即时显示,元素将突出显示。

JS黑客的优点是你不能无意中复制到你的生产实例。

您正在寻找Live Reload:

它可以作为浏览器扩展并易于实现

http://livereload.com/

新的开源代码编辑器( 括号 )具有实时开发function,您可以在编辑器中编辑CSS,并立即将其反映在Chrome浏览器中。 它目前只适用于CSS编辑,但HTML编辑即将推出!

Firebug for Firefox是我的首选方法: https : //addons.mozilla.org/de/firefox/addon/firebug/您可以随时编辑HTML和CSS,快速停用CSS规则(不删除它们),添加或删除HTML等等。 如果你不想调整你的devise,这是你的select。 您甚至可以将更改保存到本地副本,但我几乎没有使用该function。

如果您使用的是Firefox,那么您可以从Firefox的附加组件中安装Web Developer Toolbar 1.2.2,该组件可以selectReload Linked Stylesheets。

尝试使用CSS Brush ,一个用于创buildCSS的chrome插件。 您不必在文本编辑器中编写所有CSS,回到浏览器并重新加载它,而是像在文本编辑器中那样直接编写CSS。 您将拥有比上下文敏感菜单等文本编辑器更多的function,使用重复的属性,直接从页面select完整的CSSpath或元素的过滤path。

这可能有帮助 – > chaicode

它是一个活的CSS,Javascript和HTML编辑器,是开源和wip。 github上