Cara membuat tools CSS Minifier keren di blog terbaru

Daftar Isi [Tampil]

Hello sobat desain limited kali ini saya akan memberikan informasi mengenai bagaimana cara membuat widget atau tools yang bisa Mengedit Kode CSS atau yang disebut dnwgna CSS Minifier

Pengertian CSS Minifier

CSS Minifier atau pengecil CSS ini adalah sebuah tools atau peralatan yang dibuat dengan mengunakan beberapa kode program dengan menampilkan sebuah kotak untuk menempatkan kode CSS tersebut, dengan menyertakan tombol untuk menjalankan fungsinya itu

Biasanya yang sering menngunakan Tools CSS tersebut adalah orang yang mengerti bagaimana kode CSS bekerja, sehingga ia harus menggunakan alat untuk membantunya menyederhanakan lagi kode CSS tersebut

Bisa dibilang bahwa CSS Minifier adalah sebuah alat untuk membantu menyederhanakan tanpa mengurangi fungsi kode dalam sebuah kode CSS

Cara penerapan

Sebelumnya saya sudah membahas mengenai CSS Minifier ini untuk anda pahami, ok 👌 sekarang saya akan mengajarkan cara penerapannya kepada anda

Nah untuk membuat atau menerapkan CSS Minifier sebenarnya mudah dan gampang sekali, anda hanya perlu metakkan kode yang saya berikan pada sebuah halaman tanpa harus pergi ke edit HTML

Untuk lebih lengkapnya saya akan membuat langkah langkah yang bisa anda lakukan

1. Salin kode CSS Minifier
2. Pergi ke Page atau Halaman anda diblogger
3. Buat halaman baru atau New Page
4. Letakkan kode CSS Minifier pada halaman tersebut
5. Dan kemudian simpan
6. And bisa memeriksa Tampilan CSS minifiernya

Kode CSS Minifier

Berikut kode CSS Minifier yang bisa anda gunakan

<div id="cssminifier">

<style scoped="" type="text/css">

#cssminifier {

    background: #ecf0f1;

    position: relative;

    display: block;

    clear: both;

    border-radius: 5px;

    padding: 20px;

    border: 1px solid rgba(0, 0, 0, 0.05)

}

#cssminifier textarea {

    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: #e8ad11;

    text-align: center;

    padding: 20px 20px 40px 20px;

    margin: 0;

    border-radius: 0 0 5px 5px;

    float: none;

}

#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: #e8ad11

}

#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

}

</style><br />

<span class="clear"></span><br />

<textarea autofocus="" id="cssField" placeholder="Paste your CSS code here..." spellcheck="false"></textarea><br />

<div class="button-group">

<div class="box">

<input class="opt1" id="stripAllComment" type="checkbox" /> <br />

<label for="stripAllComment">Strip all comments</label><br />

<input class="opt2" id="superCompact" type="checkbox" /> <br />

<label for="superCompact">Super compact</label><br />

<input class="opt3" id="betterIndentation" type="checkbox" /> <br />

<label for="betterIndentation">Keep indentation</label><br />

<input checked="" class="opt4" id="keepLastComma" type="checkbox" /> <br />

<label for="keepLastComma">Remove the last semicolon</label></div>

<button onclick="compressCSS(&quot;cssField&quot;);">Compress CSS</button><br />

<button onclick="clearField(&quot;cssField&quot;);">Clear Field</button> <br />

<button onclick="selectAll(&quot;cssField&quot;);">Select All</button></div>

<div class="clear">

</div>

<script type="text/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, "'$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];

</script><br /></div>

Oke sobat Desain Mudah mudahan bermanfaat ya, bagikan artikel jika dirasa bermanfaat ok 👌

Follow

Desain Limited Content Creator, Writer, Vidio Creator, Design Website, Design Template, Design Grafis

Bagikan Artikel ini