free html hit counter
Add CSS Minifier Tool to Website
Add CSS Minifier Tool to Website
2018-12-09 / Unknown

Simple way to add CSS minifier to an websites.


Here the codes:

HTML
<div class="next-wrap">
<div id="cssminifier">
<span class="clear"></span>
<textarea autofocus="" id="cssField" placeholder="Paste your CSS code here..." spellcheck="false"></textarea>
<div class="button-group">
<div class="box">
<input class="opt1" id="stripAllComment" type="checkbox" />
<label for="stripAllComment">Strip all comments</label>
<input class="opt2" id="superCompact" type="checkbox" />
<label for="superCompact">Super compact</label>
<input class="opt3" id="betterIndentation" type="checkbox" />
<label for="betterIndentation">Keep indentation</label>
<input checked="" class="opt4" id="keepLastComma" type="checkbox" />
<label for="keepLastComma">Remove the last semicolon</label>
</div>
<button onclick="compressCSS(&quot;cssField&quot;);">Compress CSS</button>
<button onclick="clearField(&quot;cssField&quot;);">Clear Field</button>
<button onclick="selectAll(&quot;cssField&quot;);">Select All</button>
</div>
<div class="clear">
</div>
</div>
</div>

CSS

@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,700);
body {
background: #2ecc71;
font-family: 'Open Sans', sans-serif;
margin: 0;
padding: 0;
position: relative;
line-height: normal;
}

.next-wrap {
position: relative;
max-width: 840px;
margin: 8% auto;
background: #ecf0f1;
color: #666;
font-size: 1em;
line-height: normal;
border-radius: 5px;
overflow: hidden;
padding: 20px;
box-shadow: 0 2px 0 rgba(0, 0, 0, 0.1);
}

#cssminifier {
overflow: hidden;
background: #ecf0f1;
position: relative;
display: block;
clear: both;
border-radius: 5px;
padding: 0;
border: 1px solid rgba(0, 0, 0, 0.05)
}

#cssminifier textarea {
overflow: hidden;
width: 100%;
height: 240px;
margin: 0 auto;
display: block;
background-color: #fff;
padding: 20px;
font: normal 13px 'Courier New', Monospace;
border: 0;
box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.05);
border-radius: 5px 5px 0 0;
resize: none
}

textarea:focus {
background-color: #FFF;
color: #303030
}

#cssminifier .box {
margin: 10px auto 30px;
color: rgba(255, 2255, 255, .6);
}

#cssminifier .box p {
margin: 0 0 2px
}

#cssminifier button {
cursor: pointer;
}

#cssminifier .col {
width: 48%;
margin: 0 auto 30px
}

#cssminifier .left {
float: left;
margin-left: 1%
}

#cssminifier .right {
float: right;
margin-right: 1%
}

#cssminifier .button-group {
background: #2980b9;
text-align: center;
padding: 20px 20px 40px 20px;
margin: 0;
border-radius: 0 0 5px 5px
}

#cssminifier button,
#cssminifier button[disabled]:active {
background: rgba(255, 255, 255, 0.2);
text-align: center;
color: #fefefe;
display: inline-block;
padding: 6px 12px;
font-size: 14px;
font-weight: 400;
line-height: 1.471;
border-radius: 4px;
margin: 0 5px;
border: 0;
transition: all .1s
}

#cssminifier button:hover,
#cssminifier button:active {
background: #fff;
color: #2980b9
}

#cssminifier button[disabled],
#cssminifier button[disabled]:active {
background: #fff;
}

#cssminifier .opt1,
#cssminifier .opt2,
#cssminifier .opt3,
#cssminifier .opt4,
#cssminifier .opt5 {
display: inline-block;
margin: 0 0 0 10px;
vertical-align: middle;
border: none;
outline: none
}

#cssminifier br {
display: none
}

Javascript

function get(e) {
return document.getElementById(e)
}

