ย่อ CSS ออนไลน์ ฟรี พร้อมจัดรูปแบบโค้ด
ย่อหรือจัดรูปแบบ CSS ได้ทันทีในเบราว์เซอร์ ลบคอมเมนต์และช่องว่างเพื่อลดขนาดไฟล์
🔒 ไฟล์ของคุณไม่เคยออกจากเบราว์เซอร์ การประมวลผลทั้งหมดทำในเครื่องของคุณ
วิธีย่อ CSS ออนไลน์
- 1
วางโค้ด CSS ของคุณ
วางหรือพิมพ์โค้ด CSS ลงในช่องอินพุต
- 2
เลือกย่อหรือจัดรูปแบบ
กด “ย่อ CSS” เพื่อบีบอัดโค้ด หรือ “จัดรูปแบบ CSS” เพื่อจัดย่อหน้าให้สม่ำเสมอ
- 3
คัดลอกผลลัพธ์
ผลลัพธ์จะแสดงทางขวา กด “คัดลอก” เพื่อคัดลอกไปยังคลิปบอร์ด
CSS เป็นตัวบล็อกการเรนเดอร์ เบราว์เซอร์จะยังไม่แสดงอะไรจนกว่าจะดาวน์โหลดและแยกวิเคราะห์สไตล์ชีตทั้งหมดใน head เสร็จ ขนาดเพียงไม่กี่กิโลไบต์จึงทำให้ First Contentful Paint ช้าลง โดยเฉพาะบนเครือข่ายมือถือ การย่อ CSS เป็นการปรับปรุงที่ง่ายที่สุด ไม่ต้องมีขั้นตอน build และไม่ต้องแก้โค้ด ได้ไฟล์ที่เล็กลงแต่แสดงผลเหมือนเดิมทุกประการ
สิ่งที่ถูกลบ ได้แก่ คอมเมนต์ การย่อหน้า การขึ้นบรรทัดใหม่ ช่องว่างรอบวงเล็บปีกกาและเครื่องหมายโคลอน และเซมิโคลอนตัวสุดท้ายก่อนวงเล็บปิดแต่ละอัน ตัวเลือก ชื่อพร็อพเพอร์ตี้ และค่าต่าง ๆ จะไม่ถูกแตะต้องเลย CSS ที่ย่อแล้วจึงทำงานเหมือนต้นฉบับทุกอย่าง ส่วน “จัดรูปแบบ” ทำตรงข้าม คือแปลงสไตล์ชีตสำหรับ production ให้เป็นกฎที่อ่านง่ายและย่อหน้าสม่ำเสมอ
หากไฟล์ใหญ่เพราะมีกฎที่ไม่ได้ใช้ ไม่ใช่เพราะช่องว่าง การย่อจะช่วยได้ไม่มาก ควรลบตัวเลือกที่ไม่ได้ใช้ในขั้นตอน build ก่อน สำหรับทรัพยากรอื่น ๆ เครื่องมือย่อ JS และย่อ HTML ใช้แนวคิดเดียวกันกับสคริปต์และมาร์กอัป