Css mini
by itzmeamar
HTML
<!--
TODO :
contentプロパティの値の文字列内部の空白の処理の修正。ドラッグ＆ドロップ機能追加
rgb(255,0,0) >> red or #f00。font-weight:normal >> 300
課題 :
byte 数表示機能の検証（怪しい）
dataURI等の改行エスケープが破壊されてしまう。>> 前に "\" の無い改行のみ削除すればいい？
顧客が本当に欲しかったもの :
@charset "utf-8";@media print{body{margin:0;padding:0;color:red;color:#009;color:maroon;font-family:Meiryo,"MSP Gothic",sans-serif;border:1px solid #fecfed;border-width:1pc 1pt 1cm 1mm;background-image:linear-gradient(top,#fEE,#BBB);box-shadow:1px 1px 4px 0 rgba(0,0,0,.75) inset}ins:before{content:" 追記:";content:"#f00"}::selection{background:#c07;color:#fff}}
-->
<div id="wrapper">
<h1>CSS Minifier <span class="version">Alpha</span></h1>
<div class="unit">
<textarea id="I" placeholder="Input Some CSS Code">
@charset "utf-8";
@media print {
body {
margin: 0% 0em 0pt 0rem ;; ;
padding: 0px 0px 0in 0px;
color:#ff0000;
color:#000099;
color:#800000;
font-family: Meiryo, "MSP Gothic", sans-serif;
border: 1px solid #fecfed; border-width: 1pc 1pt 1cm 1mm;
background-image: linear-gradient( top , #ffEEEE , #BBB );
box-shadow: 1px 1px 4px 0px rgba(0, 0, 0,0.75) inset;
}
ins:before {
content: " 追記:\
";
content: "#ff0000";
/*コメント。本日は雨天なり。*/
}
::selection{ background:#c07; color:#fff; }
/* 多数行コメント
削除されるかな？ */
}
</textarea>
</div>
<div id="controles" class="unit">
<button id="B1">Minify</button>
<button id="B2">Delete</button>
</div>
<div class="unit">
<textarea id="O" readonly="readonly"></textarea>
</div>
<div class="unit">
<table id="outputData">
<tr>
<th><label for="D1">BEFORE : </label></th>
<td><input id="D1" type="text" readonly="readonly" /> BYTE</td>
</tr>
<tr>
<th><label for="D2">AFTER : </label></th>
<td><input id="D2" type="text" readonly="readonly" /> BYTE</td>
</tr>
</table>
</div>
<!-- / #wrapper --></div>CSS
@import url(http://fonts.googleapis.com/css?family=Orbitron);
body {
font-size: 62.5%;
color: #fff;background-color: #670;
background-image: url(
"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIA\
AAABAQMAAADO7O3JAAAABlBMVEX///8AAABVwtN+AAAAAnRSTl\
MAgJsrThgAAAAUSURBVHheBcCBDAAAAICw0PKn+hoAQgBBsYkH\
9gAAAABJRU5ErkJggg==" );
/* Encoder : http://jsdo.it/tsmallfield/datauriplayground2/ */
width: 96%; margin: 0 auto;
}
#wrapper { font-size: 130% }
a { color: #fffe00 }
h1 {
padding: 10px 0;
font: 300 1.12em/1.25 Orbitron,sans-serif;
text-transform: uppercase; letter-spacing: 2px; word-spacing: 0.25em;
text-shadow: 0 0 0 #000, 1px 1px 1px #000,1px 1px 2px #000;
}
.version { font-size: 0.5em; vertical-align: middle; color: #ffe400; }
.unit { margin: 5px 0 }
textarea, button { -moz-border-radius: 2px; border-radius: 2px }
input[type="text"], textarea {
font-size: 0.89em;
border: 1px solid #fff; padding:3px;
-webkit-box-shadow: 1px 1px 4px 0 rgba(0,0,0,0.75) inset;
-moz-box-shadow: 1px 1px 4px 0 rgba(0,0,0,0.75) inset;
box-shadow: 1px 1px 4px 0 rgba(0,0,0,0.75) inset;
}
textarea { width:98%; height:145px; resize: vertical }
::-moz-selection{ background:#c07; color:#fff }
::selection{ background:#c07; color:#fff }
button {
font-family: Orbitron, "Hypatia Sans Pro",
"Trebuchet MS", Arial, Helvetica, Jamrul, sans-serif;
text-transform: uppercase;
padding: 2px 32px; border: 1px solid #FFF; margin: 5px 5px 5px 0;
-webkit-box-shadow: 0 0 3px 1px #EEE inset, 0 1px 3px #000;
-moz-box-shadow: 0 0 3px 1px #EEE inset, 0 1px 3px #000;
box-shadow: 0 0 3px 1px #EEE inset, 0 1px 3px #000;
background-color: #DDD;
background-image: -webkit-gradient(linear,left top,left bottom,from(#EEE),to(#BBB));
background-image: -webkit-linear-gradient(top, #f2f4e6, #b9bf91);
background-image: -moz-linear-gradient(top, #f2f4e6, #b9bf91);
background-image:...JavaScript
// forked from ethertank's "HTML Entities Conversion Tool" http://jsdo.it/ethertank/w2Be
/*
TODO :
contentプロパティの値の文字列内部の空白の処理の修正。ドラッグ＆ドロップ機能追加
rgb(255,0,0) >> red or #f00。font-weight:normal >> 300
課題 :
byte 数表示機能の検証（怪しい）
dataURI等の改行エスケープが破壊されてしまう。>>
前に "\" の無い改行のみ削除すればいい？
*/
/* 顧客が本当に欲しかったもの
@charset "utf-8";@media print{body{margin:0;padding:0;color:red;color:#009;color:maroon;font-family:Meiryo,"MSP Gothic",sans-serif;border:1px solid #fecfed;border-width:1pc 1pt 1cm 1mm;background-image:linear-gradient(top,#fEE,#BBB);box-shadow:1px 1px 4px 0 rgba(0,0,0,.75) inset}ins:before{content:" 追記: ";content:"#f00"}::selection{background:#c07;color:#fff}}
*/
//イベント登録用関数
function addEvent(e,n,o){
if(e.addEventListener){e.addEventListener(n, o, false);}
else if(e.attachEvent){e.attachEvent('on'+n, o);}
}
//ID取得用関数
function $(ID){ return document.getElementById(ID); }
//Byte数計測用関数
function getByte(text) {
var byteLength = 0;
for (var i = 0; i < text.length; i++) {
n = escape(text.charAt(i));
if(n.length < 4) { byteLength++ ; }
else { byteLength += 2; }
}
return byteLength;
}
//Minifier本体
function cssMinifier(I, O, B1, B2, D1, D2) {
function clear() { I.value = ""; O.value = ""; }
function selectAll() { this.select(); }
function minify(E){
// 改行・コメント削除
E = E.replace(/\n|\r/g, '').replace(/\/\*.*?\*\//g, '');
//Firefoxとかだと \/\*.*?\*\//g で間改行ごとCSSコメントが消せてしまうけどOpera 11 だと無理
// タブ・スペース・改行をスペースに
E = E.replace(/\s/g, ' ');
// 連続スペースを一つのスペースに
E = E.replace(/\s{2,}/g, ' ');
// カンマ・コロン・セミコロンの前後のスペース削除（※問題アリアリ）
E = E.replace(/\,\s/g, ',').replace(/\s\,/g, ',');
E = E.replace(/\:\s/g, ':').replace(/\s\:/g, ':');
E = E.replace(/;\s/g, ';').replace(/\s\;/g, ';');
// 連続するセミコロンがあれば一つに
E = E.replace(/;{2,}/g, ';');
// 波括弧の前後のスペース削除
E = E.replace(/\{\s/g,...