การใช้งาน CSS Counters

การใช้งาน CSS Counters: สร้างเลขลำดับอัตโนมัติ

ในบทความก่อนหน้า เราได้เรียนรู้วิธีการสร้างรูปทรงต่างๆ ด้วย CSS คราวนี้เราจะมาเรียนรู้เทคนิคที่น่าสนใจอีกอย่างหนึ่ง นั่นคือการใช้งาน CSS Counters เพื่อสร้างเลขลำดับอัตโนมัติ โดยไม่ต้องพึ่งพา JavaScript เลยสักนิด! CSS Counters มีประโยชน์อย่างมากในการสร้างรายการที่มีการเรียงลำดับ เช่น หัวข้อในบทความ, ขั้นตอนการทำงาน, หรือแม้แต่การสร้าง numbering scheme ที่ซับซ้อนกว่านั้น

CSS Counters คืออะไร?

CSS Counters เป็นตัวแปรที่ CSS จัดการให้โดยอัตโนมัติ เราสามารถกำหนดค่าเริ่มต้น, เพิ่มค่า, และแสดงค่าของ counter ได้โดยใช้ CSS Rules เท่านั้น ทำให้เราสามารถสร้างเลขลำดับที่เปลี่ยนแปลงไปตามตำแหน่งของ element ใน HTML ได้อย่างง่ายดาย

3 Properties หลักที่ต้องรู้

ในการใช้งาน CSS Counters จะมี properties หลักๆ ที่เราต้องทำความเข้าใจอยู่ 3 ตัว ได้แก่ counter-reset, counter-increment, และ content: counter()

1. `counter-reset`

counter-reset ใช้เพื่อสร้างและกำหนดค่าเริ่มต้นให้กับ counter ใหม่ โดยระบุชื่อของ counter และค่าเริ่มต้น (default คือ 0) หากเราไม่กำหนดค่าเริ่มต้น Counter จะเริ่มต้นที่ 0 เสมอ

/* สร้าง counter ชื่อ 'section' และกำหนดค่าเริ่มต้นเป็น 0 */
body {
  counter-reset: section;
}

/* สร้าง counter ชื่อ 'page' และกำหนดค่าเริ่มต้นเป็น 1 */
.article {
  counter-reset: page 1;
}

เราสามารถสร้าง counter ได้มากกว่าหนึ่งตัวใน property เดียว โดยคั่นด้วย space

body {
  counter-reset: section 0 page 1 chapter 5;
}

ในตัวอย่างนี้ เราสร้าง counter ชื่อ section เริ่มต้นที่ 0, page เริ่มต้นที่ 1, และ chapter เริ่มต้นที่ 5

2. `counter-increment`

counter-increment ใช้เพื่อเพิ่มค่าของ counter เมื่อ element ที่มี property นี้ปรากฏขึ้น โดยระบุชื่อของ counter และค่าที่ต้องการเพิ่ม (default คือ 1)

/* เพิ่มค่า counter 'section' ขึ้นทีละ 1 เมื่อเจอ element h2 */
h2 {
  counter-increment: section;
}

/* เพิ่มค่า counter 'page' ขึ้นทีละ 2 เมื่อเจอ element div ที่มี class 'page-break' */
.page-break {
  counter-increment: page 2;
}

เช่นเดียวกับ counter-reset เราสามารถเพิ่มค่า counter ได้มากกว่าหนึ่งตัวใน property เดียว

h2 {
  counter-increment: section page; /* เพิ่มทั้ง section และ page ขึ้นทีละ 1 */
}

เรายังสามารถกำหนดค่าที่ต้องการเพิ่มเป็นค่าลบได้ ซึ่งจะทำให้ counter ลดลง

.remove-page {
  counter-increment: page -1; /* ลดค่า counter 'page' ลงทีละ 1 */
}

3. `content: counter()`

content: counter() ใช้เพื่อแสดงค่าของ counter ใน element โดยมักใช้ร่วมกับ pseudo-element ::before หรือ ::after เพื่อแทรกข้อความหรือตัวเลขก่อนหรือหลัง element นั้นๆ

/* แสดงค่า counter 'section' ก่อน element h2 */
h2::before {
  content: "Section " counter(section) ": ";
}

/* แสดงค่า counter 'page' หลัง element div ที่มี class 'page-number' */
.page-number::after {
  content: "Page " counter(page);
}

เราสามารถกำหนดรูปแบบของตัวเลขที่แสดงได้ โดยใช้ counter(name, style) โดย style สามารถเป็น decimal (default), lower-roman, upper-roman, lower-alpha, upper-alpha, lower-greek, cjk-decimal, armenian, georgian, hebrew, persian, devanagari, gurmukhi, gujarati, oriya, tamil, telugu, kannada, malayalam, thai

