1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta http-equiv="description" content="CSS在线压缩工具，精简CSS文件大小，提高web前端性能" />
    <meta name="description" content="CSS在线压缩工具，精简CSS文件大小，提高web前端性能" />
    <meta name="keywords" content="web前端,css,CSS压缩,工具" />
    <meta name="author" content="张鑫旭,zhangxixnu" />
    <title>CSS在线压缩</title>
    <style>
  1. @charset "utf-8";
  2. body{background:#a0b3d6; font-size:84%; margin:0; padding:0; line-height:1.5; color:#333333; font-family: sans-serif;}
  3. a{color:#34538b; text-decoration:none;}a:hover{color:#333333; text-decoration:underline;}
  4. .g9{color:#999;}
  5. #header{height:60px; padding:0 0 0 40px;}
  6. #header .logo{margin-top:12px; overflow:hidden; float:left;}
  7. #main{width:100%; background:#beceeb; overflow:hidden;}
  8. #main h1{line-height:40px; margin:0; text-align:center; font-size:1.3em; background:#c1d5eb; font-family:'楷体','微软雅黑','宋体'; text-shadow:0px 1px 0px #f2f2f2;}
  9. #body{height:610px; background:#fff; overflow:hidden;}
  10. #body h3{line-height:30px; margin:0; font-size:1.1em; background:#f0f3f9; padding-left:10px; border-bottom:1px solid #ededed; color:#4e4e4e; text-shadow:0px 1px 0px white;}
  11. .textarea{width:96%; height:500px; margin:0 0 0 10px; border:1px solid #a0b3d6; color:#333; font-size:13px; font-family:"Courier New", Courier, monospace; overflow:auto;}
  12. .now_code .textarea { height: 505px; }
  13. .old_code,.now_code{width:40%; height:610px; margin-left:-1px; margin-right:-1px; border-left:1px solid #a0b3d6; border-right:1px solid #a0b3d6; float:left; position:relative;}
  14. .compress_process{width:20%; width:19.9%\9; float:left;}
  15. .prc_x{padding:10px 10px 0 20px;}
  16. .sm_tit{padding:10px 0 10px 10px;}
  17. .start_btn{width:120px; height:28px;}
  18. .mb10{margin-bottom:10px;}
  19. .disabled{opacity: .4;-ms-pointer-events: none;pointer-events: none;}
  20.  
  21. #footer{padding:15px 0; text-align:center; font-family:'Lucida Grande',Verdana,Arial,Sans-Serif; line-height:1.3; border-top:1px solid #486aaa;}
  22. #footer img{margin-bottom:-3px;}
  23. #ad{position:absolute; right:0; top:0;}
  24.  
  1. @charset "UTF-8";
  2. /**
  3.  *
  4.  * @Button.css
  5.  * @author zhangxinxu
  6.  * @create 15-06-12
  7.  * @edit   17-06-13
  8.            17-11-07 use png+spin for loading
  9.  */
  10. .ui-button {
  11.   display: inline-block;
  12.   line-height: 20px;
  13.   font-size: 14px;
  14.   text-align: center;
  15.   color: #4c5161;
  16.   border: 1px solid #d0d0d5;
  17.   border-radius: 4px;
  18.   padding: 9px 15px;
  19.   min-width: 50px;
  20.   background-color: #fff;
  21.   background-repeat: no-repeat;
  22.   background-position: center;
  23.   text-decoration: none;
  24.   -webkit-transition: border-color .15s, background-color .15s, opacity .15s;
  25.   transition: border-color .15s, background-color .15s, opacity .15s;
  26.   cursor: pointer;
  27.   overflow: visible; }
  28.  
  29. .ui-button.error {
  30.   border-color: #f4615c !important; }
  31.  
  32. div.ui-button {
  33.   display: block; }
  34.  
  35. button,
  36. [type="button"],
  37. [type="submit"] {
  38.   outline: 0; }
  39.  
  40. input.ui-button,
  41. button.ui-button {
  42.   height: 20px;
  43.   -ms-box-sizing: content-box;
  44.   box-sizing: content-box; }
  45.  
  46. .ui-button:hover {
  47.   color: #4c5161;
  48.   border-color: #ababaf;
  49.   text-decoration: none; }
  50.  
  51. .ui-button-clip {
  52.   width: 0;
  53.   height: 0;
  54.   font-size: 0;
  55.   position: absolute;
  56.   clip: rect(0 0 0 0); }
  57.  
  58. .ui-button-clip.ui-outline + label.ui-button {
  59.   outline: 1px dotted #2486ff;
  60.   outline: 5px auto -webkit-focus-ring-color; }
  61.  
  62. .ui-button:not(.disabled):active,
  63. .ui-button:not(.loading):active {
  64.   background-color: #f7f9fa; }
  65.  
  66. .ui-button.disabled:hover,
  67. .ui-button.loading,
  68. .ui-button.loading:hover {
  69.   color: #4c5161;
  70.   background-color: #fff;
  71.   border-color: #d0d0d5;
  72.   cursor: default; }
  73.  
  74. .ui-button-primary,
  75. .ui-button-primary.disabled:hover,
  76. .ui-button-primary.loading,
  77. .ui-button-primary.loading:hover {
  78.   border: 1px solid #2486ff;
  79.   background-color: #2486ff;
  80.   color: #fff; }
  81.  
  82. .ui-button-primary:hover {
  83.   background-color: #0160d5;
  84.   border-color: #0160d5;
  85.   color: #fff; }
  86.  
  87. .ui-button-primary:not(.disabled):active,
  88. .ui-button-primary:not(.loading):active {
  89.   background-color: #0057c3;
  90.   border-color: #0057c3; }
  91.  
  92. .ui-button-success,
  93. .ui-button-success.disabled,
  94. .ui-button-success.disabled:hover,
  95. .ui-button-success.loading,
  96. .ui-button-success.loading:hover {
  97.   border: 1px solid #01cf97;
  98.   background-color: #01cf97;
  99.   color: #fff; }
  100.  
  101. .ui-button-success:hover {
  102.   background-color: #00dba2;
  103.   border-color: #00dba2;
  104.   color: #fff; }
  105.  
  106. .ui-button-success:not(.disabled):active,
  107. .ui-button-success:not(.loading):active {
  108.   background-color: #00bf8e;
  109.   border-color: #00bf8e; }
  110.  
  111. .ui-button-warning,
  112. .ui-button-warning.disabled,
  113. .ui-button-warning.disabled:hover,
  114. .ui-button-warning.loading,
  115. .ui-button-warning.loading:hover {
  116.   border: 1px solid #f4615c;
  117.   background-color: #f4615c;
  118.   color: #fff; }
  119.  
  120. .ui-button-warning:hover,
  121. input.ui-button-warning:focus,
  122. button.ui-button-warning:focus {
  123.   background-color: #ff7772;
  124.   border-color: #ff7772;
  125.   color: #fff; }
  126.  
  127. .ui-button-warning:not(.disabled):active,
  128. .ui-button-warning:not(.loading):active {
  129.   background-color: #dc5652;
  130.   border-color: #dc5652; }
  131.  
  132. .ui-button.loading {
  133.   cursor: default;
  134.   -ms-pointer-events: none;
  135.   pointer-events: none;
  136.   color: transparent !important;
  137.   position: relative;
  138.   background-repeat: no-repeat;
  139.   background-position: center; }
  140.  
  141. .ui-button.loading:before {
  142.   content: '';
  143.   position: absolute;
  144.   width: 20px;
  145.   height: 20px;
  146.   left: 0;
  147.   top: 0;
  148.   right: 0;
  149.   bottom: 0;
  150.   margin: auto;
  151.   background: no-repeat center; }
  152.  
  153. .ui-button.loading:before,
  154. input.ui-button.loading {
  155.   background-image: url(images/Button/loading.gif); }
  156.  
  157. .ui-button-primary.loading:before,
  158. input.ui-button-primary.loading {
  159.   background-image: url(images/Button/loading-primary.gif); }
  160.  
  161. .ui-button-success.loading:before,
  162. input.ui-button-success.loading {
  163.   background-image: url(images/Button/loading-success.gif); }
  164.  
  165. .ui-button-warning.loading:before,
  166. input.ui-button-warning.loading {
  167.   background-image: url(images/Button/loading-warning.gif); }
  168.  
  169. /* IE10+ png loading */
  170. .ui-button.loading::before {
  171.   background: url(images/Button/loading-blue.png), linear-gradient(transparent, transparent);
  172.   background-size: 100%;
  173.   -webkit-animation: spin 0.8s linear infinite;
  174.   animation: spin 800ms linear infinite; }
  175.  
  176. .ui-button-primary.loading::before,
  177. .ui-button-success.loading::before,
  178. .ui-button-warning.loading::before {
  179.   background: url(images/Button/loading-white.png), linear-gradient(transparent, transparent);
  180.   background-size: 100%; }
  181.  
  182. /* IE8 loading文字隐藏控制-背景色覆盖 */
  183. @media \0screen\,screen\9 {
  184.   .ui-button.loading:before {
  185.     width: auto;
  186.     height: auto;
  187.     background-color: inherit; } }
  1. </style>
  2.  
  3. </head>
  4.  
  5. <body>
  6.  
  7. <div id="main">
        <h1>CSS在线压缩工具</h1>
        <div id="body">
            <div class="old_code">
                <h3>原始代码</h3>
                <div class="sm_tit">将CSS代码复制到下面的文本域中或者：
                    <input type="file" id="upfile" accept="text/*" hidden>
                    <label for="upfile" class="ui-button ui-button-warning">选择CSS文件</label>
                </div>
                <textarea id="oldCode" class="textarea"></textarea>
            </div>
            <div class="compress_process">
                <h3>处理过程</h3>
                <div class="g9 prc_x">
                    <div class="mb10">
                        <button id="startBtn" class="ui-button ui-button-primary disabled">开始处理</button>
                        <a href="http://www.zhangxinxu.com/php/advise.php">bug提交</a>
                    </div>
                    <div id="first">1. 去除注释</div>
                    <div id="second">2. 去除样式首尾空格</div>
                    <div id="third">3. 去除样式之间空格</div>
                    <div id="forth">4. 去除样式类型后面空格</div>
                    <div id="fifth">5. 去除换行符</div>
                    <div id="sixth">6. 去除末尾分号</div>
                    <div id="seventh">7. IE6 first-letter留空</div>
                </div>
                <div id="saveSize" class="prc_x"></div>
            </div>
            <div class="now_code">
                <h3>处理结果</h3>
                <div class="sm_tit">处理后的CSS代码如下：
                    <a id="downBtn" href="javascript:" class="ui-button ui-button-success disabled" download="未命名.css">下载</a>
                </div>
                <textarea id="showCode" class="textarea"></textarea>
            </div>
        </div>
    </div>
    <script type="text/javascript">
        var $ = function(id){
            return document.getElementById(id);
        };
        $("startBtn").onclick = function(){
            var v_old = $("oldCode").value,v_new;
            var l = v_old.length;
            if(l === 0){
                alert("尚未添加CSS代码");
                return false;
            }
            //this.disabled = "disabled";
            //开始执行压缩
            //去除注释
            v_new = v_old.replace(/\/\*((.|\n|\t)*?)\*\//g,"");
            fnProcess("first");
            //除去首尾空格
            v_new = v_new.replace(/(\s)*{\s*/g,"{").replace(/(\s)*}\s*/g,"}");
            fnProcess("second");
            //去除样式间空格
            v_new  = v_new.replace(/(\s)*;\s*/g,";");
            fnProcess("third");
            //去除样式名称后面空格
            v_new  = v_new.replace(/:(\s)*/g,":");
            fnProcess("forth");
            //去除换行符
            v_new  = v_new.replace(/(\n|\t)+/g,"");
            fnProcess("fifth");
            //去除末尾分号
            v_new  = v_new.replace(/;}/g,"}");
            fnProcess("sixth");
            //IE6下css-letter留空的问题
            if(/first\-letter{/g.test(v_new)){
                v_new  = v_new.replace(/first\-letter{/g,"first-letter {");
                fnProcess("seventh");
            }else{
                $("seventh").style.color = "#999";
                if($("seventh").getElementsByTagName("strong").length > 0){
                    $("seventh").removeChild($("seventh").getElementsByTagName("strong")[0]);
                }
            }
            var nl = v_new.length;
            var savel = l - nl;
            $("saveSize").innerHTML = '原CSS文件大小大约'+fnKbyte(l)+'K<br />现大小大约'+fnKbyte(nl)+'K<br />节约大小约<span style="color:red;">'+fnKbyte(savel)+'K</span>';
            $("showCode").value = v_new;
        };
        var fnProcess = function(id){
            if($(id).getElementsByTagName("strong").length === 0){
                $(id).style.color = "#333";
                var spanNode = document.createElement("strong");
                spanNode.style.color = "green";
                spanNode.innerHTML = "√";
                $(id).appendChild(spanNode);
            }
        };
        var fnKbyte = function(l){
            var k = l / 1024;
            return Math.round(k * 1000) / 1000;
        };
  8.  
  9.     //一些初始化
        $("oldCode").focus();
        $("showCode").value = "";
        // 上面是快10年前的老代码了，忽略之
  10.  
  11.     var eleInput = document.getElementById('oldCode');
        var eleOutput = document.getElementById('showCode');
        var eleStartBtn = document.getElementById('startBtn');
        var eleDownBtn = document.getElementById('downBtn');
        // 上传输入框
        var eleFile = document.getElementById('upfile');
        var reader = new FileReader();
        reader.onload = function (event) {
            eleInput.value = event.target.result;
            eleInput.oninput();
            eleStartBtn.classList.remove('disabled');
            eleStartBtn.click();
            eleOutput.oninput();
            // 改变下载地址
            var blob = new Blob([eleOutput.value]);
            eleDownBtn.href = URL.createObjectURL(blob);
        };
        // 选择文件
        eleFile.onchange = function (event) {
            var file = event.target.files[0];
            if (file) {
                eleDownBtn.setAttribute('download', file.name.replace(/\.css$/, '-min.css'));
                reader.readAsText(file);
            }
        };
        // 按钮禁用UI控制
        eleInput.oninput = function () {
            if (this.value.trim()) {
                eleStartBtn.classList.remove('disabled');
            } else {
                eleStartBtn.classList.remove('disabled');
            }
        };
        eleOutput.oninput = function () {
            if (this.value.trim()) {
                eleDownBtn.classList.remove('disabled');
            } else {
                eleDownBtn.classList.remove('disabled');
            }
        };
    </script>
    </body>
    </html>

CSS在线压缩的更多相关文章

  1. CSS, JavaScript 压缩, 美化, 加密, 解密

    CSS, JavaScript 压缩, 美化, 加密, 解密 JS压缩, CSS压缩, javascript compress, js在线压缩,javascript在线压缩,css在线压缩,YUI C ...

  2. HTML/CSS/Javascript代码在线压缩、格式化(美化)工具

    CSS 格式化 ProCSSor - http://procssor.com/   CSS 压缩 CSS Compressor - http://www.cssdrive.com/index.php/ ...

  3. CSS的压缩 方法与解压

    为什么要压缩CSS? 1.大网站节约流量 2.加快访问速度 工具:Dreamweaver(手工替换,个人感觉任何文本编辑器都可以)不过DW可以还原 CSS压缩与CSS代码压缩还原方法,CSS压缩工具有 ...

  4. 在线压缩zip

    <?php //验证密码 $password = "test"; ?> <html> <head> <meta http-equiv=&q ...

  5. 在线压缩JS的工具

    给大家介绍款在线压缩JS的工具 首先说下该工具的域名:http://javascriptcompressor.com/ 进入后界面如下: 具体要讲下它的功能点:在线压缩 Javascript 源码可以 ...

  6. 开源作品-PHP写的JS和CSS文件压缩利器(单文件绿色版)-SuMinify_PHP_1_5

    前言: 网站项目需要引用外部文件以减小加载流量,而且第一次加载外部资源文件后,其他同域名的页面如果引用相同的地址,可以利用浏览器缓存直接读取本地缓存资源文件,而不需要每个页面都下载相同的外部资源文件. ...

  7. Responsive Web CSS – 在线响应式布局创建器

    如果您已经使用了 CSS 或前端框架,创建响应式布局应该不难. 然而,如果你刚涉足这类布局,Responsive Web CSS 可以帮助你快速上手. 这是一个基于 Web 的工具,使任何人都可以通过 ...

  8. Access数据库在线压缩的实现方法

    如果在 Access 数据库中删除数据或对象,或者在 Access 项目中删除对象,Access 数据库或 Access 项目可能会产生碎片并会降低磁盘空间的使用效率.压缩 Access 数据库或Ac ...

  9. ASP.NET MVC 4 RC的JS/CSS打包压缩功能 (转载)

    ASP.NET MVC 4 RC的JS/CSS打包压缩功能 打包(Bundling)及压缩(Minification)指的是将多个js文件或css文件打包成单一文件并压缩的做法,如此可减少浏览器需下载 ...

随机推荐

  1. [Xcode 实际操作]一、博主领进门-(9)Xcode左侧的项目导航区界面介绍

    目录:[Swift]Xcode实际操作 本文将演示Xcode的左侧操作界面. 项目的目录结构: 应用代理文件[AppDelegate.swift] 应用代理文件时系统运行本应用的委托,里面定义了如程序 ...

  2. [Xcode 实际操作]八、网络与多线程-(8)使用同步Get方式查询某地天气

    目录:[Swift]Xcode实际操作 本文将演示如果通过Get的方式,请求某地天气信息,同步获取网络数据, 一旦发送同步请求,程序将停止用户交互,直至服务器返回数据. 为了增强数据访问的安全性,从9 ...

  3. 【NOI广东省选模拟赛】割

    [问题描述] 给出 n 个数 a1,a2,...,an, 询问有多少个三元组(i, j, k)满足以下两个条件:1. i < j < k: 2. ai*aj*ak 是 p 的倍数. [输入 ...

  4. JSP && Servlet | 上传图片到数据库

    参考博客: https://blog.csdn.net/qiyuexuelang/article/details/8861300 Servlet+Jsp实现图片或文件的上传功能 https://blo ...

  5. JQuery基础知识梳理篇

    这周没事,优化线上项目,因为前端都在赶项目,我又若菜.于是前端数据展示也要自己来.看javascript看到吐,决定梳理一下Jquery基础知识.敲黑板) 闲扯结束,进入正题. 选择器 介绍 jque ...

  6. 新生代内存中为什么要有两个survivor区

    首先是关于新生代中的内存分布的描述: 新生代中的对象都是“朝生夕死”的对象,所以每次gc存活的对象很少,于是在新生代中采用的垃圾回收算法是“复制算法”. 将新生代的内存分为一块较大的Eden区域和两块 ...

  7. 05.Javascript——入门函数

    //定义函数的方法1 function abs(x) { if (x >= 0) { return x; } else { return -x; } } 上述abs()函数的定义如下: func ...

  8. 遍历list集合的三种方式

    List<String> list1 = new ArrayList<String>(); list1.add("1"); list1.add(" ...

  9. wordpress注册收不到邮件

    解决发送问题后又遇到个蛋疼的问题,点击激活邮件地址提示您的密码重设链接无效,请在下方请求新链接发现原来是显的没事的wordpress在激活链接前后都加了<>,而邮箱把后面的>当成是链 ...

  10. ASP.NET Core MVC/WebAPi 模型绑定

    public class Person { public string Name { get; set; } public string Address { get; set; } public in ...