CSS Minifier

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

• •การยุบช่องว่าง: ตัวย่อที่รู้จักเครื่องหมายคำพูดและความคิดเห็นจะลบช่องว่าง การขึ้นบรรทัดใหม่ และบรรทัดว่าง โดยปล่อยเนื้อหาสตริงไว้ตามเดิม
• •การลบความคิดเห็น: ลบความคิดเห็น /* ... */ หรือเก็บไว้ — เช่น เพื่อรักษาส่วนหัวใบอนุญาต — ผ่านสวิตช์การรักษาความคิดเห็น
• •การเพิ่มประสิทธิภาพสี: ย่อสีเลขฐานสิบหก 6 หลักและค่า rgb() ให้เป็นรูปแบบย่อเลขฐานสิบหก 3 หลักเมื่อช่องสีอนุญาต
• •ระดับการบีบอัด: โหมดปกติทำการย่อช่องว่าง ความคิดเห็น และสีอย่างปลอดภัย โหมดเข้มข้นยังลบเลขศูนย์นำหน้าที่ซ้ำซ้อนด้วย (0.5px → .5px) และตัดตัวเลขออกจากความยาวที่มีค่าเป็นศูนย์ (0px → 0)
• •การเปรียบเทียบขนาด: ดูขนาดต้นฉบับ ขนาดที่ย่อแล้ว และเปอร์เซ็นต์การลดขนาดเคียงข้างกัน
• •ผลลัพธ์ที่ดาวน์โหลดได้: บันทึกผลลัพธ์ที่ย่อแล้วเป็นไฟล์ .css โดยตรง

• •ย่อสไตล์ชีตก่อนนำไปใช้งานจริงเพื่อลดเวลาโหลดหน้าเว็บ
• •เตรียมโค้ด CSS ชิ้นเล็กเพื่อฝังแบบอินไลน์ในแท็ก <style> หรืออีเมล HTML โดยไม่ทำให้บวม
• •ตรวจสอบอย่างรวดเร็วว่าสไตล์ชีตจะเล็กลงแค่ไหนก่อนตั้งค่าไปป์ไลน์ PostCSS หรือบิลด์แบบเต็มรูปแบบ
• •ย่อสไตล์ชีตครั้งเดียวสำหรับ CodePen, gist หรือโปรโตไทป์แบบสแตติกที่ขั้นตอนการบิลด์ไม่สะดวก
• •เปรียบเทียบขนาดที่ย่อแล้วกับงบประมาณประสิทธิภาพสำหรับการตรวจสอบ Core Web Vitals หรือ Lighthouse

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

• •การลบเลขศูนย์แบบเข้มข้น (0px → 0) ปลอดภัยสำหรับหน่วยความยาว แต่จะข้ามเนื้อหาสตริงและความคิดเห็น และไม่แตะต้องการคำนวณภายในนิพจน์ calc()
• •ช่องว่างภายในสตริงที่มีเครื่องหมายคำพูด — ชื่อ font-family, content: "...", เส้นทาง url() — จะถูกเก็บรักษาไว้อย่างแม่นยำเสมอ มีเพียงช่องว่างเชิงโครงสร้างนอกสตริงและความคิดเห็นเท่านั้นที่จะถูกลบ
• •ตัวย่อนี้ไม่เปลี่ยนชื่อคลาส ไม่รวม selector ที่ซ้ำกัน หรือลบกฎที่ไม่ได้ใช้งาน — สิ่งเหล่านี้ต้องใช้ตัวเพิ่มประสิทธิภาพที่รวมเข้ากับเครื่องมือบิลด์ เช่น cssnano หรือ PurgeCSS

• •นี่คือการย่อช่องว่าง ความคิดเห็น และสี ไม่ใช่การเพิ่มประสิทธิภาพแบบเต็มรูปแบบ — สำหรับการลดขนาดสูงสุด (การรวม selector การลบกฎที่ซ้ำกัน การกำจัด CSS ที่ไม่ได้ใช้งาน) ให้ใช้ตัวย่อที่รวมเข้ากับเครื่องมือบิลด์ เช่น cssnano หรือ PurgeCSS
• •ผลลัพธ์ที่ย่อแล้วจะสูญเสียความสามารถในการอ่านทั้งหมด — เก็บซอร์สต้นฉบับของคุณไว้ภายใต้การควบคุมเวอร์ชันเสมอ
• •สไตล์ชีตขนาดใหญ่มากอาจประมวลผลได้ช้าในเบราว์เซอร์เมื่อประมวลผลทั้งหมด — สำหรับไปป์ไลน์บิลด์โปรดักชัน ให้รวมการย่อเข้ากับ PostCSS หรือบันเดิลเลอร์ของคุณแทนที่จะใช้เครื่องมือเบราว์เซอร์แบบครั้งเดียว

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