اضافة صفحة ضغط وفك ضغط اكواد CSS لبلوجر بتصميم مسطح

ضغط اكواد CSS لمدونتك من العوامل الهامة جدا ، لزيادة سرعة المدونة ، لهذا توجد العديد من المواقع المتخصصة بضغط اكواد CSS فقط ، أيضا بإمكانك انشاء صفحة خاصة بضغط اكواد CSS ، لك ولزوارك ، وبالتأكيد ستحتاجها حتى ولو لم تكن متخصص في المجال.

عند اضافتك إحدى الإضافات الى مدونتك، يجب ان تستخدمها لضغط اكواد CSS ، للحفاظ على سرعة وأداء المدونة ، لهذا سأقدم لكم اليوم كود صفحة ضغط اكواد CSS التي استخدمها دائما ، وتعتبر إضافة سهلة التركيب ، فقط كل ما عليك عمله هو انشاء صفحة جديدة ، والانتقال الى عرض HTML وحذف الأكواد التي فيه ثم إضافة الكود التالي كما هو بدون تغيير:

<div id="comprescss">
 <style scoped="" type="text/css">
 #comprescss{background:#fff;position:relative;display:block;clear:both;padding:20px;margin-top:20px;}
 #comprescss textarea{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;width:100%;height:240px;margin:0 auto;display:block;background-color:#fff;padding:20px;font:normal 13px 'Courier New',Monospace;border:1px solid #eee;resize:none}
 textarea:focus{background-color:#FFF;color:#303030}
 #comprescss .box{margin:10px auto 30px;color:rgba(255,225,255,.6);}
 #comprescss .box p{margin:0 0 2px}
 #comprescss button{cursor:pointer;}
 #comprescss .col{width:48%;margin:0 auto 30px}
 #comprescss .right{float:right;margin-right:1%}
 #comprescss .left{float:left;margin-left:1%}
 #comprescss label{line-height:norma;font-family:tahoma,arial;color:#777;}
 #comprescss .button-group{border:1px solid #eee;border-top:0;background:#fafbfc;text-align:center;padding:20px 20px 40px 20px;margin:0;}
 #comprescss button,#comprescss button[disabled]:active{background:#fff;text-align:center;color:#333;display:inline-block;padding:6px 12px;font-size:14px;font-weight:400;line-height:1.471;border-radius:6px;margin:0 5px;border:1px solid #2196F3;transition:all .1s}
 #comprescss button:hover,#comprescss button:active{box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);}
 #comprescss button[disabled],#comprescss button[disabled]:active{background:#fff;}
 #comprescss .opt1,#comprescss .opt2,#comprescss .opt3,#comprescss .opt4,#comprescss .opt5{display:inline-block;margin:2px 10px 0 0;vertical-align:middle;border:none;outline:none;-webkit-appearance: checkbox;
background-color: initial;
border: initial;
width: 24px;
height: 24px;
position: relative;
 }
 #comprescss br{display:none}
 </style>
 <span class="clear"></span>
 <textarea autofocus="" id="cssField" placeholder=" ضع كود CSS هُنا..." spellcheck="false"></textarea>
 <div class="button-group">
 <div class="box">
 <input class="opt1" id="stripAllComment" type="checkbox"> 
<label for="stripAllComment">حذف كل التعليقات</label>
 <input class="opt2" id="superCompact" type="checkbox"> 
<label for="superCompact">ضغط عالي</label>
 <input class="opt3" id="betterIndentation" type="checkbox"> 
<label for="betterIndentation">الاحتفاظ بالمسافات</label>
 <input checked="checked" class="opt4" id="keepLastComma" type="checkbox"> 
<label for="keepLastComma">حذف آخر فاصلة منقوطة</label>
 </div>
 <button onclick='compressCSS("cssField");'>ضغط الأكواد</button>
 <button onclick='clearField("cssField");'>مسح الأكواد</button> 
<button onclick='selectAll("cssField");'>تحديد الأكواد</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,"<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];
 </script>
 </div>

الإضافة تتميز بتصميم فلات رائع ، بالإضافة الى سهولة الاستخدام مع توافر العديد من الخيارات لتخصيص الضغط ، كما تعتبر إضافة ضغط وفك الضغط بنفس الوقت لأكواد CSS ، لمعاينة الإضافة انتقل الى صفحة ضغط الاكواد .