วิธีใช้งาน
- วาง CSS ลงในช่องป้อนข้อมูล เปิดไฟล์ .css หรือลองตัวอย่าง
- เลือก Beautify เพื่อโค้ดที่อ่านง่าย หรือ Minify เพื่อผลลัพธ์ที่เล็กที่สุด
- เมื่อใช้ Beautify เลือก 2 ช่องว่าง 4 ช่องว่าง หรือแท็บ
- คัดลอกผลลัพธ์หรือดาวน์โหลดเป็นไฟล์ .css หากปีกกาหรือเครื่องหมายคำพูดไม่สมดุล ข้อผิดพลาดจะแสดงบรรทัดและคอลัมน์
วิธีการทำงาน
เครื่องมือนี้จะแยกสไตล์ชีตออกเป็นโทเค็นก่อน ได้แก่ สตริงในเครื่องหมายคำพูดเดี่ยวหรือคู่, ค่า url(…), คอมเมนต์, วงเล็บปีกกา และเซมิโคลอน เนื่องจากสตริงและ url() ถือเป็นโทเค็นเดียว เซมิโคลอนที่อยู่ใน data URI หรือวงเล็บปีกกาใน content: "{ }" จึงไม่ทำให้โครงสร้างสับสน และเนื้อหาจะถูกคัดลอกไว้เหมือนเดิมทุกประการ
โหมด Beautify จะวางแต่ละ selector ของรายการ selector ไว้บรรทัดละหนึ่งรายการ เพิ่มช่องว่างรอบตัวรวม child, sibling และ adjacent (>, ~, +) และเขียน declaration แต่ละรายการเป็น “property: value;” ไว้บรรทัดละรายการ บล็อกภายใน @media, @supports, @layer, @container และการซ้อน CSS แบบเนทีฟจะเยื้องหนึ่งระดับตามความลึก หากไม่มีเซมิโคลอนหลัง declaration สุดท้ายของบล็อกจะถูกเติมให้ คอมเมนต์จะคงอยู่ที่ตำแหน่งเดิม
โหมด Minify จะลบคอมเมนต์ออก (ยกเว้นประกาศลิขสิทธิ์ /*! … */) ยุบช่องว่าง ลบช่องว่างรอบวงเล็บปีกกา โคลอน เซมิโคลอน คอมม่า และตัวรวม selector และตัดเซมิโคลอนก่อนวงเล็บปิดแต่ละอัน ช่องว่างที่เปลี่ยนความหมายจะถูกเก็บไว้ เช่น descendant combinator ใน “.a .b” ช่องว่างใน “a :focus” และช่องว่างภายในค่า เช่น calc(100% - 2px) “! important” จะถูกปรับเป็น “!important”
เครื่องมือนี้ไม่เขียนค่าใหม่: สี หน่วย และเลขศูนย์จะคงไว้ตามที่เขียน และ rule จะไม่ถูกยุบรวมหรือเรียงลำดับใหม่ ไฟล์ SCSS หรือ Less ที่มีการซ้อนแบบธรรมดามักจะทำงานได้ แต่ไวยากรณ์เฉพาะของมัน เช่น // line comments หรือ mixins จะไม่รองรับ
ตัวอย่าง
การอ่านไฟล์เฟรมเวิร์กแบบ minified
วางตัวอย่าง bootstrap.min.css แบบบรรทัดเดียวแล้วเลือก Beautify ด้วยระยะเยื้อง 2 ช่องว่าง เพื่อดู rule แต่ละรายการ, media queries และ rule ที่ซ้อนกันในบรรทัดแยกและมีการเยื้อง
นำสไตล์ชีตที่เขียนเองไปใช้งานจริง
ย่อสไตล์ชีตขนาด 12 KB ที่มีคอมเมนต์และการเยื้องก่อนนำไปฝังแบบ inline ในเทมเพลตอีเมลหรือในส่วน head ของหน้าเว็บ สรุปจะแสดงจำนวนอักขระก่อนและหลัง
หาปีกกาที่หายไป
สไตล์ชีตหยุดมีผลกลางทาง ตัวจัดรูปแบบแจ้งว่า “{ นี้ไม่ถูกปิดด้วย } ที่ตรงกัน” พร้อมบรรทัดของกฎที่ขาดปีกกาปิด
คำถามที่พบบ่อย
CSS ที่ย่อจากเครื่องมือนี้ปลอดภัยสำหรับใช้งานจริงหรือไม่
เครื่องมือนี้ลบเฉพาะคอมเมนต์และช่องว่างที่ CSS ไม่สนใจ กฎจึงทำงานเหมือนเดิม ไม่ได้ทำการปรับแต่งเชิงลึกเหมือนเครื่องมือ build เช่น การรวมกฎหรือการย่อสี ผลลัพธ์จึงอาจใหญ่กว่าของเครื่องมือเหล่านั้นเล็กน้อย
ทำไมจึงเก็บช่องว่างใน “a :focus” ไว้
ใน selector ช่องว่างคือ descendant combinator “a :focus” หมายถึงอิลิเมนต์ที่ถูกโฟกัสอยู่ภายในลิงก์ ส่วน “a:focus” หมายถึงลิงก์ที่ถูกโฟกัส การลบช่องว่างนั้นจะเปลี่ยนว่าอิลิเมนต์ใดตรงกับกฎ
จัดรูปแบบ SCSS หรือ Less ได้ไหม
กฎ nested แบบปกติจะถูกจัดรูปแบบอย่างถูกต้อง ไวยากรณ์เฉพาะพรีโปรเซสเซอร์ เช่น คอมเมนต์ //, mixin ที่มีอาร์กิวเมนต์ หรือบล็อก @if จะไม่ถูกเข้าใจและอาจถูกจัดรูปแบบแปลก ๆ จึงควรตรวจสอบผลลัพธ์
คอมเมนต์แสดงสิทธิ์การใช้งานถูกลบออกเมื่อย่อขนาดหรือไม่
คอมเมนต์ที่ขึ้นต้นด้วย /*! จะถูกเก็บไว้ ซึ่งเป็นธรรมเนียมปกติสำหรับประกาศลิขสิทธิ์และสิทธิ์การใช้งาน คอมเมนต์อื่น ๆ จะถูกลบออก
ความเป็นส่วนตัว
CSS ของคุณถูกประมวลผลในเบราว์เซอร์ของคุณเท่านั้น ไม่มีการอัปโหลด จัดเก็บ หรือรวมอยู่ใน analytics