rasgane

CSS Minifier

Apa sih CSS Minifier itu ?

CSS Minifier adalah sebuah tool atau aplikasi yang berguna untuk mengompres atau memperkecil file CSS dengan cara menghilangkan whitespace, menggabungkan dan memperpendek nama selector, properti, dan nilai-nilai di dalamnya. Tujuan dari penggunaan CSS Minifier adalah untuk mempercepat waktu muat halaman website dan menghemat bandwidth, karena semakin kecil ukuran file CSS, semakin cepat halaman website dapat dimuat oleh browser.

Kenapa harus menggunkan CSS Minifier ?

Menggunakan CSS Minifier memiliki beberapa keuntungan, antara lain:

  1. Mengurangi ukuran file CSS: Dengan menggunakan CSS Minifier, file CSS dapat dikompres menjadi lebih kecil, sehingga dapat menghemat bandwidth dan mempercepat waktu muat halaman website.
  2. Meningkatkan performa website: Website yang lebih cepat memuatnya akan memberikan pengalaman pengguna yang lebih baik. Dengan mengurangi ukuran file CSS, waktu muat halaman website dapat dipercepat, sehingga meningkatkan performa website secara keseluruhan.
  3. Mengurangi jumlah request: Dengan menggunakan CSS Minifier, hanya satu file CSS yang diunduh dan digunakan untuk semua halaman website. Hal ini dapat mengurangi jumlah request yang dilakukan oleh browser ke server, sehingga meningkatkan performa website dan mengurangi beban server.
  4. Memudahkan debugging: Saat mengembangkan website, file CSS yang sudah di-minify mungkin sulit untuk dibaca dan dipahami oleh developer. Namun, banyak CSS Minifier yang juga menyediakan fitur untuk mengembalikan file CSS ke dalam format yang mudah dibaca untuk memudahkan debugging.

Nah dibawah sudah disediakan tool dan source code nya, jadi kalian bisa gunakan dan terapkan di web kalian.

  • Results
  • Code

CSS Minifier Versi 1