/* แสดงค่า counter 'section' เป็นเลขโรมันตัวใหญ่ */
h2::before {
  content: "Section " counter(section, upper-roman) ": ";
}

ตัวอย่างการใช้งานจริง: สร้างเลขลำดับหัวข้ออัตโนมัติ

ลองมาดูตัวอย่างการใช้งาน CSS Counters เพื่อสร้างเลขลำดับหัวข้ออัตโนมัติในบทความกัน

<article>
  <h1>หัวข้อหลักของบทความ</h1>
  <h2>หัวข้อย่อยที่ 1</h2>
  <p>เนื้อหาของหัวข้อย่อยที่ 1</p>
  <h2>หัวข้อย่อยที่ 2</h2>
  <p>เนื้อหาของหัวข้อย่อยที่ 2</p>
  <h3>หัวข้อย่อยระดับ 3 ที่ 1</h3>
  <p>เนื้อหาของหัวข้อย่อยระดับ 3 ที่ 1</p>
  <h3>หัวข้อย่อยระดับ 3 ที่ 2</h3>
  <p>เนื้อหาของหัวข้อย่อยระดับ 3 ที่ 2</p>
  <h2>หัวข้อย่อยที่ 3</h2>
  <p>เนื้อหาของหัวข้อย่อยที่ 3</p>
</article>

article {
  counter-reset: section; /* สร้าง counter ชื่อ 'section' */
}

h2 {
  counter-increment: section; /* เพิ่มค่า counter 'section' เมื่อเจอ h2 */
}

h2::before {
  content: counter(section) ". "; /* แสดงค่า counter 'section' ก่อน h2 */
  font-weight: bold;
}

h3 {
  counter-reset: subsection; /* สร้าง counter ชื่อ 'subsection' ภายใน h2 */
}

h3::before {
  counter-increment: subsection; /* เพิ่มค่า counter 'subsection' เมื่อเจอ h3 */
  content: counter(section) "." counter(subsection) " "; /* แสดงค่า counter 'section' และ 'subsection' ก่อน h3 */
  font-style: italic;
}

ผลลัพธ์ที่ได้คือ:

หัวข้อหลักของบทความ
1. หัวข้อย่อยที่ 1
เนื้อหาของหัวข้อย่อยที่ 1
2. หัวข้อย่อยที่ 2
เนื้อหาของหัวข้อย่อยที่ 2
2.1 หัวข้อย่อยระดับ 3 ที่ 1
เนื้อหาของหัวข้อย่อยระดับ 3 ที่ 1
2.2 หัวข้อย่อยระดับ 3 ที่ 2
เนื้อหาของหัวข้อย่อยระดับ 3 ที่ 2
3. หัวข้อย่อยที่ 3
เนื้อหาของหัวข้อย่อยที่ 3

ในตัวอย่างนี้ เราสร้าง counter ชื่อ section สำหรับหัวข้อย่อยระดับ 2 (h2) และ counter ชื่อ subsection สำหรับหัวข้อย่อยระดับ 3 (h3) สังเกตว่าเราสร้าง subsection ภายใน h2 ซึ่งทำให้ counter subsection เริ่มต้นใหม่ทุกครั้งที่เจอ h2 ใหม่

กรณีใช้งานจริงอื่นๆ

สร้างรายการเรียงลำดับแบบกำหนดเอง: สามารถใช้ counter ร่วมกับ list-style: none; เพื่อสร้างรายการที่เรียงลำดับด้วยรูปแบบตัวเลขหรือตัวอักษรที่กำหนดเองได้
สร้าง Pagination: ใช้ counter เพื่อแสดงเลขหน้าในเว็บไซต์ที่มีหลายหน้า
สร้าง Quiz หรือ Test: ใช้ counter เพื่อแสดงหมายเลขข้อในแบบทดสอบ

ข้อผิดพลาดที่พบบ่อย

ลืม counter-reset: หากไม่กำหนด counter-reset counter จะไม่เริ่มต้น และการใช้งาน counter-increment จะไม่ได้ผล
ใช้ counter-increment ผิด element: ตรวจสอบให้แน่ใจว่า counter-increment ถูกใช้กับ element ที่ต้องการให้เพิ่มค่า counter
ลืม content: counter(): หากไม่ใช้ content: counter() ค่าของ counter จะไม่ถูกแสดง
CSS Specificity: ตรวจสอบให้แน่ใจว่า CSS rules ที่ใช้กับ counter มี specificity สูงพอที่จะ override rules อื่นๆ

สรุป

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

ในบทความถัดไป เราจะเรียนรู้เกี่ยวกับการสร้าง Parallax Scrolling Effect ด้วย CSS ซึ่งเป็นเทคนิคที่ช่วยเพิ่มความน่าสนใจให้กับเว็บไซต์ของคุณ

การใช้งาน CSS Counters