เด็กไอทีคลับ คลับซ่าฅนไอที

iT club | ไอทีคลับ คลับของคนไอที => Hi5 Club => ข้อความที่เริ่มโดย: เด็กไอทีคลับ ที่ 7, 05 2008, 10:58:42 AM



หัวข้อ: [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") link เข้าไป แบบนี้ครับ
ex1. http://www.dekitclub.com/style/main.css (https://www.dekitclub.com/go/http://www.dekitclub.com/style/main.css) link

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) link)!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) link)!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) link


ดีดี...เค้าทำได้แล้วเย้ :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
ดีเหมือนกันแหะ