标签：main near ie8 key url oninput title round cep
<!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>
标签：main near ie8 key url oninput title round cep
原文地址：https://www.cnblogs.com/xieyongbin/p/10967159.html
