ย่อขนาด CSS

วางสไตล์ชีตลงไปแล้วรับกลับมาในรูปที่ถูกบีบแล้ว ตัวนับใต้กล่องแสดงขนาดก่อนและหลัง คุณจึงเห็นได้เองว่าคุ้มหรือไม่

โค้ดไม่ออกจากหน้านี้ การจัดรูปแบบทำในเบราว์เซอร์ของคุณ

วิธีใช้

  1. วาง CSS ลงในกล่องแรก ระบบจะย่อให้ระหว่างที่คุณพิมพ์
  2. เทียบขนาดที่แสดงอยู่ใต้กล่องข้อความ
  3. คัดลอกผลลัพธ์ หรือกด «จัดรูปแบบ» เพื่อกลับไปอ่านให้เข้าใจง่าย

สิ่งที่ควรรู้

อะไรบ้างที่ถูกตัดออก

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

ทำไมจึงไม่แตะสตริง

อัฒภาคที่อยู่ใน content: "a;b" และวงเล็บปีกกาที่อยู่ใน data URI ของ SVG แบบฝังในไฟล์ ต่างดูเหมือนโครงสร้างในสายตาของนิพจน์ปรกติ ตัวย่อขนาดที่ทำงานด้วยการจับรูปแบบจึงทำไฟล์เหล่านี้พังอย่างเงียบ ๆ และความเสียหายจะโผล่มาเป็นไอคอนที่หายไปบนระบบจริง เครื่องมือนี้อ่านสไตล์ชีตทีละอักขระและยกสตริงในเครื่องหมายคำพูดไปทั้งก้อน

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

สไตล์ชีตยังทำงานเหมือนเดิมทุกอย่างไหม

เหมือนเดิม ไม่มีอะไรถูกเปลี่ยนชื่อ สลับลำดับ หรือถูกตัดทิ้ง หายไปเพียงช่องว่างกับคอมเมนต์ ซึ่งทั้งคู่ไม่มีผลต่อการบังคับใช้กฎ

ไฟล์ของฉันจะเล็กลงเท่าไร

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

โค้ดของฉันถูกส่งไปเซิร์ฟเวอร์ไหม

ไม่ กระบวนการทั้งหมดทำงานอยู่บนหน้านี้ ซึ่งสำคัญกับสไตล์ชีตที่ยังไม่เผยแพร่สู่สาธารณะ

กลับไปอ่านให้เข้าใจง่ายอีกครั้งได้ไหม

กด «จัดรูปแบบ» แล้วสไตล์ชีตจะถูกจัดใหม่ให้มีหนึ่งดีคลาเรชันต่อบรรทัด คอมเมนต์เดิมหายไปแล้ว แต่กฎทั้งหมดยังอยู่ครบ

เครื่องมือที่เกี่ยวข้อง