ตัวบีบอัด CSS

ตัวบีบอัด CSS เป็นเครื่องมือฟรีที่ลบอักขระซึ่งไม่จำเป็นออกจาก CSS พร้อมแสดงสไตล์ชีตที่บีบอัดแล้วและจำนวนอักขระก่อนกับหลังการบีบอัด

การบีบอัด CSS ทำอะไรบ้าง?

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

เบราว์เซอร์ยังคงได้รับกฎ CSS ตัวเลือก และค่าของการประกาศครบถ้วน ผลลัพธ์ทางภาพที่ต้องการจึงควรเหมือนเดิม แต่ไฟล์ที่ส่งไปยังเบราว์เซอร์จะเล็กลง ประโยชน์ที่ได้จริงจากการบีบอัดสไตล์ชีต CSS ขึ้นอยู่กับไฟล์ต้นฉบับ การบีบอัด HTTP และการแคชของเบราว์เซอร์ หากสไตล์ชีตผ่านการบีบอัดมาอย่างดีอยู่แล้ว จำนวนไบต์ที่ส่งอาจลดลงเพียงเล็กน้อย

การบีบอัดมีประโยชน์ก่อนนำไฟล์ขึ้นใช้งาน เมื่อตรวจสอบ CSS จากผู้ให้บริการภายนอกที่มีขนาดใหญ่เกินไป หรือเมื่อต้องการดูว่าการจัดรูปแบบระหว่างพัฒนาทำให้ไฟล์ใหญ่ขึ้นเท่าใด การบีบอัดไม่เหมือนกับการปรับประสิทธิภาพที่ลบตัวเลือกซึ่งไม่ได้ใช้ รวมกฎที่เทียบเท่ากัน หรือเขียนการประกาศใหม่ เครื่องมือนี้ไม่ได้อ้างว่าทำงานในขอบเขตที่กว้างกว่านั้น

ใช้ตัวบีบอัด CSS อย่างไร?

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

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

การบีบอัด CSS ทำงานบนเซิร์ฟเวอร์ CSS ที่คุณส่งจะถูกส่งไปยังเซิร์ฟเวอร์ผ่าน HTTPS และจะไม่ถูกจัดเก็บ หากสไตล์ชีตมี URL ลับ ชื่อโฮสต์ภายใน หรือข้อมูลละเอียดอ่อนอื่น ๆ ให้พิจารณาว่าการส่งข้อมูลไปยังเครื่องมือใดก็ตามที่ประมวลผลบนเซิร์ฟเวอร์สอดคล้องกับนโยบายการจัดการข้อมูลขององค์กรหรือไม่

ควรอ่านผลลัพธ์อย่างไร?

ผลลัพธ์ประกอบด้วย CSS ที่แปลงแล้วและจำนวนอักขระสองค่า คุณจึงตรวจสอบผลลัพธ์และดูขนาดที่ลดลงได้โดยตรง จำนวนอักขระ CSS คือความยาวของข้อความที่ส่ง ส่วน จำนวนอักขระ CSS ที่บีบอัดแล้ว คือความยาวหลังการบีบอัด

ตัวเลขเหล่านี้เป็นจำนวนอักขระที่คำนวณด้วยฟังก์ชันวัดความยาวซึ่งรองรับอักขระหลายไบต์ จึงไม่ควรใช้เป็นค่าคาดการณ์ขนาดข้อมูลที่ส่งผ่านเครือข่ายอย่างแม่นยำ อักขระ UTF-8 อาจใช้พื้นที่มากกว่าหนึ่งไบต์ และการบีบอัดด้วย Brotli หรือ gzip อาจทำให้ขนาดที่ส่งผ่าน HTTP เปลี่ยนไปอย่างมาก

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

ตัวอย่างสั้น ๆ ของการบีบอัด CSS

ฉบับบีบอัดโดยทั่วไปจะลบการจัดรูปแบบออก แต่ยังคงกฎเดิมไว้

CSS

p { color: red; }

Minified CSS

p{color:red}

ในตัวอย่างนี้ ข้อมูลนำเข้าที่อ่านง่ายมี 17 อักขระ ส่วนฉบับกะทัดรัดมี 12 อักขระ ช่องว่างและเครื่องหมายวรรคตอนภายในสตริงที่มีเครื่องหมายคำพูดต้องยังคงเป็นส่วนหนึ่งของค่า

CSS

