m e d d l e s o m e_

เวลาเราแก้ theme ใน exteen หรือเว็บไซต์ต่างๆ เราจะใช้ CSS กันทั้งนั้น ซึ่งการแก้โค้ดบางคนชำนาญก็สบายไป แต่บางคนยัง งงๆ กับ CSS ที่โค้ดมากมาย วันนี้ผมจะมาแนะนำเครื่องมือที่จะช่วยประหยัดเวลาลงได้

1.)Rapid CSS

เป็นโปรแกรมที่เอาไว้แก้ CSS โดยเฉพาะ(แต่แก้ไฟล์อื่นได้) เป็นโปรแกรมครอบจักรวาล อารมณ์เดียวกับ Editplus แต่ความสามารถในการแก้ CSS มันเยอะกว่ามากมาย แถมเลือก Preview ได้ตามสะดวกว่าจะให้ Output เป็น IE หรือ Internet Explorer

2.)CSS Viewer (Firefox Extension)

เป็น Extension(โปรแกรมเสริมใน Firefox) ซึ่งมีไว้เพื่อส่องว่า ส่วนไหนของเว็บไซต์ที่เราดูอยู่ ใช้ CSS ส่วนไหน แล้วมีค่าต่างๆ(ขนาด/ความยาว/ความสูง/สี ฯลฯ) อะไรบ้าง เรียกได้ว่า ส่องมันทั้งหน้าเลย แถมมันตีกรอบให้เราด้วยว่าส่องอะไรอยู่ !!! แจ่มครับ โหลดที่นี่

3.Edit CSS (Firefox Extension)

เป็น Extension อีกเช่นกัน แต่ตัวนี้ไม่ได้ไว้ส่องดูความสูง แต่เรียกดูโค้ดแล้วมาแก้ แล้วจะแสดงผลลัพธ์ทันทีใน Firefox เลย แต่ตัวนี้จะมีผลเสียกับเว็บที่ใช้ CSS อ้างอิงด้วย URL แบบไม่เต็มเช่น ./test.gif เป็นต้น มันจะไม่แสดงให้ ยกเว้นถ้า URL เต็มรูปแบบ เช่น http://www.test.com/test.gif แต่ผมก็ไว้แก้ได้สดๆเลย เสียเวลาน้อยลง โหลดที่นี่

4.X-Ray (Java Script)

ตัวนี้เป็น Java Script ซึ่งต้องรันขณะที่ต่อเน็ตอยู่เท่านั้น (เพราะ Script อยู่ที่อื่น) ซึ่งหลักการคล้าย CSS Viewer แต่ ตัวนี้จะมีขีดแสดงความกว้างยาวให้เราเห็น แถม Highlight ได้ชัดเจนมากเลยครับ แต่ข้อเสียคือ รายละเอียดไม่ชัดเจนเท่า CSS Viewer

วิธีการใช้ คือไปที่เว็บที่เราต้องการส่อง แล้วกดลิงค์ที่เราลากไว้ที่ Bookmarks Toolsbar แล้วคลิกเลือกวัตถุใน Webที่เราต้องการส่องได้เลย ลากลิงค์นี้ไปไว้ที่ Bookmarks Toolsbar

5.ColorZilla (Firefox Extension)

ถึงแม้ตัวนี้จะไม่เกี่ยวกับ CSS โดยชัดเจน แต่ก็เป็น Extension ที่เหมาะไว้วัดค่าสีอย่างรวดเร็วในหน้าเว็บที่เราต้องการ โดยลืมวิธีการเก่าๆที่ต้อง print screen > Paste ใน Photoshop > ใช้ eyedropper วัดสี โอยยยยุ่งยากจริงๆ 55+ใช้ Color Zilla ก็จบเลยครับ โหลดที่นี่

เพิ่มเติมจากคอมเมนต์ครับ ขอบคุณครับ

6.)Firebug (Firefox Extension)

Firefox Extension อีกตัวที่ไว้แก้ CSS,HTML,Javascript ได้ดีเยี่ยมผมลองแล้วคิดว่า work กว่าตัวข้างบนอีก 555+ แถมแก้แแล้วดูผลลัพธ์ได้เลย โดยสามารถดูความเร็วในการโหลดวัตถุต่างๆในเว็บของเรา เช่น css,รูปภาพ,javascript ต่างๆ จุดเด่นอีกจุดคือ เวลาเราแก้แล้วเอาเมาส์ไปวางในโค้ด CSS จะมี Thumbnail รีวิวเล็กๆขึ้นมาว่าเป็นสีอะไร หรือเป็นรูปอะไร แจ่มดีครับ โหลดที่นี่

 7.)Web Developer(Firefox Extension)

 จะบอกว่าอันนี้สุดยอดจริงๆครับ !!! สุดยอด extension เลยแหละ ความสามารถรอบตัวจริงๆ สามารถเปิด/ปิดวัตถุในเว็บเพจต่างๆได้หมดเลย เช่นรูป/Script หรือแม้กระทั่งการไม่สนใจสี Font !!! สิ่งที่ชอบคือเรื่องการ Resize หน้าจอครับเพราะผมใช้ 1024*768 เวลาทำเว็บจะต้องย่อ Browser ไปที่ขนาด 800*600 ซึ่งมันก็ไม่แน่นอนเหมือนกัน แต่ Extension ตัวนี้ทำได้หมดเลยครับ แต่อารมณ์ดู CSS เหมือนไปดู RSS เลยแฮะ :P มันมาในรูปแบบ Toolsbar ครับ เครื่องมือเยอะมากสุดยอดจริงๆ !!! โหลดที่นี่

ทั้งหมดนี้ก็เป็นเครื่องมือที่เหมาะไว้สำหรับเวลาแก้ CSS นะครับ จะสังเกตว่า มี Tools ที่ใช้กับ Firefox ทั้งนั้น !!! แนะนำเลยครับ ใครที่ยังใช้ Internet Explorer อยู่ เปลี่ยนมาใช้ Firefox กันเถอะครับ คนทำเว็บเหนื่อยมาก :P เพราะ IE เรื่องมากสุดๆ T_T

ถ้าใครมีโปรแกรมเพิ่มเติมที่แจ่มกว่าก็คอมเม้นท์ไว้นะครับ ^^ จะได้เอาไว้ใช้งานด้วย

ปล.แถวนี้มีใครรู้จัก AKB48 รึเปล่าครับ ถ้ารู้จักส่งเสียงหน่อยนะครับ :P