CSS Beautifier
จัดรูปแบบและเยื้อง CSS ที่ยุ่งเหยิงได้ทันที
CSS ต้นฉบับ
ตัวเลือก
CSS ที่ปรับปรุงแล้ว
ภาพรวม
CSS Beautifier จะจัดรูปแบบสไตล์ชีตที่ถูกย่อ บีบอัด หรือมีการเยื้องที่ไม่สอดคล้องกันใหม่ให้เป็น CSS ที่สะอาดและอ่านง่าย — การเยื้องที่สอดคล้องกัน คุณสมบัติที่เรียงลำดับแล้ว และระยะห่างที่ชัดเจนระหว่างกฎ — เพื่อให้คุณสามารถอ่าน ตรวจสอบ และแก้ไขได้จริง วางสไตล์ชีตที่ถูกย่อ ไฟล์ CSS ที่บันเดิล หรือ CSS ที่เขียนด้วยมือแบบยุ่งเหยิง แล้วรับผลลัพธ์ที่จัดรูปแบบแล้วทันที
สิ่งที่ตัวจัดรูปแบบนี้ควบคุม
- •การเยื้อง: 2 ช่องว่าง, 4 ช่องว่าง หรือแท็บ ที่นำไปใช้ผ่านเอนจินการจัดรูปแบบ js-beautify ตัวจริง
- •การเรียงลำดับคุณสมบัติ: จัดเรียงการประกาศตามลำดับตัวอักษรภายในแต่ละบล็อกกฎเพื่อสไตล์ที่สอดคล้องและสแกนได้ง่าย
- •การเรียงลำดับมีเดียคิวรี: จัดเรียงบล็อก @media ระดับบนสุดตามจุดพัก โดยเรียงจากน้อยไปมากสำหรับ min-width และมากไปน้อยสำหรับ max-width
- •ระยะห่างระหว่างกฎ: เพิ่มบรรทัดว่างระหว่างกฎเพื่อการแยกภาพ หรือคงผลลัพธ์ให้กระชับ
- •การรักษาความคิดเห็น: เก็บหรือลบความคิดเห็น /* ... */ ระหว่างการจัดรูปแบบ
- •การทำให้สีเป็นมาตรฐาน: ย่อสีเลขฐานสิบหก 6 หลักและค่า rgb() ให้เป็นรูปแบบย่อเลขฐานสิบหก 3 หลักเมื่อช่องสีอนุญาต
เมื่อใดที่คุณควรจัดรูปแบบ CSS
- •อ่านสไตล์ชีตโปรดักชันที่ถูกย่อเพื่อดีบักปัญหาเลย์เอาต์ใน DevTools ของเบราว์เซอร์
- •จัดรูปแบบ CSS ที่วางมาจากข้อความแชท, PDF หรืออีเมลที่สูญเสียการเยื้องเดิมใหม่
- •ทำให้ลำดับคุณสมบัติและการเยื้องเป็นมาตรฐานก่อนการรีวิวโค้ด
- •ทำให้สไตล์ชีตที่บันเดิลหรือสร้างขึ้น — จากการบิลด์ CSS-in-JS หรือผลลัพธ์ของ preprocessor — อ่านได้เพียงพอที่จะตรวจสอบ
- •ทำความสะอาด CSS ที่ส่งออกจากเครื่องมือออกแบบก่อนคอมมิต
วิธีจัดรูปแบบ CSS
- 1.วาง CSS ของคุณลงในตัวแก้ไขข้อมูลนำเข้า หรืออัปโหลดไฟล์ .css
- 2.เลือกการเยื้อง — 2 ช่องว่าง, 4 ช่องว่าง หรือแท็บ
- 3.เปิดการรักษาความคิดเห็น การเรียงลำดับคุณสมบัติ การเรียงลำดับมีเดียคิวรี ระยะห่างระหว่างกฎ และการทำให้สีเป็นมาตรฐานตามต้องการ
- 4.ผลลัพธ์ที่จัดรูปแบบแล้วจะปรากฏโดยอัตโนมัติขณะที่คุณพิมพ์
- 5.คัดลอกผลลัพธ์หรือดาวน์โหลดเป็นไฟล์ .css
กรณีขอบเขตที่ควรรู้
- •การเรียงลำดับคุณสมบัติตามตัวอักษรอาจแยกการประกาศที่เกี่ยวข้องกันเชิงตรรกะออกจากกัน เช่น margin และ margin-top — ตรวจสอบผลลัพธ์ที่เรียงลำดับแล้วก่อนนำไปใช้เป็นกฎสไตล์ที่เข้มงวด
- •คุณสมบัติที่มีคำนำหน้าผู้จำหน่าย (-webkit-, -moz-) จะถูกเรียงลำดับร่วมกับคุณสมบัติที่ไม่มีคำนำหน้าที่ตรงกัน ซึ่งอาจทำให้ทางเลือกสำรองที่มีคำนำหน้าอยู่หลังคุณสมบัติมาตรฐาน
- •ตัวตรวจสอบวงเล็บปีกกาจะตั้งค่าสถานะ { และ } ที่ไม่ตรงกันขณะที่คุณพิมพ์ แต่นี่เป็นการสแกนเชิงประจักษ์ ไม่ใช่ตัวแยกวิเคราะห์ CSS ที่สมบูรณ์ — ไม่สามารถตรวจจับไวยากรณ์ที่ไม่ถูกต้องได้ทุกประเภท
ข้อจำกัด
- •นี่คือเครื่องมือจัดรูปแบบ ไม่ใช่ตัวตรวจสอบโค้ด — จะไม่ตรวจจับชื่อคุณสมบัติที่ไม่ถูกต้อง ช่องว่างความเข้ากันได้ของเบราว์เซอร์ หรือความขัดแย้งของความจำเพาะของ selector
- •สไตล์ชีตขนาดใหญ่มาก (บันเดิลหลาย MB) อาจจัดรูปแบบช้าในเบราว์เซอร์ — ตัวจัดรูปแบบที่รวมเข้ากับเครื่องมือบิลด์ (Prettier, Stylelint --fix) เหมาะกับการจัดรูปแบบโค้ดเบสขนาดใหญ่มากกว่า
- •สำหรับการบังคับใช้สไตล์ CSS ที่สอดคล้องกันทั่วทั้งทีม เครื่องมือเฉพาะทางอย่าง Stylelint หรือ Prettier ที่รวมเข้ากับเอดิเตอร์/CI เหมาะสมกว่าการจัดรูปแบบผ่านเบราว์เซอร์แบบเฉพาะกิจ
ต้องการทำสิ่งที่ตรงกันข้ามหรือไม่?
หากคุณมี CSS ที่อ่านง่ายและต้องการย่อขนาดสำหรับโปรดักชัน — ลดขนาดไฟล์และเวลาโหลดหน้าเว็บ — ให้ใช้ CSS Minifier แทน มันจะยุบช่องว่าง ย่อสี และสามารถลบเลขศูนย์ที่ซ้ำซ้อนเพื่อการบีบอัดสูงสุด