ตัวย่อ CSS - ย่อและจัดรูปแบบ CSS ออนไลน์ฟรี

วิธีใช้ตัวย่อและจัดรูปแบบ CSS

1. 1

   วางโค้ด CSS

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

2. 2

   เลือกย่อหรือจัดรูปแบบ

   กดปุ่มย่อเพื่อบีบ CSS ให้เหลือบรรทัดเดียวกระชับ หรือกดจัดรูปแบบเพื่อคลายโค้ดที่ถูกย่อให้กลับมาอ่านง่ายและมีย่อหน้า

3. 3

   ตรวจผลลัพธ์

   ดูโค้ดที่แปลงแล้ว หาก CSS เขียนผิดไวยากรณ์ ระบบจะแจ้งเตือนให้คุณแก้ก่อนคัดลอก

4. 4

   คัดลอกผลลัพธ์

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

แหล่งอ้างอิง

• MDN — CSS

  เอกสารอ้างอิงไวยากรณ์ พร็อพเพอร์ตี้ และค่าต่าง ๆ ของ CSS จาก Mozilla เหมาะสำหรับตรวจสอบกฎหลังย่อหรือจัดรูปแบบ

• W3C — CSS Snapshot

  ภาพรวมข้อกำหนดมาตรฐาน CSS อย่างเป็นทางการจาก W3C ซึ่งระบุไวยากรณ์สไตล์ชีตที่ถูกต้อง

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

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

CSS ย่อมาจากอะไร?

CSS ย่อมาจาก Cascading Style Sheets เป็นภาษาที่ใช้กำหนดรูปลักษณ์ของหน้าเว็บ เช่น สี ฟอนต์ ระยะห่าง และเลย์เอาต์ โดยทำงานคู่กับ HTML ที่กำหนดโครงสร้างเนื้อหา

ตัวย่อ CSS ทำงานอย่างไร?

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

จะแปลง CSS ที่ย่อแล้วกลับมาให้อ่านง่ายได้อย่างไร?

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

การย่อ CSS ทำให้หน้าตาเว็บเปลี่ยนไปไหม?

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

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

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

การย่อ CSS ช่วยลดขนาดไฟล์ได้มากแค่ไหน?

ขึ้นอยู่กับว่าไฟล์เดิมมีช่องว่างและคอมเมนต์มากเพียงใด ไฟล์ที่มีคอมเมนต์เยอะหรือจัดรูปแบบสวยงามมักลดได้ราว 20–50% และจะประหยัดได้มากขึ้นอีกเมื่อเซิร์ฟเวอร์เปิดการบีบอัดแบบ gzip หรือ Brotli