:root {
  --color-bg: #7380ec;
}
.CSS_Minifier .box ul {text-align: left;list-style: none !important;}
.CSS_Minifier .box ul li label {cursor: pointer;}
.CSS_Minifier #outer-wrapper{margin:0 auto;text-align:left;float:none;background-position:center!important}
.CSS_Minifier #post-wrapper{width:100%;max-width:100%;margin:0 auto;text-align:left;float:none;background-position:center!important}
.CSS_Minifier{position:relative;display:block;clear:both;border-radius:8px;border:1px solid rgba(0,0,0,0.05);transition:all .6s}
.CSS_Minifier:hover{border-color:rgba(0,0,0,0.1)}
.CSS_Minifier textarea{width:100%;outline:none;height:300px;margin:0 auto;display:block;padding:20px;font-family:Monospace;font-size:13px;border:0;border-radius:8px 8px 0 0;box-sizing: border-box;resize: none;border: 1px solid #dee0e1;background-color: #f6f8f9;resize: none;}
.CSS_Minifier textarea:focus{background-color:#fff;color:#303030}
.CSS_Minifier .box{margin:10px auto 30px;color:#fff;font-size:90%}
.CSS_Minifier .box p{margin:0 0 2px}
.CSS_Minifier button{cursor:pointer}
.CSS_Minifier .col{width:48%;margin:0 auto 30px}
.CSS_Minifier .left{float:left;margin-left:1%}
.CSS_Minifier .right{float:right;margin-right:1%}
.CSS_Minifier .button-group{float:none;background:var(--color-bg);background-size:130%;text-align:center;padding:20px 20px 40px 20px;margin:0;border-radius:0 0 8px 8px}
.CSS_Minifier button,#cssminifier button[disabled]:active{outline:none;background:rgba(255,255,255,.25);text-align:center;color:#fff;display:inline-block;padding:8px 16px;font-size:13px;font-weight:400;line-height:1.471;border-radius:99em;margin:0 5px;border:0;box-shadow:0 2px 6px -4px rgba(0,0,0,0.05);transition:all .3s}
.CSS_Minifier button:hover,#cssminifier button:active{background:rgba(255,255,255,.5);color:#fff}
.CSS_Minifier button[disabled],#cssminifier button[disabled]:active{background:rgba(255,255,255,.5);color:#fff;box-shadow:0 10px 21px rgba(0,0,0,0.15),0 6px 6px rgba(0,0,0,0.12)}
.CSS_Minifier .opt1,
.CSS_Minifier .opt2,
.CSS_Minifier .opt3,
.CSS_Minifier .opt4,
.CSS_Minifier .opt5{display:inline-block;margin:0 3px 0 10px;vertical-align:middle;border:none;outline:none}
.CSS_Minifier br{display:none}
.CSS_Minifier .option-input{-webkit-appearance:none;-moz-appearance:none;-ms-appearance:none;-o-appearance:none;appearance:none;position:relative;right:0;bottom:0;left:0;height:16px;width:16px;transition:all 0.15s ease-out 0s;background:rgba(255,255,255,.3);border:0;color:#fff;cursor:pointer;display:inline-block;margin-right:0.5rem;outline:none;position:relative;padding:0;border-radius:99em}
.CSS_Minifier .option-input:hover{background:rgba(255,255,255,.3)}
.CSS_Minifier .option-input:checked{background:rgba(0,0,0,.2);animation:rubberBand 1s}
.CSS_Minifier .option-input:checked::before{height:16px;width:16px;position:absolute;content:'';display:inline-block;text-align:center;line-height:16px;background:limegreen;border-radius:99px;transition:.3s}
.CSS_Minifier .option-input:checked::after{-webkit-animation:click-wave 0.65s;-moz-animation:click-wave 0.65s;animation:click-wave 0.65s;background:#40e0d0;content:'';display:block;position:relative;z-index:100}
.CSS_Minifier .option-input.radio{border-radius:50%}
.CSS_Minifier .option-input.radio::after{border-radius:50%}
<div class="CSS_Minifier" id="cssminifier">
<textarea autofocus="" id="cssField" placeholder="Paste your CSS code here..." spellcheck="false"></textarea>
<div class="button-group">
  <div class="box">
  <ul>
      <li>
      <input class="option-input checkbox opt1" id="stripAllComment" type="checkbox">
      <label for="stripAllComment">Strip all comments</label>
      </li>
      <li>
      <input class="option-input checkbox opt2" id="superCompact" type="checkbox">
      <label for="superCompact">Super compact</label>
      </li>
      <li>
      <input class="option-input checkbox opt3" id="betterIndentation" type="checkbox">
      <label for="betterIndentation">Keep indentation</label>
      </li>
      <li>
      <input checked="" class="option-input checkbox opt4" id="keepLastComma" type="checkbox">
      <label for="keepLastComma">Remove the last semicolon</label>
      </li>
  </ul>
  </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>
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, "'$1'").replace(/\"(.*?)\"/g, "\"$1\"").replace(/(\{|\n|;)?(.[^\{]*?):(.[^\{]*?)(;|\})/g, "$1$2:$3$4").replace(/\{/g, "{")
  }), a = a.replace(/<(.*?)('|")(.*?)('|")>/g, function(e) {
  return e.replace(/'(.*?)'/g, "'$1'").replace(/"(.*?)"/g, "\"$1\"")
  }), a = a.replace(/\{([\s\S]+?)\}/g, function(e) {
  return e.replace(/([\(\)\{\}\[\]\:\;\,]+)/g, "$1").replace(/\!important/gi, "!important")
  }), a = a.replace(/\/\*([\w\W]+?)\*\//gm, "/*$1*/"), e.innerHTML = "" + a + "", 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, ">"), 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];

Source : ???

  • Results
  • Code

CSS Minifier Versi 2

Original CSS
Minified CSS 
:root{
  --color-bottom-CSS_Minifier_V2:#7380ec;
}
.CSS_Minifier_V2 .minification > div{width:100%;display:block}
.CSS_Minifier_V2 textarea{min-height:200px;width:100%;outline:none;height:300px;margin:0 auto;display:block;padding:20px;font-family:Monospace;font-size:13px;border-radius:8px 8px 0 0;box-sizing:border-box;border:1px solid #dee0e1;background-color:#f6f8f9;resize:none;margin-bottom:0.5rem}
.CSS_Minifier_V2 button{border:none;background:var(--color-bottom-CSS_Minifier_V2);padding:0.1rem 1rem;border-radius:0.4rem;color:#fff;font-weight:400;cursor:pointer}
<div class="CSS_Minifier_V2">
  <div class="minification">
      <div class="input-col">
          Original CSS
          <textarea name="" id="" cols="" rows="" class="input"></textarea>
      </div>
      <div class="output-col">
          Minified CSS
          <textarea name="" id="" cols="" rows="" class="output"></textarea>
      </div>
  </div>
  <button onclick="minifyCssV2()">Minify!</button>
</div>
function minifyCssV2(){
  let oldCSS = document.querySelector("textarea.input").value;
  let noLines = oldCSS.replace(/\n/g, " ");
  let startCSS = noLines.replace(/[ ]{2,}/g, "");
  let addSpaces = startCSS.replace(/\;/g, "; ");
  let addSpacesMultiSelectors = startCSS.replace(/[,]/g, ", ");
  let finalCSS = addSpaces.replace(/\;[ ]{2,}/g, ";");
  let pixelRemoval = finalCSS.replace(/\spx\s;/g, "px;");
  let emRemoval = pixelRemoval.replace(/\sem\s;/g, "em;");
  let viewportRemoval = emRemoval.replace(/\svw\s;/g, "vw;");
  let viewportRemoval2 = viewportRemoval.replace(/\svh\s;/g, "vh;");
  let pixelComma = viewportRemoval2.replace(/\spx\s,/g, "px,");
  
  document.querySelector("textarea.output").value = pixelComma;
}

Source : https://codepen.io/alangecodemaster/pen/BaQLeJd

pin
Comment Yukine
Yukine Juni 04, 2023
Test Pin Comment Blogger

Komentar

Untuk Tutorial Pemasangan License bisa gunakan <i rel='Tutor1'>Tutor</i>
Untuk Cek Member bisa gunakan <i rel='CekMember'>Cek Member</i>
Untuk Menyisipkan Gambar bisa gunakan <i rel='img'>URL_IMAGE</i>
Untuk Menyisipkan Video/Iframe bisa gunakan <i rel='video'>URL_video</i>
Untuk Menyisipkan syntax highlighter bisa gunakan <i rel='kode'>Kode yang sudah di parse</i>

Langganan: Posting Komentar (Atom)