ตัวย่อ CSS

เกี่ยวกับเครื่องมือนี้

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

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

ฉันเคยใช้เครื่องมือเหล่านี้หลายสิบตัวมาในช่วงหลายปี ส่วนใหญ่ใช้ได้ดีพอสมควร บางตัวห่วย บางตัวกลับมีความคล่องตัวอย่างน่าประทับใจ แต่ทุกตัวทำงานพื้นฐานเดียวกัน: ทำให้ CSS ของคุณเล็กลง และเล็กลงมักหมายถึงการโหลดที่เร็วขึ้น ซึ่งพูดตามตรง นั่นคือสิ่งที่เราทุกคนต้องการ

คุณสมบัติหลัก

• ลบช่องว่างและการขึ้นบรรทัดที่ไม่จำเป็น—เพราะเบราว์เซอร์ของคุณไม่สนใจรูปแบบการจัดรูปแบบของคุณ
• ลบคอมเมนต์ออก ใช่แล้ว แม้แต่บันทึกที่คุณเขียนไว้ให้ตัวเองในปี 2019 ด้วย
• ย่อโค้ดสีแบบ hex เมื่อเป็นไปได้—#ffffff กลายเป็น #fff เพราะทำไมต้องพิมพ์มากกว่าที่จำเป็นล่ะ?
• รวมเซลเล็กเตอร์และคุณสมบัติที่ซ้ำกันเมื่อทำได้อย่างปลอดภัย
• รักษาฟังก์ชันการทำงานไว้ เค้าโครงของคุณจะไม่พัง (ส่วนใหญ่แล้ว)
• ทำงานทันที ไม่ต้องสมัคร ไม่ต้องดาวน์โหลด เพียงวางแล้วไป
• มักจะมีตัวเลือก “คืนค่า” หรือ “ทำให้สวยงาม” ในกรณีที่คุณต้องการอ่านผลลัพธ์ในภายหลัง

คำถามที่พบบ่อย

การ minify จะทำให้เว็บไซต์ของฉันพังหรือไม่?
แทบไม่เคย เครื่องมือ minifier ส่วนใหญ่ใช้ความระมัดระวัง แต่ถ้า CSS ของคุณมีการแก้ปัญหาแปลกๆ หรือพึ่งพารูปแบบเฉพาะ (เช่น กฎ @import บางอย่าง) สิ่งต่างๆ อาจผิดพลาดได้ ทดสอบหลังจาก minify เสมอ และเก็บสำรองไว้ จริงๆ นะ

ฉันควร minify ระหว่างการพัฒนาหรือไม่?
ไม่เลย รักษาไฟล์ต้นฉบับให้สะอาดและอ่านง่ายขณะที่คุณทำงาน ให้ minify เมื่อคุณพร้อมที่จะเผยแพร่เท่านั้น ใช้ source maps ถ้าคุณกังวลเรื่องการดีบักในภายหลัง