🗜️ เครื่องบีบอัด CSS

เกี่ยวกับ

เครื่องบีบอัด CSS นี้ทำงานทั้งหมดในเบราว์เซอร์ของคุณโดยใช้วิธีการตัดแบ่งตัวอักษร (tokenization) ซึ่งจัดการกับกรณีที่ซับซ้อนได้อย่างถูกต้อง มันจะลบข้อความแสดงความคิดเห็นแบบบรรทัดเดียว (//) และแบบหลายบรรทัด (/* */) ยุบลำดับของพื้นที่ว่างให้เหลือแค่หนึ่งช่องว่างหรือลบออกโดยรอบเครื่องหมายต่าง ๆ เช่น { } : ; , และ > และรักษาเนื้อหาของข้อความที่ถูกอ้างอิงและค่า url() เพื่อให้พื้นที่ว่างภายใน URI ข้อมูลหรือชื่อฟอนต์ไม่ถูกทำลาย เนื่องจากเป็นตัวตัดแบ่งตัวอักษรพื้นฐานมากกว่าการวิเคราะห์ต้นไม้ข้อมูล (AST parser) จึงมีความเร็วสูงและไม่ต้องพึ่งพาไลบรารีอื่น ๆ ซึ่งเหมาะสำหรับ CSS ที่เขียนด้วยมือหรือสร้างโดยเครื่องมือช่วยเขียนโค้ดส่วนใหญ่ เครื่องมือนี้แสดงขนาดเดิม ขนาดที่บีบอัดแล้ว และจำนวนไบต์ที่ประหยัดได้ เพื่อให้คุณตัดสินใจได้ว่าจะต้องปรับปรุงเพิ่มเติมหรือไม่

วิธีใช้งาน

1. วาง CSS ของคุณในพื้นที่ป้อนข้อมูลทางด้านซ้าย
2. คลิก Minify — เครื่องมือจะตัดแบ่งตัวอักษร CSS ของคุณและแสดงผลลัพธ์ที่บีบอัดแล้วทางด้านขวา
3. ตรวจสอบสรุปขนาดเพื่อดูขนาดเดิม ขนาดที่บีบอัดแล้ว และจำนวนไบต์ที่ประหยัดได้
4. คลิก Copy เพื่อคัดลอก CSS ที่บีบอัดแล้วไปยังคลิปบอร์ด หรือใช้ Download เพื่อเซฟเป็นไฟล์ .css

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

เครื่องมือนี้ประมวลผล CSS ของคุณบนเซิร์ฟเวอร์ไหม?

ไม่ เครื่องมือบีบอัดทำงานทั้งหมดในเบราว์เซอร์ของคุณด้วย JavaScript CSS ของคุณจะไม่ถูกส่งไปที่ใดทั้งสิ้น

การบีบอัดจะทำให้ CSS ของฉันเสียหายไหม?

ตัวตัดแบ่งตัวอักษรจะปกป้องข้อความที่ถูกอ้างอิงและค่า url() ดังนั้น CSS ที่ถูกต้องควรจะไม่เสียหาย อย่างไรก็ตาม นี่ไม่ใช่ตัววิเคราะห์ต้นไม้ข้อมูล (AST parser) ทั้งหมด กรณีขอบเขตที่ไม่ปกติในไวยากรณ์ที่ไม่มาตรฐานอาจไม่ได้รับการจัดการอย่างสมบูรณ์

คำคอมเมนต์แบบ single-line // จะถูกลบไปไหม?

ใช่ ทั้ง // single-line และ /* */ multi-line จะถูกลบออก โปรดทราบว่า // ไม่ใช่ส่วนหนึ่งของ CSS spec อย่างเป็นทางการ แต่เป็นที่นิยมในไฟล์ source ของ preprocessor

CSS ของฉันจะเล็กลงแค่ไหน?

CSS ที่เขียนมือโดยทั่วไปจะลดขนาดลง 20–40% ไฟล์ที่มีคอมเมนต์จำนวนมากหรือมีการเว้นวรรคมากจะลดขนาดได้มากกว่า สำหรับการบีบอัดสูงสุด ให้ใช้ร่วมกับ gzip หรือ Brotli บนเซิร์ฟเวอร์ของคุณ

ฉันสามารถบีบอัด CSS ที่มีตัวแปรหรือคำนวณ calc() ได้ไหม?

ได้ คุณสมบัติเฉพาะ (--var), var(), calc() และฟังก์ชัน CSS รูปแบบใหม่อื่น ๆ จะถูกจัดการเหมือนค่าตัวแปรทั่วไปและผ่านการประมวลผลได้อย่างปลอดภัย

เครื่องมือนี้จะอัปโหลดข้อมูลของฉันหรือไม่?

ไม่ ทุกอย่างทำงานในเบราว์เซอร์ของคุณ ดังนั้นข้อมูลของคุณจึงไม่เคยออกจากอุปกรณ์ของคุณ — และหลังจากโหลดหน้าแล้วยังใช้งานแบบออฟไลน์ได้ด้วย