การใช้งาน CSS Reset และ Normalize

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

ทั้ง CSS Reset และ Normalize.css มีจุดประสงค์เดียวกันคือ เพื่อลดความแตกต่างของ styles เริ่มต้นที่ browser แต่ละตัวกำหนดให้กับ HTML elements แต่มีวิธีการที่แตกต่างกัน

CSS Reset คืออะไร

CSS Reset คือชุดของ CSS rules ที่พยายามที่จะ "reset" styles เริ่มต้นของ HTML elements ทั้งหมดให้เหมือนกันหมด โดยปกติแล้วจะกำหนดค่าต่างๆ เช่น margin, padding, border ให้เป็น 0 และ font-size ให้เป็น 100%

ทำไมต้องใช้ CSS Reset?

Browser แต่ละตัว (เช่น Chrome, Firefox, Safari) อาจมี styles เริ่มต้นที่แตกต่างกันสำหรับ HTML elements เช่น heading tags (<h1>, <h2>) อาจมี margin ที่แตกต่างกัน หรือ list items (<li>) อาจมี padding ที่ไม่เหมือนกัน ความแตกต่างเหล่านี้อาจทำให้ layout ของเว็บไซต์เราดูไม่สอดคล้องกันเมื่อเปิดใน browser ที่ต่างกัน

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

ตัวอย่าง CSS Reset อย่างง่าย:

/* CSS Reset */
body, h1, h2, h3, h4, h5, h6, p, ol, ul {
  margin: 0;
  padding: 0;
}

ol, ul {
  list-style: none;
}

ตัวอย่างนี้จะ reset margin และ padding ของ HTML elements ที่พบบ่อย และลบ list styles ออกจาก ordered และ unordered lists

ข้อดีของ CSS Reset:

ความสอดคล้อง: ช่วยให้เว็บไซต์แสดงผลได้อย่างสอดคล้องกันใน browser ที่ต่างกัน
จุดเริ่มต้นที่สะอาด: ทำให้เราเริ่มต้นออกแบบเว็บไซต์ด้วย styles ที่เรากำหนดเองได้อย่างเต็มที่

ข้อเสียของ CSS Reset:

ต้องกำหนด styles ใหม่ทั้งหมด: เนื่องจาก styles เริ่มต้นถูก reset ไปแล้ว เราต้องกำหนด styles สำหรับทุก element ที่เราต้องการใช้งานใหม่ทั้งหมด
อาจทำให้เกิด confusion: อาจทำให้สับสนสำหรับผู้เริ่มต้น เนื่องจาก styles ที่คุ้นเคยหายไป

Normalize.css คืออะไร

Normalize.css เป็นทางเลือกหนึ่งสำหรับ CSS Reset ที่พยายามที่จะ "normalize" styles เริ่มต้นของ HTML elements แทนที่จะ reset ให้เป็น 0 Normalize.css จะแก้ไข bugs และ inconsistencies ใน browser ต่างๆ และรักษา styles ที่มีประโยชน์ไว้

ทำไมต้องใช้ Normalize.css?

Normalize.css มีแนวทางที่ "conservative" กว่า CSS Reset โดยจะแก้ไขเฉพาะ styles ที่มีปัญหาจริงๆ และรักษา styles ที่มีความหมายไว้ เช่น heading tags ยังคงมี font-size ที่แตกต่างกัน (<h1> ใหญ่กว่า <h2>) และบาง elements ยังคงมี margin หรือ padding ที่เหมาะสม

ตัวอย่างการใช้งาน Normalize.css:

Normalize.css เป็นไฟล์ CSS ที่เราสามารถดาวน์โหลดได้จากเว็บไซต์อย่างเป็นทางการ (https://necolas.github.io/normalize.css/) หลังจากดาวน์โหลดแล้ว เราสามารถ link ไฟล์ CSS นี้ใน <head> ของ HTML document ของเราได้

<!DOCTYPE html>
<html>
<head>
  <title>My Website</title>
  <link rel="stylesheet" href="normalize.css">
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <h1>Hello, World!</h1>
  <p>This is a paragraph.</p>
</body>
</html>

ข้อดีของ Normalize.css:

แก้ไข bugs และ inconsistencies: ช่วยแก้ไข bugs และ inconsistencies ใน browser ต่างๆ
รักษา styles ที่มีประโยชน์: รักษา styles เริ่มต้นที่มีความหมายไว้ ทำให้เราไม่ต้องกำหนด styles ใหม่ทั้งหมด
ง่ายต่อการเริ่มต้น: ทำให้เราเริ่มต้นออกแบบเว็บไซต์ได้ง่ายขึ้น เนื่องจาก styles ที่คุ้นเคยยังคงอยู่

ข้อเสียของ Normalize.css:

อาจต้อง override styles: อาจต้อง override styles ที่ Normalize.css กำหนดไว้ หากเราต้องการ styles ที่แตกต่างออกไป
ขนาดไฟล์ใหญ่กว่า CSS Reset: โดยทั่วไปแล้ว Normalize.css จะมีขนาดไฟล์ใหญ่กว่า CSS Reset เล็กน้อย

ข้อดีข้อเสียของการใช้งาน

สรุปแล้ว CSS Reset และ Normalize.css มีข้อดีข้อเสียที่แตกต่างกัน ดังนี้:

Feature	CSS Reset	Normalize.css
Approach	Reset everything to a blank slate	Normalize styles and fix inconsistencies
Starting Point	Clean slate, requires styling everything	More familiar starting point with some default styles
Browser Consistency	Ensures consistent rendering across browsers	Improves consistency by normalizing existing styles
Ease of Use	Requires more styling upfront	Easier to start with, requires less initial styling
File Size	Smaller file size	Slightly larger file size

ควรเลือกใช้อะไรดี?

การเลือกใช้ CSS Reset หรือ Normalize.css ขึ้นอยู่กับความชอบส่วนตัวและลักษณะของโปรเจกต์ ถ้าคุณต้องการจุดเริ่มต้นที่สะอาดและควบคุม styles ทุกอย่างด้วยตัวเอง CSS Reset อาจเป็นตัวเลือกที่ดีกว่า แต่ถ้าคุณต้องการจุดเริ่มต้นที่คุ้นเคยและแก้ไขเฉพาะ styles ที่มีปัญหา Normalize.css อาจเป็นตัวเลือกที่เหมาะสมกว่า

คำแนะนำเพิ่มเติม:

เลือกใช้เพียงอย่างเดียว: ไม่ควรใช้ CSS Reset และ Normalize.css พร้อมกัน เพราะอาจทำให้เกิดความขัดแย้งกันได้
วางไว้ที่ด้านบนสุด: ควรวาง CSS Reset หรือ Normalize.css ไว้ที่ด้านบนสุดของ stylesheet เพื่อให้ styles เหล่านี้ถูกนำไปใช้ก่อน styles อื่นๆ ของเรา

ในบทต่อไป เราจะมาเรียนรู้เกี่ยวกับการปรับแต่ง List ด้วย CSS เพื่อให้ list items ของเราดูสวยงามและน่าสนใจยิ่งขึ้น