ย่อขนาด CSS
วางสไตล์ชีตลงไปแล้วรับกลับมาในรูปที่ถูกบีบแล้ว ตัวนับใต้กล่องแสดงขนาดก่อนและหลัง คุณจึงเห็นได้เองว่าคุ้มหรือไม่
โค้ดไม่ออกจากหน้านี้ การจัดรูปแบบทำในเบราว์เซอร์ของคุณ
- ฟรี
- ไฟล์ไม่ออกจากเครื่องของคุณ
- ไม่ต้องสมัคร
- ไม่จำกัดไฟล์
วิธีใช้
- วาง CSS ลงในกล่องแรก ระบบจะย่อให้ระหว่างที่คุณพิมพ์
- เทียบขนาดที่แสดงอยู่ใต้กล่องข้อความ
- คัดลอกผลลัพธ์ หรือกด «จัดรูปแบบ» เพื่อกลับไปอ่านให้เข้าใจง่าย
สิ่งที่ควรรู้
อะไรบ้างที่ถูกตัดออก
คอมเมนต์ การขึ้นบรรทัดใหม่ ย่อหน้า ช่องว่างรอบทวิภาคและตัวเชื่อมซีเลกเตอร์ รวมถึงอัฒภาคตัวสุดท้ายก่อนวงเล็บปีกกาปิดของทุกบล็อก ซึ่งมาตรฐานไม่เคยบังคับให้มีอยู่แล้ว ส่วนซีเลกเตอร์ยังเก็บช่องว่างเดี่ยวที่แยกลูกหลานออกจากบรรพบุรุษไว้ เพราะการลบมันทิ้งจะเปลี่ยนว่ากฎนั้นจับกับอะไร
ทำไมจึงไม่แตะสตริง
อัฒภาคที่อยู่ใน content: "a;b" และวงเล็บปีกกาที่อยู่ใน data URI ของ SVG แบบฝังในไฟล์ ต่างดูเหมือนโครงสร้างในสายตาของนิพจน์ปรกติ ตัวย่อขนาดที่ทำงานด้วยการจับรูปแบบจึงทำไฟล์เหล่านี้พังอย่างเงียบ ๆ และความเสียหายจะโผล่มาเป็นไอคอนที่หายไปบนระบบจริง เครื่องมือนี้อ่านสไตล์ชีตทีละอักขระและยกสตริงในเครื่องหมายคำพูดไปทั้งก้อน
คำถามที่พบบ่อย
สไตล์ชีตยังทำงานเหมือนเดิมทุกอย่างไหม
เหมือนเดิม ไม่มีอะไรถูกเปลี่ยนชื่อ สลับลำดับ หรือถูกตัดทิ้ง หายไปเพียงช่องว่างกับคอมเมนต์ ซึ่งทั้งคู่ไม่มีผลต่อการบังคับใช้กฎ
ไฟล์ของฉันจะเล็กลงเท่าไร
สไตล์ชีตที่เขียนด้วยมือมักลดลงราวยี่สิบถึงสามสิบเปอร์เซ็นต์ แต่หลังผ่าน gzip แล้วส่วนต่างจะน้อยลงมาก เพราะการบีบอัดจัดการกับช่องว่างที่ซ้ำกันให้อยู่แล้ว
โค้ดของฉันถูกส่งไปเซิร์ฟเวอร์ไหม
ไม่ กระบวนการทั้งหมดทำงานอยู่บนหน้านี้ ซึ่งสำคัญกับสไตล์ชีตที่ยังไม่เผยแพร่สู่สาธารณะ
กลับไปอ่านให้เข้าใจง่ายอีกครั้งได้ไหม
กด «จัดรูปแบบ» แล้วสไตล์ชีตจะถูกจัดใหม่ให้มีหนึ่งดีคลาเรชันต่อบรรทัด คอมเมนต์เดิมหายไปแล้ว แต่กฎทั้งหมดยังอยู่ครบ
เครื่องมือที่เกี่ยวข้อง
- จัดรูปแบบ CSS วางสไตล์ชีตลงไป แม้จะมาเป็นบรรทัดเดียวยาว ๆ ก็กลับมาอ่านได้อีกครั้ง แต่ละดีคลาเรชันจะได้บรรทัดข…
- ย่อขนาด HTML วาง HTML แล้วรับกลับไปโดยไม่มีช่องว่างที่ไม่มีใครเห็น ตัวนับใต้ช่องกรอกจะบอกว่าประหยัดไปได้เท่า…
- ย่อขนาด JSON วาง JSON แล้วรับกลับไปโดยไม่มีไบต์ส่วนเกินแม้แต่ไบต์เดียว ไม่มีการเยื้อง ไม่มีการขึ้นบรรทัดใหม่…
- จัดรูปแบบ HTML วาง HTML ลงไปแล้วอ่านได้เลย แต่ละแท็กจะอยู่บนบรรทัดของตัวเองพร้อมย่อหน้าตามระดับการซ้อนที่แท้จร…
- จัดรูปแบบ XML XML ที่โปรแกรมสร้างขึ้นมักมาเป็นบรรทัดยาวมหึมาบรรทัดเดียว วางไว้ที่นี่แล้วโครงสร้างจะปรากฏออกมา…
- จัดรูปแบบ SQL วางคำสั่งที่ได้จากไฟล์บันทึกหรือจาก ORM ซึ่งมาเป็นบรรทัดเดียวยาว แล้วอ่านมันเป็นคำสั่งอีกครั้ง…