css代码：

textarea{width:900px;height: 420px;font: 12px/1.6em 'Lucida Console', 'monospace', 'Consolas';letter-spacing: 1px}
textarea::-webkit-scrollbar{width:10px;height:10px;}
textarea::-webkit-scrollbar-button:vertical:increment{background-color:transparent;}
textarea::-webkit-scrollbar-track:enabled{background-color:rgba(113,112,107,0.1);-webkit-border-radius:5px;}
textarea::-webkit-scrollbar-thumb:vertical{height:50px;background-color:rgba(0,0,0,.2);-webkit-border-radius:5px;}
textarea::-webkit-scrollbar-thumb:horizontal{width:50px;background-color:rgba(0,0,0,.2);-webkit-border-radius:5px;}

js核心代码

//压缩代码 var val = oCode.value; val = val.replace(/\/\*(.|\n)*?\*\//g,''); //去除注释 val = val.replace(/^\s+|\s+$/g,''); //清除首尾空格 val = val.replace(/(:)\s+/g,'$1'); //去除 冒号后多个空格 如 width: 100px => width:100px val = val.replace(/\s{2,}/g,' '); //去除 多余空格2个以上 如 margin: 10px 20px 30px => margin:10px 20px 30px val = val.replace(/,\s+|\s+,/g,','); //去除 多个样式共享时的多余空格 如 h1, h2 , h3 =>h1,h2,h3 val = val.replace(/;{2,}|;\s+/g,';'); //去除 多个分号或分号后面多余空格 如 width:200px;; height:100px => width:200px;height:100px val = val.replace(/\s*\{\s*/g,'{'); //去除 选择符后面多余空格 如 div { height:100px} => div{height:100px} val = val.replace(/\s*}\s*/g,'}'); //去除 选择器前面多余空格 如 div{height:100px} a{} => div{height:100px}a{} val = val.replace(/[\n\t\f\r]/g,''); //去除换行,制表符,分页符,回车 val = val.replace(/;}/g,'}'); //去除 元素样式的最后分号 如 div{height:100px;} => div{height:100px} oCode.value = val; };