ตัวจัดรูปแบบและบีบอัด CSS
จัดระเบียบ CSS ให้อ่านง่าย หรือบีบอัดก่อนนำขึ้นใช้งาน
ทำงานในเครื่อง
loading…
เกี่ยวกับเครื่องมือนี้
กาง CSS ที่ถูกบีบอัดหรือคัดลอกมาให้เป็นกฎที่มีหนึ่งคำประกาศต่อบรรทัด หรือบีบสไตล์ชีตให้เล็กลงสำหรับใช้งานจริง ตัวจัดระเบียบจะปรับการย่อหน้าและตำแหน่งวงเล็บปีกกาให้เป็นมาตรฐาน ส่วนตัวบีบอัดจะตัดคอมเมนต์ ยุบช่องว่าง และตัดอัฒภาคตัวสุดท้ายทิ้ง โดยไม่แตะต้องสตริง เนื้อหาใน url(...) และนิพจน์ calc()
ตัวบีบอัดโปร่งใสเรื่องสิ่งที่มันไม่ทำ: มันจะไม่เปลี่ยนชื่อตัวเลือก ไม่รวมกฎที่ซ้ำกัน และไม่เขียนค่าสีใหม่ ผลลัพธ์จึงคาดเดาได้และปลอดภัยกับสไตล์ชีตทุกแบบ รวมถึงแบบที่มีเทคนิคพิเศษและคำนำหน้าของผู้ผลิต — วาง บีบอัด แล้วส่งขึ้นใช้งาน
เช่นเดียวกับทุกเครื่องมือที่นี่ การประมวลผลเกิดขึ้นในเครื่อง โค้ดของระบบออกแบบที่ยังไม่เปิดตัวจึงอยู่ในเบราว์เซอร์ของคุณ
คำถามที่พบบ่อย
- CSS ที่บีบอัดแล้วเล็กลงแค่ไหน?
- โดยทั่วไป 15–30% สำหรับ CSS ที่เขียนด้วยมือ ส่วนใหญ่มาจากการย่อหน้าและคอมเมนต์ Gzip บนเซิร์ฟเวอร์ของคุณกำจัดความซ้ำซ้อนแบบเดียวกันไปได้มาก ส่วนต่างบนสายจึงน้อยกว่าที่ตัวเลขไบต์ดิบบอกไว้ — แต่ก็ควรบีบอัดอยู่ดี เพราะมันลดเวลาแยกวิเคราะห์ด้วย
- ปลอดภัยกับ calc(), custom property และ media query ไหม?
- ปลอดภัย ช่องว่างภายใน calc() มีความหมายและถูกรักษาไว้ custom property กับการอ้างอิงผ่าน var() เป็นคำประกาศธรรมดาและรอดโดยไม่เปลี่ยนแปลง ส่วน @media และ at-rule อื่น ๆ ก็คงโครงสร้างไว้
- ทำไมตัวเลือกแบบลูกหลานยังคงช่องว่างไว้?
- เพราะ “nav a” กับ “nava” เลือกคนละสิ่ง — ช่องว่างคือตัวประกอบ ไม่ใช่การจัดรูปแบบ ตัวบีบอัดลบเฉพาะช่องว่างที่ไม่มีความหมายทางไวยากรณ์เท่านั้น
- แปลงระหว่าง LESS/SCSS กับ CSS ได้ไหม?
- ไม่ได้ — ไวยากรณ์ของพรีโปรเซสเซอร์ต้องการการคอมไพล์ ไม่ใช่การจัดรูปแบบ SCSS ธรรมดาที่เป็น CSS ที่ถูกต้องอยู่แล้วจะจัดรูปแบบได้ดี ส่วนกฎที่ซ้อนกันและมิกซ์อินจะไม่ได้