ตอนนี้คุณกำลังประสบปัญหาเกี่ยวกับ code ที่คุณใส่ยาวไปใช่หรือไม่?
และตอนนี้คุณมี code เด็ดๆ ที่ไม่อยากบอกใครอยู่ใช่หรือไม่?
เอานี่ไปเลยครับ เครื่องมือเทพๆ ที่เรียกว่า CSS Optimizer
1. เข้าเว็บนี้ก่อน เพื่อดูหน้าดูตาของเขาโปรแกรมนี้
http://www.cssoptimiser.com/ 
เว็บนี้เป็นบริการฟรีออนไลน์ ที่เอาไว้ใช้ในการลดขนาดของโค้ด
CSS กันครับ
2. ให้เราก๊อบ
CSS Code ที่เราจะย่อขนาดไปไว้ใน
Notepad ก่อน กันพลาดครับ และเผื่อมีอะไรผิดพลาดจะได้ใช้ได้อีก :aiwebs_046:
3. ให้ลบคำว่า
<style type='text/css'> หรือ
<style> หรือ
</style> ออกจาก
CSS code ให้หมดครับ มันไม่ต้องการ เพราะว่าส่วนนี้เป็นแค่การประกาศ HTML section ของ <style> จึงไม่จำเป็นครับ เพราะเขาย่อกันแต่ CSS code เท่านั้น!!!
4. เปิดหน้าเว็บในขั้นตอนที่ 1 อยู่ป่าวครับ อ่ะทีน้ีมันมี 3 กล่อง จะใส่ที่ไหน ผมจะอธิบายอย่างนี้
Optimize CSS via URI: จะเอาไว้ใส่
URI (Uniform Resource Identifier) เข้าไป แบบนี้ครับ
ex1. http://www.dekitclub.com/style/main.css or Optimize CSS via File Upload: ตรงนี้ให้เรา อัพโหลดไฟล์ที่นามสกุล .css เข้าไปครับ (สังเกตุนะครับว่า ในไฟล์ .css จะไม่มีการประกาศ tag <style> เห็นม่ะๆ เพราะมันเป็น html ไม่ใช้ CSS) จากนั้นเราก็กด Browse File .css ในเครื่องที่ที่อยากจะย่อขนาดครับ
ex2. C:\AppServ\www\dekitclub.com\style\main.cssor Optimize CSS via Direct Input: อันนี้แหละที่เราจะใช้กัน เพราะว่าเรา copy ไว้ใน notepad เรียบร้อยแล้วนิครับ
ลองผมไม่ใช้ขั้นตอนนี้ ท่านๆ ทั้งหลายคงจะเคืองผมน่าดู ว่าจะให้ copy ใส่ notepad ทำไม!! ให้นำ css ที่อยู่ใน notepad นั้น ใส่ไปในช่องใหญ่ๆ เลยครับ
ex3. textarea {
background-image:url(http://dekitclub.com/img.jpg )!important;
color: #000000;
width: 90%;
height: 160px!important;
background-color: #000000;
background-repeat: no-repeat;
background-position: left top;
border: 1px dashed #999999;
position: relative;
font-size: 12pt;
overflow: visible;
font-family: Verdana;
}5. เมื่อท่านเลือกวิธีการใดวิธีการหนื่งได้แล้ว (มันมี 3 รูปแบบให้เลือก) กดปุ่ม
Optimize! แต่น แต้นนน เรียบร้อย เราจะได้ CSS code ที่ย่อขนาดแล้ว มาอย่างง่ายดาย
textarea{font:12pt verdana;background:#000 url(http://dekitclub.com/check_browser.php )!important no-repeat left top;color:#000;width:90%;height:160px!important;border:1px dashed #999;position:relative;overflow:visible}6. เอาไปใส่เลยครับ อย่าลืมเติม
<style> และ
</style> ด้วยล่ะ ถ้าในขั้นตอนแรกท่านต้องลบมันออก พอเราย่อแล้ว ท่านก็เอาใส่เหมือนเดิมนะ code ที่ได้มาใหม่นี้จะมีขนาดเล็กลงกว่าเดิม และอ่านยากขึ้น ทำให้ยากต่อการลอกเลียนแบบ ให้นำไปใส่แทน
css code อันเก่าได้เลยครับ
ปล. หากนำ css code ใหม่เข้าไปใส่แล้ว "เพี้ยน" ก็ให้ท่านอย่าเพิ่งปิด notepad ที่เราได้ทำการสำรองไว้ในตอนแรกนะครับ มันมีประโยชน์ จะได้ไม่เสียใจภายหลัง เหอๆๆๆ :aiwebs_044:
