<!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>
@charset "utf-8";

body{background:#a0b3d6; font-size:84%; margin:0; padding:0; line-height:1.5; color:#333333; font-family: sans-serif;}

a{color:#34538b; text-decoration:none;}a:hover{color:#333333; text-decoration:underline;}

.g9{color:#999;}

#header{height:60px; padding:0 0 0 40px;}

#header .logo{margin-top:12px; overflow:hidden; float:left;}

#main{width:100%; background:#beceeb; overflow:hidden;}

#main h1{line-height:40px; margin:0; text-align:center; font-size:1.3em; background:#c1d5eb; font-family:'楷体','微软雅黑','宋体'; text-shadow:0px 1px 0px #f2f2f2;}

#body{height:610px; background:#fff; overflow:hidden;}

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

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

.now_code .textarea { height: 505px; }

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

.compress_process{width:20%; width:19.9%\9; float:left;}

.prc_x{padding:10px 10px 0 20px;}

.sm_tit{padding:10px 0 10px 10px;}

.start_btn{width:120px; height:28px;}

.mb10{margin-bottom:10px;}

.disabled{opacity: .4;-ms-pointer-events: none;pointer-events: none;}

#footer{padding:15px 0; text-align:center; font-family:'Lucida Grande',Verdana,Arial,Sans-Serif; line-height:1.3; border-top:1px solid #486aaa;}

#footer img{margin-bottom:-3px;}

#ad{position:absolute; right:0; top:0;}


@charset "UTF-8";

/**

 *

 * @Button.css

 * @author zhangxinxu

 * @create 15-06-12

 * @edit   17-06-13

           17-11-07 use png+spin for loading

 */

.ui-button {

  display: inline-block;

  line-height: 20px;

  font-size: 14px;

  text-align: center;

  color: #4c5161;

  border: 1px solid #d0d0d5;

  border-radius: 4px;

  padding: 9px 15px;

  min-width: 50px;

  background-color: #fff;

  background-repeat: no-repeat;

  background-position: center;

  text-decoration: none;

  -webkit-transition: border-color .15s, background-color .15s, opacity .15s;

  transition: border-color .15s, background-color .15s, opacity .15s;

  cursor: pointer;

  overflow: visible; }

.ui-button.error {

  border-color: #f4615c !important; }

div.ui-button {

  display: block; }

button,

[type="button"],

[type="submit"] {

  outline: 0; }

input.ui-button,

button.ui-button {

  height: 20px;

  -ms-box-sizing: content-box;

  box-sizing: content-box; }

.ui-button:hover {

  color: #4c5161;

  border-color: #ababaf;

  text-decoration: none; }

.ui-button-clip {

  width: 0;

  height: 0;

  font-size: 0;

  position: absolute;

  clip: rect(0 0 0 0); }

.ui-button-clip.ui-outline + label.ui-button {

  outline: 1px dotted #2486ff;

  outline: 5px auto -webkit-focus-ring-color; }

.ui-button:not(.disabled):active,

.ui-button:not(.loading):active {

  background-color: #f7f9fa; }

.ui-button.disabled:hover,

.ui-button.loading,

.ui-button.loading:hover {

  color: #4c5161;

  background-color: #fff;

  border-color: #d0d0d5;

  cursor: default; }

.ui-button-primary,

.ui-button-primary.disabled:hover,

.ui-button-primary.loading,

.ui-button-primary.loading:hover {

  border: 1px solid #2486ff;

  background-color: #2486ff;

  color: #fff; }

.ui-button-primary:hover {

  background-color: #0160d5;

  border-color: #0160d5;

  color: #fff; }

.ui-button-primary:not(.disabled):active,

.ui-button-primary:not(.loading):active {

  background-color: #0057c3;

  border-color: #0057c3; }

.ui-button-success,

.ui-button-success.disabled,

.ui-button-success.disabled:hover,

.ui-button-success.loading,

.ui-button-success.loading:hover {

  border: 1px solid #01cf97;

  background-color: #01cf97;

  color: #fff; }

.ui-button-success:hover {

  background-color: #00dba2;

  border-color: #00dba2;

  color: #fff; }

.ui-button-success:not(.disabled):active,

.ui-button-success:not(.loading):active {

  background-color: #00bf8e;

  border-color: #00bf8e; }

.ui-button-warning,

.ui-button-warning.disabled,

.ui-button-warning.disabled:hover,

.ui-button-warning.loading,

.ui-button-warning.loading:hover {

  border: 1px solid #f4615c;

  background-color: #f4615c;

  color: #fff; }

.ui-button-warning:hover,

input.ui-button-warning:focus,

button.ui-button-warning:focus {

  background-color: #ff7772;

  border-color: #ff7772;

  color: #fff; }

.ui-button-warning:not(.disabled):active,

.ui-button-warning:not(.loading):active {

  background-color: #dc5652;

  border-color: #dc5652; }

.ui-button.loading {

  cursor: default;

  -ms-pointer-events: none;

  pointer-events: none;

  color: transparent !important;

  position: relative;

  background-repeat: no-repeat;

  background-position: center; }

.ui-button.loading:before {

  content: '';

  position: absolute;

  width: 20px;

  height: 20px;

  left: 0;

  top: 0;

  right: 0;

  bottom: 0;

  margin: auto;

  background: no-repeat center; }

.ui-button.loading:before,

input.ui-button.loading {

  background-image: url(images/Button/loading.gif); }

.ui-button-primary.loading:before,

input.ui-button-primary.loading {

  background-image: url(images/Button/loading-primary.gif); }

.ui-button-success.loading:before,

input.ui-button-success.loading {

  background-image: url(images/Button/loading-success.gif); }

.ui-button-warning.loading:before,

input.ui-button-warning.loading {

  background-image: url(images/Button/loading-warning.gif); }

/* IE10+ png loading */

.ui-button.loading::before {

  background: url(images/Button/loading-blue.png), linear-gradient(transparent, transparent);

  background-size: 100%;

  -webkit-animation: spin 0.8s linear infinite;

  animation: spin 800ms linear infinite; }

.ui-button-primary.loading::before,

.ui-button-success.loading::before,

.ui-button-warning.loading::before {

  background: url(images/Button/loading-white.png), linear-gradient(transparent, transparent);

  background-size: 100%; }

/* IE8 loading文字隐藏控制-背景色覆盖 */

@media \0screen\,screen\9 {

  .ui-button.loading:before {

    width: auto;

    height: auto;

    background-color: inherit; } }
</style>

</head>

<body>

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

    //一些初始化
    $("oldCode").focus();
    $("showCode").value = "";
    // 上面是快10年前的老代码了，忽略之

    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. Python学习 Part2：深入Python函数定义

    在Python中,可以定义包含若干参数的函数,这里有几种可用的形式,也可以混合使用: 1. 默认参数 最常用的一种形式是为一个或多个参数指定默认值. >>> def ask_ok(p ...

  2. Java基础 使用Properties类

  3. D. Merge Equals（from Educational Codeforces Round 42 (Rated for Div. 2)）

    模拟题,运用强大的stl. #include <iostream> #include <map> #include <algorithm> #include < ...

  4. linux mysql乱码问题

    mysql,发现都是乱码,一堆问号,如下图: 查看mysql编码 需要修改mysql编码,打开/etc/my.cnf 文件 在下边添加如下行 [client] default_character_se ...

  5. Centos 7.x 搭建 Zabbix3.4

    前提要安装了LAMP(官方推荐环境) LNMP也可以 一.安装.配置Zabbix3.4 1:安装zabbix_RPM包 rpm -i https://repo.zabbix.com/zabbix/3. ...

  6. java利用myeclipse自带三大框架搭建三大框架（Hibernate+Struts2+Spring）过程详解

    搭建过程因人而异,我的搭建过程大致是这样的: 1.创建一个javaweb项目: 2.导入Spring框架,上图: 2.1: 2.2: 2.3: 3.导入struts2框架,上图: 3.1: 3.2: ...

  7. JSON对象 JSON字符串 JSON数组

    JSON对象: var str2 = { "name" :  "andy", "gender" : "man" , &q ...

  8. centos安装openldap过程

    1.下载软件如下,db是数据库 2.首先安装数据库db # tar xf db-4.8.30.tar.gz # cd db-4.8.30 # cd build_unix/ (# ../dist/con ...

  9. RTT

    Segger RTT的使用 一般arm系统中,如何通过电脑键盘和显示器同mcu进行交互最有效的有两种形式:arm7的semihost,cm时代的traceswo.现在jlink推出了颇具特色的rtt( ...

  10. jdk1.8源码包下载并导入到开发环境下助推高质量代码(Eclipse、MyEclipse和Scala IDEA for Eclipse皆适用）（图文详解）

    不多说,直接上干货! jdk1.8 源码, Linux的同学可以用的上. 由于源码JDK是前版本的超集, 所以1.4, 1.5, 1.6, 1.7都可以用的上.     其实大家安装的jdk路径下,这 ...