CSS Minifier - ย่อโค้ด CSS ออนไลน์

      
body {
    padding-left: 11em;
    font-family: Georgia, "Times New Roman", Times, serif;
    color: purple;
    background-color: #d8da3d
}

ul.navbar {
    position: absolute;
    top: 2em;
    left: 1em;
    width: 9em
}

h1 {
    font-family: Helvetica, Geneva, Arial, SunSans-Regular, sans-serif
}
      
    

การบีบอัดคืออะไร?

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

ทำไมต้องบีบอัด CSS?

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

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

ตัวอย่าง

ก่อนบีบอัด

      
nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
nav li {
  display: inline-block;
}
nav a {
  display: block;
  padding: 6px 12px;
  text-decoration: none;
}
      
    

หลังบีบอัด

      
nav ul{margin:0;padding:0;list-style:none;}nav li{display:inline-block;}nav a{display:block;padding:6px 12px;text-decoration:none;}