.notice, .warning { color: #c00; margin: 0 1rem; }

Minified CSS

.notice,.warning{color:#c00;margin:0 1rem}

การลบช่องว่างทั้งหมดโดยไม่ตรวจสอบนั้นไม่ปลอดภัย เพราะช่องว่างอาจทำหน้าที่เป็นตัวเชื่อมแบบ descendant และตัวดำเนินการคำนวณในฟังก์ชันอย่าง calc() ก็มีข้อกำหนดเรื่องช่องว่าง นอกจากนี้ สตริง data URL ตัวระบุที่มีอักขระหลีก และค่าของพร็อพเพอร์ตีแบบกำหนดเอง ล้วนต้องจัดการโดยคำนึงถึงไวยากรณ์

อักขระที่มีเครื่องหมายกำกับเสียงและอักขระที่ไม่ใช่อักษรละตินสามารถปรากฏในสตริงได้ และอาจใช้ในตัวเลือกได้หากเป็นไปตามกฎของตัวระบุ CSS ตัวเลข จุดทศนิยม เปอร์เซ็นต์ และหน่วยเป็นส่วนหนึ่งของไวยากรณ์ ไม่ใช่เพียงข้อความตกแต่ง จึงย่อไม่ได้หากไม่เข้าใจการประกาศนั้น สไตล์ชีตว่างไม่มี CSS ให้บีบอัด สำหรับสไตล์ชีตขนาดใหญ่มาก การใช้เครื่องมือบีบอัดในขั้นตอนการสร้างมักทำซ้ำและตรวจสอบย้อนหลังได้ง่ายกว่าการคัดลอกข้อความผ่านแบบฟอร์มออนไลน์

เมื่อใดที่การบีบอัด CSS ไม่คุ้ม?

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

• อย่าจัด CSS ให้อ่านง่ายแล้วนำไปบีบอัดใหม่ หากมีเพียงเบราว์เซอร์หรือระบบสร้างไฟล์เป็นผู้อ่าน
• อย่าใช้การบีบอัดแทนการลบกฎของเฟรมเวิร์กที่ไม่ได้ใช้หรือการประกาศที่ซ้ำกัน
• อย่าคาดหวังว่าจำนวนอักขระที่ลดลงจะช่วยระบุคำขอที่ขัดขวางการแสดงผล ปัญหาแคช หรือการโหลดแบบอักษรที่ช้า
• อย่าทิ้งไฟล์ต้นฉบับที่จัดรูปแบบไว้ โดยเฉพาะเมื่อต้องแก้จุดบกพร่องเกี่ยวกับ specificity, cascade layers หรือ media queries

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

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

บีบอัด CSS แล้วค่า specificity ของตัวเลือกจะเปลี่ยนไหม?

การบีบอัดที่ถูกต้องจะไม่เปลี่ยน specificity ของตัวเลือก เพราะส่วนประกอบและลำดับของตัวเลือกควรยังเหมือนเดิม อย่างไรก็ตาม ควรเปรียบเทียบตัวเลือกที่ซับซ้อนอย่างระมัดระวัง หากต้นฉบับใช้อักขระหลีก pseudo-class รุ่นใหม่ หรือไวยากรณ์ที่สร้างขึ้นซึ่งเครื่องมือบีบอัดรุ่นเก่าอาจไม่เข้าใจ

บีบอัด CSS custom properties ได้ไหม?

สามารถบีบอัด custom properties ได้ แต่ค่าอาจต้องเก็บโทเค็นและช่องว่างไว้เพื่อแทนค่าภายหลังด้วย var() ควรทดสอบการประกาศที่มีการคำนวณ ค่าสำรอง หรือสตริงแบบฝังในเบราว์เซอร์ที่โครงการของคุณรองรับ อย่าคิดว่าช่องว่างทุกตำแหน่งที่เห็นสามารถลบได้

เครื่องมือนี้สร้าง source map ให้ไหม?

ไม่มีผลลัพธ์ source map แสดงอยู่ หากการแก้จุดบกพร่องในระบบจริงจำเป็นต้องเชื่อมโยง CSS แบบกะทัดรัดกลับไปยัง Sass, Less หรือซอร์สประเภทอื่น ให้สร้างไฟล์ที่บีบอัดและ source map ภายในคอมไพเลอร์หรือบันเดลเลอร์ที่รู้โครงสร้างของไฟล์ต้นฉบับ

ความคิดเห็นเกี่ยวกับสัญญาอนุญาตจะยังอยู่ในผลลัพธ์ไหม?

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

การบีบอัดช่วยซ่อม CSS ที่เสียได้ไหม?

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

สิ่งที่ควรตรวจสอบก่อนนำขึ้นใช้งาน

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