ONLINE CSS UNMINIFIER CODE

Tuesday, 8 December 2015

ONLINE CSS UNMINIFIER CODE

-----------------------------------------------------------------------------------------------------------------
COPY AND PASTE BELOW CODE IN POST HTML SECTION
-----------------------------------------------------------------------------------------------------------------

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="canonical" href="http://fbgadgets.blogspot.co.uk/2015/12/online-css-unminifier.html">
<meta name="description" content="A simple tool to unminify CSS. ">
<meta name="author" content="Peter Coles">
<title>Online CSS Unminifier </title>
<style type='text/css'>
textarea{
background:url("data:image/gif;base64,R0lGODlhIAMoAOYAAP///8rPy/7+/snOysvQzMjNyfn7+cfNyN/m39bc19zo5Nfd2P3+/eTr5Nbc1s/V0MnOy8vPy+3v7v39/c7Tz+nv6e3v7f7//+Ho4fj49+rt6t7g3drd2ujq6fL18tbb1uPr5M7Uz9zg3eDm4PLz8tfd187U0MfMyO3w7eDn4N/o5P/+/+3t7Ojw7eXn5Ovy793g3fP18fj7/MnPy83Rzezy7+Hq4/Hx8MfMx9/i39rf2cbMx8fOy/7+//f49////o/Bx+Xs5QAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAAAAAAALAAAAAAgAygAAAf/gEGCg4SFhoeIiYqLjI2Oj5CRkpOUlZaXmJmam5ydnp+goaKjpKWmp6ipqqusra6vsLGys7S1tre4ubq7vL2+v8DBwsPExcbHyMnKy8zNzs/Q0dLT1NXW19jZ2tvc3d7f4OHi4+Tl5ufo6err7O3u7/Dx8vP09fb3+Pn6+/z9/v8AAwocSLCgwYMIEyqchMBBCAIETCRAsLCixYsYqzVIMCCAx48DSjTISLKkyZO6HODweODEDJALUMqcSbMmqBEcNNwgYSEHhQIdPaawSbSo0aOGUABYytTHBqAEIHxASrWq1YwGmF5gCsBFgQgBHlwdS7YsQAZLBQhIu1TEgQAE4MzKnUs3HZC7eIHI4Mo3A40APPIKHky4sOHDiBMrXsy4sePHkCNLnky5suXLmDNr3sy5s+fPoEOLHk1a8CEDPdbyXQqjgNi6sGPL/uYBgNrVADrsiDm7t+/fzyqoxi3hAAbgyJMrDxYDwArcLHQsn069uiwQLdb+4CpAhQ3r4MOLJ6WghoEJDAy8UDC+vfv38OPLn0+/vv37+PPr38+/v///AAYo4IAEFmjggQgmqOCCDDbo4IMQRijhhBRWaOGFGGao4YYcduhhWaWFKOKIJJZo4okopqjiiiy26OKLpQUCADs=") repeat;
border:5px solid yellow;
color:blue;
font-weight:bold;
height:300px;
max-height:1000px;
min-height:300px;
outline:blue solid 5px;
padding:1%;
resize:vertical;
width:580px;
}
h1 {
background: repeating-linear-gradient(
45deg,
White,
White 10px,
Red 10px,
Red 20px
);
}
</style>

</head>
<body>

<h1> ONLINE CSS UNMINIFIER </h1>
<div>
<textarea id="minified-css-orig" style="height:180px;width:584px;">p{font:normal 14px/20px helvetica,arial,sans-serif;color:#333;}.woot{font-weight:bold}</textarea>
<div class="clr" style="width:600px;padding:9px 0;">
<div class="left" style="height:40px;line-height:40px;">
<button id="minified-css-button" style="vertical-align:middle;">Unminify</button> 
</div>
<div class="right small" style="color:#999;">
tab width:   <input id="minified-css-tab" class="text" type="text" value="4" style="width:20px;vertical-align:middle;text-align:center;color:#999;">
</div>
</div>
<textarea id="minified-css-new" style="height:180px;width:584px;display:none;"></textarea><br>
<script type='text/javascript'>
document.getElementById('minified-css-button').onclick = function() {
var tab = document.getElementById('minified-css-tab').value,
space = '',
result = document.getElementById('minified-css-new'),
code;
tab = (/^\d+$/.test(tab) ? parseInt(tab) : 4);
code = document.getElementById('minified-css-orig').value
.split('{').join(' {\n ')
.split(';').join(';\n ')
.split(',').join(', ')
.split(' }').join('}\n')
.replace(/\}(.+)/g, '}\n$1')
.replace(/\n ([^:]+):/g, '\n $1: ')
.replace(/([A-z0-9\)])}/g, '$1;\n}');
if (tab != 4) {
for (;tab != 0;tab--) { space += ' '; }
code = code.replace(/\n /g, '\n'+space);
}
result.style.display = 'block';
result.value = code;
return false;
};
</script>
<noscript><p>*The css unminifier requires javascript to work.*</p></noscript>

</div>
</body>
</html>