CSS在线压缩

<!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>

原文地址：https://www.cnblogs.com/xieyongbin/p/10967159.html

时间： 2024-10-15 05:55:24

CSS在线压缩的相关文章

在线压缩zip

<?php //验证密码 $password = "test"; ?> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>映阳网络在线ZIP压缩程序</title> <style type="text/css"> &

开源作品-PHP写的JS和CSS文件压缩利器-SuMinify_PHP_1_5

前言: 网站项目需要引用外部文件以减小加载流量,而且第一次加载外部资源文件后,其他同域名的页面如果引用相同的地址,可以利用浏览器缓存直接读取本地缓存资源文件,而不需要每个页面都下载相同的外部资源文件.外部资源文件有一些是第三方插件,有一些是自己写的业务功能脚本,项目引用这些外部文件,需要把没有压缩过的第三方插件压缩后再引用,而自己的业务功能脚本,有的做成插件形式,引用一个功能脚本,需要同时引用若干个脚本文件,因此需要把这些脚本文件合并成一个压缩文件再引用,这样可以减少HTTP请求次数,减少这些外

掌握在线压缩PDF小技巧，文件多大都没事

在工作学习中我们经常会将文件保存为PDF格式,从网络上下载的资料.论文.小说什么的也基本是PDF格式,不管文件多大,我们用自己的设备查看基本没啥问题.不过当把文件传输给同事.客户查看时,文件如果太大就会影响传输速度,耽误工作:而且当你想将一份较大PDF文件上传云盘的时候,除非你是云盘会员,不然上传速度慢,下载速度更慢,非常浪费时间. 所以今天小编就介绍一个在线压缩PDF的小技巧,简单易学,完美解决PDF文件过大问题. 首先打开在线PDF文档处理平台--PDF365.cn 接着点击"PDF压缩&q

图片文件如何进行在线压缩，在线压缩的方法

图片怎么进行压缩,而且还是在线的压缩,很多的时候我们会遇到各种各样的图片文件,随着时间一长,图片增加,我们的电脑手机就有卡顿的情况,图片不可以删除的话可以进行在线压缩,下面教给大家一种在线压缩软件的操作方法. 1:首先在浏览器搜索图片压缩,找到一个图片压缩网站,进入到网站的首页. 2:进入到首页后,在首页导航栏的位置找到文档处理,在文档处理的底部位置可以看到图片压缩. 3:点击图片压缩进入到压缩的页面,进入压缩页面后,点击选择文件,选择需要进行压缩的图片文件. 4:选择文件后,在选择文件下面可以

怎么在线压缩PDF文件

时下PDF文件用的人是越来越多了,不仅仅是因为他的方便功能强大等优点,更是因为他的安全保密性十分强劲.但是就是因为他的安全保密导致了PDF文件不易压缩,有没有可以减小PDF文件的尺寸,减少PDF文件的占用内存和保持好的质量的在线压缩PDF的方法呢,今天就给大家分享一个简单高效的方法.一.打开电脑进入浏览器,点开迅捷在线压缩网站.二.首页可以看到它有三个在线压缩功能,点击选择那个我们需要的在线PDF压缩进入到PDF压缩页面三.进入PDF压缩界面,可以看到中间有一个点击添加文件,在弹出的文件框里,把

在线压缩PDF减少PDF文件大小

现在在办公软件里面大家都很喜欢用PDF格式的文件,因为PDF文件的安全保密性加上其方便打印等一系列优点,但日积月累随着办公文件越来越多,电脑已经不堪重负,可不可以在线压缩PDF用来减少PDF文件的大小呢,今天就来讲解讲解一下.第一步:打开电脑,进入浏览器,搜索在线压缩,进入在线压缩网站的首页.第二步:进入压缩网站界面后,在网站下方有三个功能选项,选择我们需要的在线PDF压缩.第三步:点进PDF压缩后,点击选择文件在弹出的文件框里加入提前准备好的PDF文件.第四步:添加完需要压缩的文件后,设置压缩

PDF文件在线压缩变小的方法

PDF文件在线压缩的方法有?PDF文件太大会导致上传文件上传不上,当PDF很小的时候就可以进行压缩变小,PDF文件是怎么压缩变小的呢?那么下面小编就简单的给大家介绍一下将PDF在线压缩的简单方法吧. 1. 首先需要进行在线压缩的方法很简单,准备好PDF文件,然后直接进入到在线压缩中: 2. 进入之后就可以进行压缩类型的设置,选择一下压缩质量,然后进行文件的添加: 3. 添加文件时可以是需要进行文件的直接拖拽或是点击选择文件进行上传: 4. 等文件上传好之后就可以进行压

迅捷在线压缩将JPG图片压缩的方法

将我们的图片在线压缩的方法有很多种,图片的格式也分为很多种,我们需要将jpg格式的图片进行压缩,那么我们是怎么进行在线压缩的呢?下面就让小编简单的给大家介绍一下.步骤一:等准备好之后就可以直接进入到迅捷在线压缩的网站中: 步骤二:找到在线图片压缩,进入进行压缩设置,将图片的压缩质量和压缩类型进行设置: 步骤三:设置完成之后就可以进行文件的上传,将文件直接拖拽进行上传或是进行直接打开,上传完成之后就可以进行文件的压缩,点击开始压缩即可: 步骤四:压缩是需要一定的时间的,我们需要耐心的等待一段时间等

办公中word文档是如何在线压缩的

办公中word文档是如何在线压缩得,在办公中特别是做文职得朋友是经常碰到word文档文件的,有的小word文件放在桌面或者文件夹内不会影响什么,但是就怕量多,一旦量多文件堆积在电脑上就会很影响运行速度,那如何将其压缩起来呢,今天小编就来跟大家讲解讲解.第一步:打开电脑进入浏览器内搜索"迅捷PDF在线转换器",找到相对应的页面,并点击进入. 第二步:进入在线转换器的首页后,可以看到很多关于办公文件之类的功能,点击导航栏上方的文档处理,并在下拉框内选择"word压缩".