ماهو سبب تقرحات الفم

مرحبا بكم متابعي مدونة ويب تيك اليوم جئتكم بدرس حصر فقط في مدونة ويب تيك وهو كيف اضافة اداث ضغط اكواد css الاكواد بشكل احترافي
وهي جميلة جدا نبدأ بالشرح

أول شيئ نتوجه الى الصفحة التابتة التي نريد وضع الاضافة عليها وتحولها الى وضع html

للمعاينة اضغط هنا

<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 .right{float:right;margin-right: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}

</style>

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

<textarea autofocus="" id="cssField" placeholder="لصق رمز المغلق الخاص بك هنا ..." spellcheck="false"></textarea>

<br />

<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" />&nbsp;حافظ على المسافة البادئة<br />

&nbsp;<input checked="" class="opt4" id="keepLastComma" type="checkbox" /> 

<label for="keepLastComma">إزالة الفاصلة المنقوطة الأخيرة</label>

</div>

<button onclick="compressCSS(&quot;cssField&quot;);">ضغط CSS</button>

<button onclick="clearField(&quot;cssField&quot;);">مسح الحقول</button> 

<button onclick="selectAll(&quot;cssField&quot;);">تحديد الكل</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>

</div>

ثانيا ننسخ الكود اعلاه ونلصقه في الصفحة ونقوم بحفظ العمل
والان بالتوفيق لاتبخل علينا بمتابعة المدونة واي مشكل حطه في تعليق