ย่อและจัดรูปแบบ CSS ฟรี

วิธีการทำงาน

เครื่องมือนี้ใช้ตัวแบ่งโทเค็น CSS ที่เขียนขึ้นเองโดยไม่พึ่งพาสิ่งใด สร้างด้วย JavaScript ทั้งหมด — ไม่มีไลบรารีภายนอก ไม่มีการเรียกเซิร์ฟเวอร์ ตัวแบ่งโทเค็นจำแนกทุกอักขระเป็นโค้ด คอมเมนต์ สตริงในเครื่องหมายคำพูด หรือค่า url() ก่อนแปลงใด ๆ ซึ่งป้องกันไม่ให้กฎช่องว่างทำลายเนื้อหาสตริง data URI หรือนิพจน์ calc()

1. 1
   รอบการแบ่งโทเค็น

   CSS อินพุตถูกสแกนทีละอักขระและแบ่งเป็นโทเค็นตามประเภท: ส่วนโค้ดดิบ คอมเมนต์ /* ... */ สตริงในเครื่องหมายคำพูด (คง escape sequence) และบล็อก url(...) ทำให้การแปลงในขั้นถัดไปแตะเฉพาะไวยากรณ์ CSS จริง — ไม่แตะเนื้อหาของสตริงหรือ data URI
2. 2
   การย่อขนาดหรือจัดให้สวยงาม

   ในโหมดย่อขนาด คอมเมนต์ปกติจะถูกตัด (คอมเมนต์ /*! license */ ถูกเก็บไว้) ช่องว่างต่อเนื่องในโทเค็นโค้ดถูกยุบเป็นช่องเดียว และช่องว่างรอบเครื่องหมาย { } : ; , > ~ ถูกลบ ช่องว่างรอบ + และ - ถูกปล่อยไว้โดยตั้งใจเพื่อไม่ให้นิพจน์ calc() เสีย ในโหมดจัดให้สวยงาม โค้ดจะถูกย่อขนาดเป็นฐานที่สะอาดก่อน แล้วแบ่งโทเค็นและเยื้องใหม่ด้วยการติดตามความลึกสองช่องว่าง และตรวจจับโคลอนของการประกาศเพื่อแยก property: value จากโคลอนของ selector เช่น a:hover
3. 3
   ประมาณขนาด gzip

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

   CSS ที่ประมวลผลแล้วถูกเขียนลงคลิปบอร์ดผ่าน Clipboard API หรือดาวน์โหลดเป็น styles.min.css (โหมดย่อขนาด) หรือ styles.css (โหมดจัดให้สวยงาม) ด้วย Blob ชนิด MIME text/css เปอร์เซ็นต์ขนาดที่ลดลงแสดงสดขณะพิมพ์

เครื่องมือที่เกี่ยวข้อง