CSS Formatter ออนไลน์

ทำงานในเบราว์เซอร์ทั้งหมด ไม่ต้องอัปโหลด ไม่ต้องสมัครสมาชิก

ระยะเยื้อง

CSS ต้นฉบับ

CSS ที่จัดรูปแบบแล้ว

วาง CSS เพื่อจัดรูปแบบ

แชร์เครื่องมือนี้

CSS Formatter ใช้งานอย่างไร?

CSS Formatter เปลี่ยนสไตล์ชีตที่ถูกย่อหรือเว้นระยะไม่สม่ำเสมอให้เป็นโค้ดที่อ่านง่าย พร้อมระยะเยื้องและการขึ้นบรรทัดใหม่ที่เป็นระเบียบ วาง CSS แล้วเลือก 2 ช่องว่าง 4 ช่องว่าง หรือแท็บ จากนั้นคัดลอกหรือดาวน์โหลดผลลัพธ์ ทุกอย่างทำงานในเบราว์เซอร์โดยยังคงความคิดเห็น ค่าที่อยู่ในเครื่องหมายคำพูด data URL และลำดับของคำประกาศไว้

วิธีใช้งาน

1วาง CSS. ใส่สไตล์ชีต บล็อกตัวเลือก หรือส่วนหนึ่งของ CSS ที่ถูกย่อลงในช่องป้อนข้อมูล
2เลือกระยะเยื้อง. เลือก 2 ช่องว่าง 4 ช่องว่าง หรือแท็บ ผลลัพธ์จะอัปเดตขณะพิมพ์
3ตรวจสอบสถานะ. ดูจำนวนส่วนประกอบ หรือแก้ตัวคั่นที่ไม่มีคู่ ความคิดเห็นที่ยังไม่ปิด หรือสตริงที่ยังไม่สมบูรณ์ตามข้อความแจ้ง
4คัดลอกหรือดาวน์โหลด. คัดลอก CSS ที่จัดรูปแบบแล้วไปยังคลิปบอร์ด หรือบันทึกเป็น formatted.css

เหมาะกับใคร

นักพัฒนาฟรอนต์เอนด์ที่ต้องการคลาย CSS สำหรับใช้งานจริงให้อ่านและแก้จุดผิดพลาดได้ง่ายขึ้น
ผู้ตรวจสอบโค้ดที่ต้องการจัดระยะเยื้องให้เหมือนกันก่อนเปรียบเทียบสไตล์ชีตที่คัดลอกมาหรือส่วนหนึ่งของ pull request
ผู้เรียนที่ต้องการดู media query ตัวเลือก และบล็อกคำประกาศที่ซ้อนกันให้ชัดเจนขึ้น
ทีมสนับสนุนและ QAที่จัด CSS จากเครื่องมือนักพัฒนาให้เรียบร้อยก่อนใส่ในทิกเก็ตหรือขั้นตอนการทำซ้ำปัญหา

เครื่องมือนี้ใช้ตัวสแกนที่เข้าใจไวยากรณ์แทนการตัดข้อความตามวงเล็บปีกกาและเครื่องหมายอัฒภาคแบบตรงไปตรงมา ระบบติดตามสตริง ความคิดเห็น ฟังก์ชัน ตัวเลือกแอตทริบิวต์ และบล็อกที่ซ้อนกัน เครื่องหมายภายใน URL หรือค่าที่อยู่ในเครื่องหมายคำพูดจึงไม่ถูกเปลี่ยน

คำถามที่พบบ่อย

CSS Formatter ใช้งานฟรีหรือไม่?

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

CSS จะถูกส่งไปยังเซิร์ฟเวอร์หรือไม่?

ไม่ การจัดรูปแบบทำงานภายในเบราว์เซอร์ CSS ที่วางจะอยู่ในตัวแก้ไขบนหน้าและไม่ถูกส่งไปยัง API จึงใช้กับสไตล์ของโครงการส่วนตัวได้

จัดรูปแบบ CSS ได้มากเพียงใด?

เครื่องมือไม่ได้กำหนดจำนวนอักขระตายตัว สไตล์ชีตที่สร้างขึ้นและมีขนาดใหญ่มากยังขึ้นอยู่กับหน่วยความจำและประสิทธิภาพของอุปกรณ์ แต่ CSS ทั่วไปสำหรับเว็บไซต์ คอมโพเนนต์ และอีเมลจะจัดรูปแบบได้ทันที

การจัดรูปแบบทำให้ CSS ทำงานต่างไปหรือไม่?

เครื่องมือเปลี่ยนเฉพาะช่องว่างและการขึ้นบรรทัดใหม่ โดยยังคงตัวเลือก คำประกาศ ความคิดเห็น สตริงในเครื่องหมายคำพูด และลำดับเดิมไว้ ควรตรวจสอบผลลัพธ์ก่อนเผยแพร่หากใช้ไวยากรณ์ทดลองหรือ escape ที่ไวต่อช่องว่าง

เครื่องมือตรวจสอบความถูกต้องของพร็อพเพอร์ตี CSS หรือไม่?

ไม่ เครื่องมือตรวจเฉพาะความสมดุลของวงเล็บปีกกา วงเล็บเหลี่ยม วงเล็บกลม ความคิดเห็น และสตริง ไม่ได้ตรวจว่าพร็อพเพอร์ตี ค่า หรือคุณสมบัติเฉพาะเบราว์เซอร์แต่ละรายการถูกต้องหรือไม่ ควรใช้ตัวตรวจสอบ CSS ตามมาตรฐานสำหรับงานนั้น

จัดรูปแบบ media query และ CSS ที่ซ้อนกันได้หรือไม่?

ได้ บล็อกภายในกฎ @media, @supports, @container, @layer และ @keyframes จะถูกเยื้องตามระดับความลึก ตัวเลือกแบบซ้อนสมัยใหม่ก็จัดรูปแบบได้โดยไม่เปลี่ยนสตริงหรืออาร์กิวเมนต์ของฟังก์ชัน