Tuesday 8 December 2015
HTML CSS JAVA COMPRESSOR CODE
-----------------------------------------------------------------------------------------------------------------
COPY AND PASTE BELOW CODE IN POST HTML SECTION
http://fbgadgets.blogspot.co.uk/2015/12/html-css-java-compressor.html
https://www.youtube.com/watch?v=sfXtGtMf3cY
-----------------------------------------------------------------------------------------------------------------
<html class=" js no-touch csstransforms csstransforms3d csstransitions svg js-ready" lang="en-US" debug="true">
<div id="FirebugChannel" style="display: none;">
</div>
<script src="chrome-extension://bmagokdooijbeehmkpknfglimnifench/firebug-lite.js" id="FirebugLite" firebugignore="true" extension="Chrome">
</script>
<!--<![endif]-->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Tools - CSS Compressor -FBGadgets.com</title>
<meta http-equiv="content-language" content="en">
<meta name="description" content="Tools - CSS Compressor">
<meta name="author" content="FBGadgets">
<link rel="shortcut icon" href="" type="image/x-icon">
<style type='text/css'>
fieldset {
width:580px;
}
#main {
width:580px;
}
input[type="text"].wide,
input[type="password"].wide,
textarea.wide {
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;
min-height:300px;
outline:blue solid 5px;
padding:1%;
resize:vertical;
width:580px;
}
select.wide {
width: 98.7%
}
input,
select,
textarea {
font-family: verdana, arial, sans-serif;
margin-bottom: 1px
}
textarea {
font-size: .9em
}
input[type="radio"] {
position: relative;
top: 2px
}
.indent {
padding-left: 1.5em
}
.form {
margin: 0;
padding: 0
}
a.tooltip {
position: relative;
z-index: 10
}
a.tooltip:hover {
z-index: 20;
padding: 0
}
a.tooltip span.tooltip {
display: none
}
a.tooltip:hover span.tooltip {
display: block;
position: absolute;
top: 1.5em;
left: -6em;
width: 15em;
border: 1px solid #666;
background-color: #EE7;
padding: .5em;
color: #000;
text-decoration: none
}
h1 {
background: repeating-linear-gradient(
45deg,
White,
White 10px,
Red 10px,
Red 20px
);
}
</style>
<script type="text/javascript">
function setBytesIn() {
var code=document.getElementById('i_code').value;
var box=document.getElementById('i_bytes');
box.value=code.length;
}
function runCompression() {
setBytesIn();
var code=document.getElementById('i_code').value;
var commentRegex='';
if (document.getElementById("strip_comments").checked) {
commentRegex='\\/\\*.*?\\*\\/';
}
if (document.getElementById("strip_long_comments").checked) {
commentRegex='\\/\\*.{'+document.getElementById("long_comments_length").value+',}?\\*\\/';
}
if (''!=commentRegex) {
commentRegex=new RegExp(commentRegex ,'g');
code=code.replace(commentRegex, '');
}
code=code.replace(/\n*/g, '');
code=code.replace(/[ ]+/g, ' ');
code=code.replace(/\s?([;:{},+>])\s?/g, '$1');
code=code.replace(/;}/g, '}');
if (document.getElementById("one_rule_per_line").checked) {
code=code.replace(/}/g, "}\n");
}
document.getElementById('o_size').value=code.length;
var codeOutBox=document.getElementById('o_code');
codeOutBox.value=code;
var savings=code.length/document.getElementById('i_bytes').value*100;
savings=100-savings;
savings=Math.round(savings*100)/100;
document.getElementById('o_save').value=savings+'%';
}
</script>
</head>
<body onload="" id="FBGadgets-com">
<div id="main" class="">
<h1>HTML CSS JAVA COMPRESSOR</h1>
<p>This tool was inspired by a similar one at <a href="http://www.willpeavy.com/minifier/">WILLPEAVY</a>. This is, though, written in javascript so it's all client side (no transmitting your CSS to someone elses' server), and it has a few more capabilities, plus configurable options. It basically takes out comments and whitespace from a CSS file, which can save more space than you might imagine.</p>
<fieldset>
<legend>Options</legend>
<label><input type="checkbox" id="strip_comments"> Strip comments</label> (<a href="javascript:void(0);" class="tooltip">Note<span class="tooltip">This strips /* */ style comments. This is the only valid type of CSS comment. This could screw with browser hacks, you might prefer 'strip long comments'.</span></a>)<br>
<label><input type="checkbox" id="strip_long_comments" checked="checked"> Strip comments at least <input type="text" size="2" value="4" id="long_comments_length"> characters long</label> (<a href="javascript:void(0);" class="tooltip">Note<span class="tooltip">Similar to above, but will only strip comments with the number of characters you specify inside them. Will match less browser hacks.</span></a>)<br>
<label><input type="checkbox" id="one_rule_per_line"> One rule per line</label> (<a href="javascript:void(0);" class="tooltip">Note<span class="tooltip">When unchecked, all newlines will be removed. Checking this box will place a newline between each separate rule.</span></a>)<br>
</fieldset>
<fieldset>
<legend>Code in</legend>
<textarea rows="10" cols="" class="wide" id="i_code" onkeyup="javascript:setBytesIn();"></textarea><br>
Bytes: <input type="text" id="i_bytes" readonly="readonly"><br>
<button type="button" onclick="javascript:runCompression();" accesskey="c"><u>C</u>ompress</button><br>
</fieldset>
<fieldset>
<legend>Code out</legend>
<textarea rows="10" cols="" id="o_code" class="wide" readonly="readonly"></textarea><br>
Bytes: <input id="o_size" readonly="readonly"><br>
Savings: <input id="o_save" readonly="readonly"><br>
</fieldset>
</div>
</body>
</html>
Subscribe to:
Post Comments (Atom)
0 comments:
Post a Comment