Add CSS Minifier Tool to Website

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:

Subscribe to receive free email updates:

0 Response to "Add CSS Minifier Tool to Website"

Post a Comment

Bila Ada posting yang kurang, atau error atau yang lainnya, silahkan tinggalkan komentar agar artikel/post di perbaiki.
Jangan Lupa Cek Box "Notify Me" agar tahu komentar kamu dibalas oleh saya.

If there are any posts that are missing, or error or anything else, please leave a comment for the article / post to be fixed.
Do not Forget Check Box "Notify Me" to know our comments replied by me.