การทำงานของเครื่องมือจัดรูปแบบและย่อขนาด CSS
เครื่องมือนี้ทำหน้าที่รับรหัส CSS ที่คุณระบุเพื่อนำไปจัดรูปแบบใหม่ให้อ่านและแก้ไขได้ง่ายขึ้น หรือทำการบีบอัดเพื่อลดขนาดไฟล์ให้เล็กลงสำหรับการโหลดหน้าเว็บที่รวดเร็วยิ่งขึ้น คุณสามารถเลือกวิธีการประมวลผล CSS ได้ตามต้องการ จากนั้นจึงคัดลอกผลลัพธ์หรือดาวน์โหลดออกมาเป็นไฟล์เพื่อนำไปใช้งานต่อ
การประมวลผลข้อมูลทั้งหมดเกิดขึ้นภายในเบราว์เซอร์ของคุณโดยตรง ไม่มีการอัปโหลดข้อมูลใดๆ ไปยัง BroBroGo
ข้อมูลนำเข้าและข้อจำกัด
ในการใช้งานเครื่องมือ คุณสามารถวางหรือพิมพ์ CSS ลงในช่องข้อมูลนำเข้าโดยมีข้อกำหนดและตัวเลือกดังนี้:
- ข้อมูล CSS: รองรับขนาดสูงสุดไม่เกิน 500,000 ตัวอักษร
- ย่อหน้า: เลือกรูปแบบการย่อหน้าได้ระหว่าง 2 spaces, 4 spaces หรือ tab
- การบีบอัด:
- Safe (ปลอดภัย): ลบเฉพาะช่องว่างและคอมเมนต์ที่ไม่จำเป็น พร้อมทั้งย่อค่าต่างๆ ให้สั้นลง โดยจะคงกฎทุกข้อไว้ในตำแหน่งเดิมอย่างถูกต้อง
- Optimized (เพิ่มประสิทธิภาพ): รวมตัวเลือก (Selectors) และกฎที่ซ้ำกันเข้าด้วยกันเพื่อให้ได้ขนาดไฟล์ที่เล็กที่สุด ซึ่งอาจมีการสลับลำดับของกฎเกิดขึ้น
การแสดงผลและข้อมูลสถิติ
เมื่อเครื่องมือประมวลผลเสร็จสิ้น จะแสดงข้อมูลสถิติและปุ่มดำเนินการดังต่อไปนี้:
- บรรทัด: จำนวนบรรทัดของ CSS ที่ผ่านการประมวลผลแล้ว
- ตัวอักษร: จำนวนตัวอักษรของ CSS ที่ผ่านการประมวลผลแล้ว
- ขนาด: ขนาดไฟล์ในรูปแบบ UTF-8 byte ของ CSS ที่ผ่านการประมวลผลแล้ว
- ย่อขนาดแล้ว — เล็กลง
{pct}%: แสดงเปอร์เซ็นต์ของขนาดไฟล์ที่ลดลงหลังจากการย่อขนาด - ดาวน์โหลด: ปุ่มสำหรับดาวน์โหลดไฟล์ CSS ที่ประมวลผลแล้วในชื่อ
styles.css - คัดลอก: ปุ่มสำหรับคัดลอกรหัส CSS ไปยังคลิปบอร์ด
กฎเกณฑ์ทางเทคนิคและกรณีเฉพาะ
- การคงอยู่ของคอมเมนต์: คอมเมนต์ที่เขียนในรูปแบบ
/*! … */จะถูกรักษาไว้เสมอ ไม่ว่าจะเลือกการบีบอัดแบบ Safe หรือ Optimized ก็ตาม - การจัดรูปแบบสวยงาม: เครื่องมือจะทำการจัดย่อหน้าใหม่และเว้นวรรคสไตล์ชีตเพื่อให้มนุษย์อ่านและทำความเข้าใจได้ง่าย
- การย่อขนาด: เครื่องมือจะตัดช่องว่างและคอมเมนต์ทั่วไปออก พร้อมทั้งแปลงค่าต่างๆ ให้สั้นลง เช่น การแปลงรหัสสีจาก
#ffffffเป็น#fff - การรักษาไวยากรณ์: ในโหมด Safe จะไม่มีการเปลี่ยนแปลง Vendor Prefixes หรือไวยากรณ์สมัยใหม่ใดๆ ทั้งสิ้น
- ข้อความแจ้งเตือนข้อผิดพลาด:
- หากไม่มีข้อมูลในช่องนำเข้า เครื่องมือจะแสดงข้อความ "ไม่พบ CSS ที่จะย่อขนาด — โปรดตรวจสอบข้อผิดพลาดทางไวยากรณ์ในข้อมูลนำเข้า"
- หากรหัส CSS ไม่สามารถประมวลผลได้ เครื่องมือจะแสดงข้อความ "ไม่สามารถประมวลผล CSS นี้ได้"
- หากข้อมูลนำเข้ามีขนาดเกิน 500,000 ตัวอักษร เครื่องมือจะแสดงข้อความ "สไตล์ชีตนี้มีขนาดใหญ่เกินกว่าจะประมวลผลได้ โปรดลองใช้ไฟล์ที่มีขนาดเล็กลง"
- หากมีข้อมูลนำเข้าแต่ผลลัพธ์จากการย่อขนาดเป็นค่าว่าง จะบ่งชี้ว่ามีข้อผิดพลาดทางไวยากรณ์เกิดขึ้นในรหัสต้นทาง
คำถามที่พบบ่อย (FAQ)
การจัดรูปแบบสวยงาม (Beautify) กับการย่อขนาด (Minify) แตกต่างกันอย่างไร?
การจัดรูปแบบให้สวยงาม (Beautify) จะจัดย่อหน้าใหม่และเพิ่มช่องว่างให้กับสไตล์ของคุณเพื่อให้ง่ายต่อการอ่านและแก้ไข ส่วนการย่อขนาด (Minify) จะทำตรงกันข้าม โดยจะลบช่องว่างและคอมเมนต์ที่เบราว์เซอร์ไม่จำเป็นต้องใช้ออก รวมถึงย่อค่าต่างๆ เช่น รหัสสี เพื่อให้ไฟล์มีขนาดเล็กลงและโหลดได้เร็วขึ้น แนะนำให้จัดรูปแบบสวยงามระหว่างทำงาน และย่อขนาดก่อนนำไปใช้งานจริง
การตั้งค่าการบีบอัดแบบ Safe และ Optimized ทำงานอย่างไร?
โหมดปลอดภัย (Safe) จะลบเฉพาะช่องว่างและคอมเมนต์ พร้อมทั้งย่อค่าต่างๆ ให้สั้นลง โดยจะคงกฎทุกข้อไว้ที่เดิมทุกประการ ส่วนโหมดเพิ่มประสิทธิภาพ (Optimized) จะทำงานขั้นสูงขึ้นโดยการรวมตัวเลือก (Selectors) และกฎที่ซ้ำกันเพื่อให้ไฟล์มีขนาดเล็กลง ซึ่งอาจมีการจัดเรียงลำดับกฎใหม่ ดังนั้นสำหรับสไตล์ชีตที่ต้องพึ่งพาลำดับก่อนหลัง ควรตรวจสอบความถูกต้องอย่างรวดเร็วก่อนนำไปใช้งานจริง ทั้งนี้ คอมเมนต์ที่ขึ้นต้นด้วย /*! … */ จะถูกเก็บไว้ในทั้งสองโหมด
การย่อขนาดจะทำให้การแสดงผลหน้าเว็บของฉันเปลี่ยนไปหรือไม่?
ในโหมด Safe จะไม่มีผลกระทบใดๆ สไตล์ของคุณจะแสดงผลเหมือนเดิมทุกประการ ตัวแปลงจะยุบช่องว่าง ลบคอมเมนต์ทั่วไป และแปลงค่าต่างๆ ให้อยู่ในรูปแบบที่สั้นลงแต่เทียบเท่ากัน (เช่น แปลง #ffffff เป็น #fff) โดยจะไม่มีการเปลี่ยน Vendor Prefixes หรือไวยากรณ์สมัยใหม่ของคุณ ส่วนโหมด Optimized จะมีการรวมกฎต่างๆ เข้าด้วยกัน ซึ่งส่วนใหญ่จะแสดงผลเหมือนเดิม แต่อาจต้องตรวจสอบความถูกต้องหากสไตล์ชีตของคุณขึ้นอยู่กับลำดับของกฎ