<!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,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),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>
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
