จัดรูปแบบ CSS ฟรี

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

เครื่องมือนี้จัดรูปแบบ CSS ด้วยตัวแยกวิเคราะห์แบบเรียกซ้ำที่เขียนขึ้นเองในหน้าโดยตรง — ไม่มีไลบรารีภายนอก ไม่มีการเรียกเซิร์ฟเวอร์ ตัวแยกวิเคราะห์ไล่ CSS ทีละอักขระ จัดการสตริงในเครื่องหมายคำพูด ค่า url() at-rule ที่ซ้อนกัน และคอมเมนต์ได้ถูกต้อง ซึ่งวิธีแบบ regex ธรรมดาจะสับสน

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

   ฟังก์ชัน walkCss สแกนอินพุตดิบทีละอักขระ ติดตามสถานะเครื่องหมายคำพูดและความลึกของวงเล็บ อัฒภาคหรือวงเล็บปีกกาภายใน url() ค่าสตริง หรือคอมเมนต์จึงไม่ถูกเข้าใจผิดว่าเป็นตัวคั่นโครงสร้าง
2. 2
   การแยกบล็อกและการประกาศ

   เมื่อสแกนเนอร์พบวงเล็บปีกกาเปิดระดับบนสุด จะดึงส่วนนำ (selector หรือคีย์เวิร์ด at-rule) และประมวลผลเนื้อหาบล็อกแบบเรียกซ้ำ — ซึ่งอาจมีกฎซ้อน (@media, @supports, CSS nesting แบบเนทีฟ) ที่จัดการในระดับการเรียกซ้ำที่ลึกกว่า
3. 3
   การเรียงคุณสมบัติและการเยื้อง

   การประกาศในแต่ละบล็อกถูกรวบรวมเป็นชุด แล้วเรียงตามชื่อคุณสมบัติตามตัวอักษรหากเลือก ก่อนเขียนออกด้วยความกว้างการเยื้องที่เลือก (2 หรือ 4 ช่องว่าง) โหมดย่อขนาดข้ามช่องว่างทั้งหมดและตัดคอมเมนต์ออก
4. 4
   ผลลัพธ์ทันทีในเบราว์เซอร์

   ผลลัพธ์ปรากฏขณะพิมพ์ผ่าน useMemo hook — ไม่มีสิ่งใดถูกส่งไปที่ใด CSS ที่จัดรูปแบบหรือย่อขนาดแล้วคัดลอกไปยังคลิปบอร์ดหรือดาวน์โหลดเป็นไฟล์ .css ได้ และแผงแสดงผลต่างขนาดเทียบกับต้นฉบับ

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