CSS ต้นฉบับ
ตัวเลือก
CSS ที่ปรับปรุงแล้ว
เกี่ยวกับเครื่องมือนี้
CSS Beautifier & Minifier เป็นเครื่องมือที่ครอบคลุมสำหรับการจัดรูปแบบและเพิ่มประสิทธิภาพโค้ด CSS ไม่ว่าคุณจะกำลัง debug CSS จากผู้ให้บริการ เพิ่มประสิทธิภาพ stylesheets สำหรับการใช้งานจริง หรือดูแลรักษา codebase ขนาดใหญ่ CSS ที่สะอาดและจัดรูปแบบอย่างถูกต้องเป็นสิ่งสำคัญสำหรับความสามารถในการอ่านและประสิทธิภาพ เครื่องมือนี้จะปรับปรุง CSS ที่บีบอัดให้เป็นรูปแบบที่อ่านง่ายพร้อมการเยื้องที่เหมาะสมทันที หรือลดขนาด CSS การพัฒนาเพื่อลดขนาดไฟล์และเพิ่มความเร็วในการโหลดหน้า คุณสมบัติขั้นสูงรวมถึงการจัดเรียง properties (การจัดระเบียบตามตัวอักษรเพื่อความสม่ำเสมอ) การเพิ่มประสิทธิภาพสี (ลดรหัส hex เช่น #ffffff เป็น #fff) การจัดเรียง media queries (จัดระเบียบ breakpoints จากเล็กสุดถึงใหญ่สุด) และการตรวจสอบไวยากรณ์เพื่อตรวจจับวงเล็บปีกกาหรือเครื่องหมายอัฒภาคที่หายไป การประมวลผลทั้งหมดเกิดขึ้นฝั่งไคลเอนต์ในเบราว์เซอร์ของคุณ—ไม่มี CSS ใดถูกอัปโหลดไปยังเซิร์ฟเวอร์ใดๆ ทำให้ปลอดภัยสำหรับ stylesheets ที่ใช้งานจริงและโปรเจ็กต์ของลูกค้า
วิธีใช้งาน
วางหรือพิมพ์ CSS ของคุณในแผงป้อนข้อมูล เลือกโหมด Beautify เพื่อจัดรูปแบบ CSS ที่ถูกลดขนาดหรือยุ่งเหยิงด้วยการเยื้องและการขึ้นบรรทัดใหม่ที่เหมาะสม—เลือกการเยื้อง 2 ช่องว่าง 4 ช่องว่าง หรือแท็บ เลือกโหมด Minify เพื่อบีบอัด CSS สำหรับการใช้งานจริงโดยการลบช่องว่าง ความคิดเห็น และเพิ่มประสิทธิภาพค่า เครื่องมือตรวจสอบไวยากรณ์แบบเรียลไทม์ ไฮไลต์ข้อผิดพลาดเช่นวงเล็บปีกกาที่ไม่ปิด เครื่องหมายอัฒภาคที่หายไป หรือชื่อ property ที่ไม่ถูกต้อง ตัวเลือกขั้นสูง: สลับ 'Sort Properties' เพื่อจัดระเบียบ CSS properties ตามตัวอักษรภายในแต่ละกฎ (ปรับปรุงความสามารถในการอ่าน diff ใน version control) เปิดใช้งาน 'Color Optimization' เพื่อลดรหัสสี (#ffffff → #fff, rgb(255,0,0) → #f00) ใช้ 'Sort Media Queries' เพื่อจัดเรียง @media queries จาก breakpoint ที่เล็กที่สุดถึงใหญ่ที่สุด เลือกระดับการบีบอัด: Normal (ปลอดภัย รักษาการจัดรูปแบบบางส่วน) หรือ Aggressive (บีบอัดสูงสุด อาจส่งผลต่อ CSS hacks) สลับ 'Preserve Comments' เพื่อเก็บหรือลบความคิดเห็นของโค้ด ใช้งานได้กับ CSS3 คำนำหน้าของผู้ให้บริการ ตัวแปร CSS ตัวเลือกที่ซ้อนกัน และกฎ @supports/@media
กรณีการใช้งานทั่วไป
- การเพิ่มประสิทธิภาพการใช้งานจริง: ลดขนาด main.css ของไซต์ของคุณจาก 150KB เป็น 110KB—ทุกกิโลไบต์ที่ประหยัดได้จะปรับปรุงเวลาในการโหลดหน้า โดยเฉพาะบนเครือข่ายมือถือ
- การ Debug CSS ของผู้ให้บริการ: ปรับปรุงเอาต์พุต Bootstrap หรือ Tailwind ที่ถูกลดขนาดเพื่อเข้าใจว่ามีการใช้สไตล์อะไรบ้างและค้นหาความขัดแย้ง
- การตรวจสอบโค้ด: ก่อนคอมมิตการเปลี่ยนแปลง CSS ให้ปรับปรุงและเรียง properties ตามตัวอักษรเพื่อให้ Git diff แสดงเฉพาะการเปลี่ยนแปลงที่มีความหมาย ไม่ใช่ความแตกต่างในการจัดรูปแบบ
- การดูแลรักษาโค้ดเก่า: สืบทอดโปรเจ็กต์ที่มีการจัดรูปแบบ CSS ที่ไม่สม่ำเสมอ? ปรับปรุงไฟล์ทั้งหมดด้วยการเยื้องที่สม่ำเสมอเพื่อปรับปรุงความสามารถในการอ่าน
- การเรียนรู้ CSS: นักเรียนสามารถวางตัวอย่าง CSS ที่ซับซ้อนและปรับปรุงเพื่อเข้าใจโครงสร้าง ความเฉพาะเจาะจง และกฎแคสเคด
- การจัดการตัวแปร CSS: จัดระเบียบตัวแปร :root ตามตัวอักษรเพื่อการดูแลรักษาที่ง่ายขึ้นในระบบการออกแบบ
ข้อจำกัดและหมายเหตุสำคัญ
- ไม่รองรับ:
- CSS preprocessors (SCSS, SASS, LESS, Stylus)—คอมไพล์ก่อน
- ไวยากรณ์ CSS-in-JS (styled-components, emotion)
- ปลั๊กอิน PostCSS ที่ขยายไวยากรณ์
- ประสิทธิภาพ: สำหรับ stylesheets ขนาดใหญ่มาก (>5MB) ประสิทธิภาพของเบราว์เซอร์อาจลดลง—พิจารณาใช้เครื่องมือบรรทัดคำสั่งเช่น csso หรือ clean-css สำหรับการประมวลผลแบบชุด
- กรณีขอบที่ต้องการการตรวจสอบ:
- CSS hacks (ตัวกรอง IE เฉพาะ)
- ช่องว่างที่ตั้งใจไว้ใน properties เนื้อหา
- Properties ที่เป็นกรรมสิทธิ์เก่ามากอาจทำให้เกิดคำเตือน
- การเรียง properties: เป็นการเรียงตามตัวอักษรเพียงอย่างเดียว—ไม่ได้เพิ่มประสิทธิภาพสำหรับความเฉพาะเจาะจงของ CSS หรือลำดับแคสเคด
- การเรียง media queries: สันนิษฐานว่า breakpoints min-width; queries ที่ซับซ้อนด้วย max-width หรือ orientation อาจไม่เรียงตามที่คาดหวัง
- สำคัญ: สำหรับ builds การใช้งานจริงที่สำคัญ ทดสอบ CSS ที่ถูกลดขนาดอย่างละเอียดเสมอ—ระบบอัตโนมัติไม่สามารถตรวจจับทุกกรณีขอบได้