การลดขนาดและการบีบอัด CSS: เคล็ดลับและเครื่องมือ (1)

เครื่องมือเพิ่มประสิทธิภาพ CSS

ตัวเลือก:

• อย่าลบตัวแบ่งบรรทัด (ใช่หรือไม่ใช่)
• CSS ที่สามารถจัดการ URL ไฟล์ หรือข้อความที่วาง ฯลฯ

ลอตเตอรีโพสต์

ตัวเลือกเพิ่มเติม: ไม่มี

ทำความสะอาด CSS

ตัวเลือกเพิ่มเติม (คุณสามารถเลือกใช่หรือไม่ใช่สำหรับแต่ละรายการ):

• จัดเรียงตัวเลือกใหม่
• จัดเรียงแอตทริบิวต์ใหม่
• ตัวเลือกการปรับให้เหมาะสมและคุณสมบัติ (0, 1 หรือ 2)
• ผสานคุณลักษณะชวเลข
• การเพิ่มประสิทธิภาพความปลอดภัยเท่านั้น
• บีบอัดสี
• การบีบอัดแบบอักษร-น้ำหนัก
• ตัวเลือกตัวพิมพ์เล็ก
• แบบอักษรที่ระบุแหล่งที่มา (ตัวพิมพ์เล็กหรือตัวพิมพ์ใหญ่)
• ลบแบ็กสแลชที่ไม่จำเป็นออก
• แปลง!แฮ็คที่สำคัญ
• ลบอัฒภาคสุดท้าย ";"
• บันทึกโน้ต
• กำจัดคุณสมบัติที่ไม่ถูกต้อง (CSS2.1, CSS2.0 หรือ CSS1.0)
• อินพุตเป็นไฟล์

ปิงเกตส์

ตัวเลือกเพิ่มเติม (คุณสามารถเลือกใช่หรือไม่ใช่สำหรับแต่ละรายการ):

• แปลงชื่อสียาวให้เป็นเลขฐานสิบหก
• แปลงรหัสฐานสิบหกแบบยาวให้เป็นรหัสฐานสิบหกแบบสั้น
• แปลงรหัสเลขฐานสิบหกแบบยาวเป็นชื่อสี
• แปลง RGB เป็นเลขฐานสิบหก
• ลบ 0 เมตริก
• รวมกฎเดียวกัน
• รวมตัวเลือกเดียวกัน
• ผสานคุณสมบัติ
• ลบแอตทริบิวต์ที่ซ้ำกัน
• ลบค่าที่ไม่มีประโยชน์ออกจากระยะขอบและช่องว่างภายใน
• แสดงสถิติ
• เอาต์พุตในรูปแบบสี
• ใช้ขนาดขั้นต่ำสำหรับเอาต์พุต

PHP อินไซเดอร์

ตัวเลือกเพิ่มเติม: ไม่มี

เจ็ดสี่สิบ

ตัวเลือก:

• ตัวเลือกการตัดทอน: 500, 1,000, 1500 หรือ 2000

เครื่องมือนี้ใช้คอมเพรสเซอร์ YUI แต่จะ ลบแฮ็ก IE โดยอัตโนมัติ คำอธิบายที่นักพัฒนากำหนดไว้คือแฮ็ก IE ควรปรากฏในไฟล์เดียว แทนที่จะปะปนกันในไฟล์ CSS หลัก ซึ่งจะทำให้ยากต่อการดูแลรักษา

คอลัมน์หน้า

ทางเลือก: ไม่มี

เครื่องมือบีบอัด CSS บนเดสก์ท็อปที่แนะนำ

คอมเพรสเซอร์ YUI และคอมเพรสเซอร์ TB

YUI Compressor เป็นเครื่องมือบีบอัดโค้ดส่วนหน้าที่พัฒนาโดยทีมงานส่วนหน้าของ Yahoo และทรงพลังมาก จำเป็นต้องมีสภาพแวดล้อมการทำงาน Java คุณสามารถใช้คำสั่ง java เพื่อบีบอัดไฟล์ CSS และ JS ด้วยตนเอง หรือคุณสามารถ ใช้ ant เพื่อบีบอัดไฟล์เป็นชุดระหว่างการคอมไพล์