function highlightCode(e) {
if (hc.checked) {
var a = e.innerHTML;
a = a.replace(/\{([\s\S]+?)\}/g, function(e) {
return e.replace(/\'(.*?)\'/g, "<span class='st'>'$1'</span>").replace(/\"(.*?)\"/g, "<span class='st'>\"$1\"</span>").replace(/(\{|\n|;)?(.[^\{]*?):(.[^\{]*?)(;|\})/g, "$1<span class='pr'>$2</span>:<span class='vl'>$3</span>$4").replace(/<span class='pr'>\{/g, "{<span class='pr'>")
}), a = a.replace(/&lt;(.*?)('|")(.*?)('|")&gt;/g, function(e) {
return e.replace(/'(.*?)'/g, "<span class='vl'>'$1'</span>").replace(/"(.*?)"/g, "<span class='vl'>\"$1\"</span>")
}), a = a.replace(/\{([\s\S]+?)\}/g, function(e) {
return e.replace(/([\(\)\{\}\[\]\:\;\,]+)/g, "<span class='pn'>$1</span>").replace(/\!important/gi, "<span class='im'>!important</span>")
}), a = a.replace(/\/\*([\w\W]+?)\*\//gm, "<span class='cm'>/*$1*/</span>"), e.innerHTML = "<code>" + a + "</code>", hr.style.display = "block", rt.style.display = "block"
} else hr.style.display = "none", rt.style.display = "none"
}

function compressCSS(e) {
var a = get(e),
c = /@(media|-w|-m|-o|keyframes|page)(.*?)\{([\s\S]+?)?\}\}/gi,
n = a.value,
t = n.length;
n = sa.checked || sc.checked ? n.replace(/\/\*[\w\W]*?\*\//gm, "") : n.replace(/(\n+)?(\/\*[\w\W]*?\*\/)(\n+)?/gm, "\n$2\n"), n = n.replace(/([\n\r\t\s ]+)?([\,\:\;\{\}]+?)([\n\r\t\s ]+)?/g, "$2"), n = sc.checked ? n : n.replace(/\}(?!\})/g, "}\n"), n = bi.checked ? n.replace(c, function(e) {
return e.replace(/\n+/g, "\n ")
}) : n.replace(c, function(e) {
return e.replace(/\n+/g, "")
}), n = bi.checked && !sc.checked ? n.replace(/\}\}/g, "}\n}") : n, n = bi.checked && !sc.checked ? n.replace(/@(media|-w|-m|-o|keyframes)(.*?)\{/g, "@$1$2{\n ") : n, n = cm.checked ? n.replace(/;\}/g, "}") : n.replace(/\}/g, ";}").replace(/;+\}/g, ";}").replace(/\};\}/g, "}}"), n = n.replace(/\:0(px|em|pt)/gi, ":0"), n = n.replace(/ 0(px|em|pt)/gi, " 0"), n = n.replace(/\s+\!important/gi, "!important"), n = n.replace(/(^\n+|\n+$)/, ""), a.value = n, hr.innerHTML = "/* " + (t - n.length) + " of " + t + " unused characters has been removed. */\n" + n.replace(/</g, "&lt;").replace(/>/g, "&gt;"), highlightCode(hr)
}

function clearField(e) {
var a = get(e);
a.value = "", a.focus()
}

function selectAll(e) {
get(e).focus(), get(e).select()
}
var hc = get("highlightCode"),
sa = get("stripAllComment"),
sc = get("superCompact"),
cm = get("keepLastComma"),
bi = get("betterIndentation"),
bs = get("breakSelector"),
tt = get("toTab"),
to = get("tabOpt").getElementsByTagName("input"),
sb = get("spaceBetween"),
ip = get("inlineSingleProp"),
rs = get("removeLastSemicolon"),
il = get("inlineLayout"),
si = get("singleBreak"),
hr = get("highlightedResult"),
rt = document.getElementsByTagName("h2")[1];

DEMO:

Add CSS Minifier Tool to Website

PermaLink: https://www.webmanajemen.com/2018/12/add-css-minifier-tool-to-website.html
Incoming search terms for Add CSS Minifier Tool to Website:
  • Add CSS Minifier Tool to Website
  • Add CSS Minifier Tool to Website WMI Gitlab

Google Rich Snippets | Schema Markup Validator | Google Pagespeed Insight