เครื่องมือย่อ CSS
ย่อและบีบอัดโค้ด CSS ในเบราว์เซอร์เพื่อเตรียม stylesheet ที่มีขนาดเล็กลง
เจตนาการค้นหา
การย่อลด CSS ก่อนปล่อยใช้งานเพื่อให้น้ำหนักเบาขึ้น
การ minify CSS ใช้เพื่อลบช่องว่างและคอมเมนต์ ลดขนาดข้อมูลที่ส่ง และช่วยให้การโหลดสไตล์ชีตเร็วขึ้น
การลบช่องว่าง บรรทัดว่าง และคอมเมนต์จากไฟล์ CSS จะลดจำนวนไบต์ ซึ่งช่วยลดเวลาโอนข้อมูลและเพิ่มประสิทธิภาพการโหลดครั้งแรกเมื่อ deploy สินทรัพย์
ก่อนเผยแพร่ ให้สำรอง CSS ต้นทางไว้ก่อน เปรียบเทียบขนาดก่อน/หลัง และตรวจสอบส่วนที่สำคัญต่อความอ่านง่าย เช่น calc(), ตัวแปร และ selector ก่อนนำไปใช้
เมื่อไรจึงใช้
ใช้ก่อนนำขึ้น production เมื่อคุณต้องการ stylesheet ที่เล็กลงและส่งได้เร็วขึ้น
ลดอะไรบ้าง
ระบบจะลบช่องว่างเกิน ความยาวบรรทัดเพิ่ม และคอมเมนต์เพื่อให้ขนาด payload สำหรับเครือข่ายลดลง
จุดตรวจสอบก่อนปล่อย
เก็บไฟล์ต้นฉบับไว้ก่อน ตรวจสอบเปรียบเทียบขนาดแล้วทดสอบการอ่านและเลย์เอาต์อย่างเร็ว ๆ ก่อน deploy
เป็นการ minify ข้อมูลแบบเบา ไม่ใช่เครื่องมือยืนยันโค้ด จึงควรทดสอบใน staging และเก็บสำเนาไฟล์ต้นฉบับก่อนเขียนทับ
เครื่องมือย่อ CSS พื้นที่ทำงานเครื่องมือย่อ CSS
วิธีใช้
- 1 วางโค้ด CSS ที่ต้องการย่อลงในช่องอินพุต
- 2 คลิกปุ่มย่อเพื่อลบคอมเมนต์ ช่องว่างส่วนเกิน และอักขระที่ไม่จำเป็น
- 3 คัดลอก CSS ผลลัพธ์ไปใช้ในไฟล์ build หรือ deployment
กรณีใช้งานทั่วไป
- ลบคอมเมนต์ CSS
- บีบอัดช่องว่างใน stylesheet ด้วย CSS minifier
- ตรวจขนาดก่อนและหลังย่อ
คำถามที่พบบ่อย
การย่อ CSS ทำอะไรบ้าง?
ทำหน้าที่เป็น CSS minifier แบบเบา โดยลบคอมเมนต์ รวมช่องว่าง และตัดช่องว่างที่ไม่จำเป็นรอบวงเล็บปีกกา โคลอน เซมิโคลอน และคอมมา
คัดลอกผลลัพธ์ได้หรือไม่?
ได้ หลังจากย่อแล้ว คุณสามารถคัดลอก CSS จากช่องผลลัพธ์ และดูขนาดของอินพุตกับเอาต์พุตได้
ควรตรวจอะไรต่อก่อนใช้ CSS ที่ย่อแล้ว?
เครื่องมือนี้ย่อด้วยกฎแบบง่ายและไม่แก้ syntax error ของ CSS จึงควรตรวจผลลัพธ์ก่อนนำไปใช้จริง