หัวข้อ: [Tips Hi5] CSS Optimizer ลดขนาด CSS Code ให้สั้นลง และอ่านยากขึ้น เริ่มหัวข้อโดย: เด็กไอทีคลับ ที่ 7, 05 2008, 10:58:42 AM ตอนนี้คุณกำลังประสบปัญหาเกี่ยวกับ 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) (https://www.dekitclub.com/go/http://"http://www.bcoms.net/dictionnary/detail.asp?id=501") เข้าไป แบบนี้ครับ ex1. http://www.dekitclub.com/style/main.css (https://www.dekitclub.com/go/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.css or Optimize CSS via Direct Input: อันนี้แหละที่เราจะใช้กัน เพราะว่าเรา copy ไว้ใน notepad เรียบร้อยแล้วนิครับ :aiwebs_026: ลองผมไม่ใช้ขั้นตอนนี้ ท่านๆ ทั้งหลายคงจะเคืองผมน่าดู ว่าจะให้ copy ใส่ notepad ทำไม!! ให้นำ css ที่อยู่ใน notepad นั้น ใส่ไปในช่องใหญ่ๆ เลยครับ ex3. textarea { background-image:url(http://dekitclub.com/img.jpg (https://www.dekitclub.com/go/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 (https://www.dekitclub.com/go/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: หัวข้อ: Re: [Tip] CSS Optimizer ลดขนาด CSS Code ให้สั้นลง และอ่านยากขึ้น เริ่มหัวข้อโดย: nickk1133 ที่ 12, 05 2008, 03:02:59 AM ไม่รู้ว่า ผมเข้าใจถูกหรือเปล่านะ พี่
แต่ คือ โค้ด ยาวๆ มันจะย่อให้เหลือน้อยลง ประมาณเนี่ย ป่ะ พี่ หัวข้อ: Re: [Tip] CSS Optimizer ลดขนาด CSS Code ให้สั้นลง และอ่านยากขึ้น เริ่มหัวข้อโดย: lzephyrl ที่ 19, 05 2008, 11:34:34 PM :aiwebs_033: ยอดมากมาย ไว้ต้องศึกษากันอีกเยอะเลย ^^
หัวข้อ: Re: [Tip] CSS Optimizer ลดขนาด CSS Code ให้สั้นลง และอ่านยากขึ้น เริ่มหัวข้อโดย: IRONKONG ที่ 29, 10 2008, 08:00:18 PM มันสั้นได้ใจจริงๆวุ้ย เอามาทำโปรเจคได้รึเปล่าหว่า
หัวข้อ: Re: [Tips Hi5] CSS Optimizer ลดขนาด CSS Code ให้สั้นลง และอ่านยากขึ้น เริ่มหัวข้อโดย: เทพบุตรดอทคอม ที่ 9, 06 2009, 05:15:16 PM (http://upload.meemodel.com/UploadedFiles/42/gti0j12445398621136971.gif) (https://www.dekitclub.com/go/http://upload.meemodel.com/file.php?file=42/gti0j12445398621136971.gif)
ดีดี...เค้าทำได้แล้วเย้ :aiwebs_016: :aiwebs_005: หัวข้อ: Re: [Tips Hi5] CSS Optimizer ลดขนาด CSS Code ให้สั้นลง และอ่านยากขึ้น เริ่มหัวข้อโดย: CoolPha ที่ 27, 10 2009, 09:02:47 PM โห จะเอาแนว มันมาทำ โปรแจค เลยหรอ อ้วน
แล้วได้ป่ะหล่ะ หัวข้อ: Re: [Tips Hi5] CSS Optimizer ลดขนาด CSS Code ให้สั้นลง และอ่านยากขึ้น เริ่มหัวข้อโดย: paemam ที่ 29, 03 2010, 05:35:28 PM ดีเหมือนกันแหะ
|