3

介绍：cssrefresh.js-CSS文件自动刷新

 3 years ago
source link: https://www.zhangxinxu.com/wordpress/2012/03/cssrefresh-js-automatically-refresh-css-files-%e8%87%aa%e5%8a%a8%e5%88%b7%e6%96%b0/
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.

by zhangxinxu from http://www.zhangxinxu.com
本文地址：http://www.zhangxinxu.com/wordpress/?p=2299

一、cssrefresh.js是什么

官方地址为：http://cssrefresh.frebsite.nl/

cssrefresh.js可以实现如下的功能：当你CSS文件修改的时候，无需刷新页面，页面自动呈现新样式。

二、为何需要cssrefresh.js

可以节约时间，提高开发效率，尤其对于经验不足，需要不断调试的开发人员。

设想如下一个场景：IE浏览器下，文本框与文字死活对不齐，不清楚根本原因的我们，肯定会vertical-align相关属性，margin相关值，或是借助float这类搓方法等依次尝试，此时，cssrefresh.js可谓相当有用。

左半屏IE浏览器，右半屏编辑工具（双屏开发则双屏）。我们只要处理编辑工具中的CSS文件即可，改一下，Ctrl+S保存下，左边浏览器直接就是改动后的结果，类似于Firebug的即时显示。而无需不断来回激活编辑工具与浏览器窗口，Ctrl+S与F5之间切换按键。这累积节约的时间可不是一点半点……

三、如何使用cssrefresh.js

使用很简单，类似下面的代码：

<head>
   <link rel="stylesheet" type="text/css" href="css/site.css" />
   <script type="text/javascript" src="js/cssrefresh.js"></script>
</head>

就OK了。此时，只要site.css做了一点修改，页面就会即时反应出该修改。

注意：只有在cssrefresh.js之前包含的CSS文件才会自动刷新！

四、cssrefresh.js效果直观演示

为了有直观认识，我稍稍折腾了下，制作了个demo，您可以狠狠地点击这里：cssrefresh脚本与页面颜色自动刷新demo

当您首次进入这个页面的时候，看到的文字颜色（每个人看到的可能不一样）为最近一次某使用者修改后的颜色。例如，作为亚当的我进入这个页面，为默认的#333颜色，如下截图所示：

2012-03-19_190849.png

因为写这篇文章的时候，该链接地址并未公布，因此，即使我一直盯着这个demo,直到眼睛生出老茧，这个页面的文字还是#333. 但是，现在正在查看本文，正在观摩该demo页面的你情况就不一样了，因为很有可能有用户跟你同一时间查看并操作该demo，因此，您可能会遇到这样的情况：正兴致勃勃地阅读上面森林失火的新闻，突然文字颜色一下子变成了高贵的紫色……

当然，按照我每篇文章的日访问量，这个情况只会出现在发布后的头一两天。大部分情况下，是落花有意流水无情，您只得手动修改CSS文件，查看前后的变化咯！

如下，输入你希望变化的颜色（为CSS color属性支持的属性值，不支持RGB，HSL等格式），例如，我输入个#F30，点击确定按钮，结果，很快，上面的文字变成橙红色咯！

2012-03-19_191908.png
2012-03-19_191946.png
2012-03-19_192046.png

demo原理简述
点击确定按钮，输入的颜色值会以ajax形式发送到某PHP文件上，这个PHP文件（核心代码见下面）会根据获得的颜色值重写CSS文件中的CSS代码：

<?php
    $color = $_GET['color'];
    if (isset($color)) {
        // 如果有颜色
        // 修改cssrefresh.css文件中的CSS代码
        $file = 'cssrefresh.css';
        $data = '.color{color:'. $color .';}';
        file_put_contents ($file, $data);
    }
?>

然后，CSS文件一修改，cssrefresh.js就会把改动后的CSS重新载入，于是，效果就出来啦！哦呵呵~~lxhxixi_thumb.gif

（本篇完）1f44d.svg 是不是学到了很多？可以分享到微信！
1f44a.svg 有话要说？点击这里。


report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK