<!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. 求无向图的割点和桥模板(tarjan)

    一.基本概念 1.桥:若无向连通图的边割集中只有一条边,则称这条边为割边或者桥 (离散书上给出的定义.. 通俗的来说就是无向连通图中的某条边,删除后得到的新图联通分支至少为2(即不连通: 2.割点:若 ...

  2. 进击python第三篇：基础

    基础拾遗 序列解包 例: >>>x,y,z=1,2,3 >>>print x,y,z 1 2 3 交换变量也是没问题 >>>x,y=y,x > ...

  3. 字符串最小表示初探 By cellur925

    我们考虑有一个字符串,可以从这个字符串的不同位置出发,把这个字符串大声朗读出来,当到字符串末端的时候再从头开始读,直到回到"梦开始的地方". 设字符串长度为\(n\),那么有\(n ...

  4. Java的理解

    研发的工作就是写代码,我们通常写的都是java的类.这个东东计算机是无法识别的,所以需要需要一个东东帮我们做转化,这个就是编译器, 将java转换成class,但是class文件还不是二进制文件不是0 ...

  5. ACM2015沈阳:B-Bazinga

    2019.1.24 数据范围:\(n<=500,m<=2000\) 这个题最裸的暴力就是对于每个字符串,都去验证一次,时间复杂度\(O(n^2m)\) 我们发现,如果对于字符串\(i\), ...

  6. C# 对DataTable中按条件进行筛选和更新。

    当我们频繁的对数据库进行操作时,可能造成CPU使用率过高,这时我们可以先将数据表读取到DataTable,然后在必要的时候再更新到数据库中. 以下是DataTable中对数据的选择和更新操作.采用Da ...

  7. [題解]luogu_P1613跑路（最短路/倍增）

    首先要知道不能跑最短路,因為只有整2^k才能一秒到達,和倍增有關 所以我們想知道任意兩點間能否存在一條2^k長度的路徑,數據很小,可以考慮floyd 把倍增和floyd結合起來考慮發現如果i到k,k到 ...

  8. tensorflow：实战Google深度学习框架第四章01损失函数

    深度学习:两个重要特性:多层和非线性 线性模型:任意线性模型的组合都是线性模型,只通过线性变换任意层的全连接神经网络与单层神经网络没有区别. 激活函数:能够实现去线性化(神经元的输出通过一个非线性函数 ...

  9. 【aspnetcore】异常捕捉可用知识点

    1.使用过滤器ExceptionFilter:补充:常用过滤器:AuthorizationFilter.ActionFilter.ResultFilter.ResourceFilter.Excepti ...

  10. 牛客网Java刷题知识点之Java为什么不能支持多继承，但可以用接口来间接实现多继承

    不多说,直接上干货! java只支持单继承,这是由于安全性的考虑,如果子类继承的多个父类里面有相同的方法或者属性,子类将不知道具体要继承哪个,而接口可以多实现,是因为接口只定义方法,而没有具体的逻辑实 ...