我用CSS创建了一个页面。现在,我必须从编辑器更改为浏览器,并刷新整个页面,以查看每一个小的更改。但是我不想刷新页面,因为我有一些动画。
那么,有什么我可以用来在CSS更新之后自动更新我的网站的信息吗?
也许使用JavaScript,jQuery,Ajax等?
Answers:
您在这里:http : //cssrefresh.frebsite.nl/
CSSrefresh是一个小的,无障碍的javascript文件,它监视网页中包含的CSS文件。保存CSS文件后,更改将直接实现,而无需刷新浏览器。
只需插入javascript文件即可使用!
但请注意:仅当服务器上有文件时,它才起作用!
如果您使用Sublime Text和Google Chrome或Apple Safari开发,则应使用Emmet LiveStyle。这是一个功能更强大的Live CSS-Reloader。
现在,我用它代替CSS Refresh。
如果您想了解有关此插件的更多信息,请阅读Smashing Magazine的Post
使用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);
});
}
它充当OS X和Windows的浏览器插件。我喜欢它,因为我不必嵌入可能会意外提交到版本控制中的其他JavaScript。
我发现浏览器插件/扩展是最简单的解决方案。他们不需要对您的各个站点进行任何代码更改。它们可以用于网络上的任何站点,这在我快速修改内存中的内容以隐藏工具栏或临时修复错误时非常有用。完成处理后,我可以按一个键,所有CSS都恢复正常。
安装后,(大多数)CSS重新加载的插件/扩展不会自动重新加载CSS。但是通常可以使用诸如工具栏按钮,上下文菜单项和/或简单的按键之类的简单操作来重新加载CSS。我发现这种方法无论如何都不太容易出错,并且比某些自动化解决方案复杂得多。
一些示例(可以建议其他示例):
铬:
Firefox:
是的,您可以操纵CSS
via jQuery
:
$(".classToBeReplaced").switchClass( "classToBeReplaced", "newClass", 1000 );
您也可以使用该toggleClass
方法。
Firefox的Firebug是我的首选方法:https : //addons.mozilla.org/de/firefox/addon/firebug/ 您可以即时编辑HTML和CSS,快速停用CSS规则(无需删除它们),添加或删除HTML等等。如果您不想调整设计,这就是您的选择。您甚至可以将更改保存到本地副本,但是我几乎从未使用过该功能。