Yu Bo จากทีมส่วนหน้าของ Taobao ใช้เครื่องมือบีบอัดแพลตฟอร์ม Windows ที่บรรจุโดยคอมเพรสเซอร์ YUI ซึ่งติดตั้งและถอนการติดตั้งได้ง่ายมาก เช่นเดียวกับ YUI Compressor อันทรงพลัง TBCompressor ไม่เพียงแต่สามารถบีบอัด CSS เท่านั้น แต่ยังบีบอัด JS ได้อีกด้วย

ดาวน์โหลดได้ที่นี่ เรียนรู้เพิ่มเติมเกี่ยวกับ TBCompressor – เครื่องมือบีบอัด JS และ CSS

นอกจากนี้ ขอแนะนำให้อ่าน " การปรับปรุงกระบวนการบีบอัดไฟล์ CSS โดย TBCompressor " โดย Qu Chao

เครื่องมือเพิ่มประสิทธิภาพทรัพยากร web 2.0

เครื่องมือเดสก์ท็อปที่พัฒนาโดยคนจีนที่ใช้ Delphi 7 ยังสามารถบีบอัด CSS และ JS ได้อีกด้วย แนะนำเลย. เป็นที่น่าสังเกตว่าผู้เขียนได้เผยแพร่ซอร์สโค้ดของโครงการ

ผสาน CSS

เครื่องมือที่ใช้ AIR ผลิตโดย CSS Forest Webmaster Gui Ge ซึ่งมีฟังก์ชันที่มีประโยชน์มากมาย เช่น การรวมหลายไฟล์ การรวม @import ไฟล์ที่นำเข้า เป็นต้น ดูรายละเอียดเบื้องต้น

ควรสังเกตว่าการรองรับคำย่อและการรวมแอตทริบิวต์ของเครื่องมือนั้นไม่ค่อยดีนัก หากสามารถเพิ่มการรองรับเหล่านี้ได้

สิ่งที่สำคัญมากอีกประการหนึ่งคือจนถึงตอนนี้ Gui Ge ยังไม่ได้เปิดตัวเครื่องมือนี้ หากคุณต้องการลองใช้ สามารถติดต่อเขาได้

ความเร็วหน้า

ความเร็วของหน้า คือปลั๊กอินของ Firefox ที่ใช้ Firebug ที่พัฒนาโดย Google ส่วนใหญ่จะใช้เพื่อวิเคราะห์ประสิทธิภาพส่วนหน้าของเว็บไซต์ แต่ ในตัวเลือก Minify CSS ในรายการผลลัพธ์การวิเคราะห์ความเร็วหน้า ให้คลิกเพื่อดูอัตราส่วนการบีบอัดของ CSS ของคุณ และจะมีเวอร์ชันบีบอัดให้ในภายหลัง ซึ่งคุณสามารถคลิกเพื่อดูได้ ข้อเสียเปรียบเพียงอย่างเดียวคือไม่สามารถปรับแต่งการบีบอัดได้

ไม่ว่าเว็บไซต์จะดูน่าเกลียดแค่ไหน GZIP ก็เป็นเครื่องมือที่มีประโยชน์มากสำหรับการบีบอัดโค้ดหลายประเภท อาจไม่ใช่วิธีบีบอัดที่ง่ายที่สุด และอาจทำให้สับสนเล็กน้อยสำหรับผู้เริ่มต้น ลองอ่าน บทช่วยสอนนี้ เพื่อดูข้อมูลเพิ่มเติมเกี่ยวกับการใช้ GZIP เพื่อบีบอัดสไตล์ของคุณ

สรุป

อย่างที่บอกไปแล้วว่าวิธีการเหล่านี้บางวิธีอาจดูมากเกินไปหรือไร้จุดหมาย สิ่งสำคัญคือการมองภาพใหญ่ แม้ว่าเทคนิคใดเทคนิคหนึ่งเหล่านี้อาจมีผลกระทบเพียงเล็กน้อย แต่การรวมเทคนิคต่างๆ เหล่านี้หรือทั้งหมดเข้าด้วยกันอาจมีผลกระทบอย่างมากต่อขนาดไฟล์ CSS ของคุณ