Add CSS Minifier Tool to Website

By -

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:

Comments

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.

Popular posts from this blog

Install deb package via Termux

By -
Image
Packages are manually installed via the dpkg command (Debian Package Management System). dpkg is the backend to commands like apt-get and aptitude , which in turn are the backend for GUI install apps like the Software Center and Synaptic. Something along the lines of: dpkg --> apt-get , aptitude --> Synaptic, Software Center But of course the easiest ways to install a package would be, first, the GUI apps (Synaptic, Software Center, etc..), followed by the terminal commands apt-get and aptitude that add a very nice user friendly approach to the backend dpkg, including but not limited to packaged dependencies, control over what is installed, needs update, not installed, broken packages, etc.. Lastly the dpkg command which is the base for all of them. Since dpkg is the base, you can use it to install packaged directly from the command line. Install a package sudo dpkg -i DEB_PACKAGE For
Read more

How to Make Blogger Safelink Converter v3

By Anonymous -
Image
How to Make Blogger Safelink Converter v3 Understanding What is Safelink on blogger or wordpress ? Safelink is one option blogs download or url redirect is used by many people, because of the benefits and usefulness Safelink itself is to increase the revenue from advertising on the Internet and put it on the blog Safelink, aims to secure your link and show your ads on the blog Safelink that, with the help of base64 allow your link to be safe as before leads to the link destination, the link to the blog Safelink beforehand, so automatically the link will be converted via javascript, without having we convert it, so it is highly of banned google adsense if the Safelink blog for your own personal or blog.   In contrast, if you use the url Shorte or from Safelink adfly heading other blogs first, because we are going to create your own blog as a blog on without having to enter the url because it can automatically put a link in addition to the url internal, or we can choo
Read more

List of weapon buff materials, effects and how it can be durango wild lands

By -
Image
Weapons are one of the most important elements in durango games, whatever we do in the game definitely requires weapons. whether it's fighting, taming dinosaurs, collecting materials to make items done with weapons and tools. therefore almost most of the durango players end up choosing wpc as their main job. but there are many things you need to know in making weapons, one of them is a buff. there are many types of buffs for weapons in this game, all buffs are divided into 3 ie buff (marked in yellow) debuff (marked by ash) rare buff (marked in green). well this time we will discuss the yellow and gray buff, for the green buff I have previously discussed so you can directly read it by clicking the link below. Read: Type of green buffer type and its effect durango wild lands Buff from raw materials
Read more