Bộ đếm CSS: Khai phá sức mạnh của việc đánh số

Bộ đếm CSS (CSS counters) là một tính năng mạnh mẽ nhưng ít được tận dụng, cho phép lập trình viên tạo đánh số tự động, linh hoạt cho các phần tử trên trang web. Dù bạn đang xây dựng danh sách đánh số, hướng dẫn từng bước hay thanh điều hướng tùy chỉnh, CSS counters mang đến một cách hiệu quả để quản lý đánh số mà không cần JavaScript hay chỉnh sửa HTML thủ công.

Bài viết này sẽ giới thiệu về CSS counters, giải thích cú pháp, và trình bày các ví dụ thực tế để bạn có thể khai thác tiềm năng của chúng trong việc đánh số đẹp mắt.

CSS Counters là gì?

CSS counters là các biến được duy trì bởi CSS, có thể được tăng giá trị và hiển thị bằng hàm counter() hoặc counters(). Chúng đặc biệt hữu ích để tạo ra chuỗi số, chữ cái hoặc mẫu tuần tự cho các phần tử như danh sách, tiêu đề, hoặc các mục tùy chỉnh. Khác với danh sách HTML truyền thống <ol>, counters cung cấp quyền kiểm soát cao hơn đối với cách hiển thị và vị trí đặt số.

Bắt đầu với CSS Counters

Để sử dụng CSS counters, bạn cần khởi tạo, tăng giá trị, và hiển thị chúng. Dưới đây là hướng dẫn từng bước:

1. Khởi tạo bộ đếm

Sử dụng thuộc tính counter-reset để khởi tạo một bộ đếm. Thuộc tính này đặt giá trị bắt đầu (mặc định là 0).

body {
  counter-reset: section; /* Creates a counter named 'section' */
}

2. Tăng giá trị bộ đếm

Thuộc tính counter-increment tăng giá trị của bộ đếm. Áp dụng nó cho các phần tử cần đếm.

h2 {
  counter-increment: section; /* Increments 'section' by 1 for each h2 */
}

3. Hiển thị bộ đếm

Sử dụng thuộc tính content kèm counter() trong pseudo-element (::before hoặc ::after) để hiển thị giá trị.

h2::before {
  content: "Section " counter(section) ": "; /* Hiển thị 'Section 1:', 'Section 2:', ... */
}

Ví dụ cơ bản

Hãy tạo một tiêu đề được đánh số đơn giản.

HTML:

<h2>Introduction</h2>
<h2>Getting Started</h2>
<h2>Conclusion</h2>

CSS:

body {
  counter-reset: section;
}
h2 {
  counter-increment: section;
}
h2::before {
  content: counter(section) ". ";
  color: #007BFF;
}

Kết quả: Các tiêu đề sẽ hiển thị như sau:

• "1. Introduction", "2. Getting Started", "3. Conclusion"

Kỹ thuật nâng cao

1. Bộ đếm lồng nhau

Đối với cấu trúc lồng nhau (ví dụ: các mục con), dùng counters() với dấu phân cách.

CSS:

body {
  counter-reset: section subsection;
}
h2 {
  counter-increment: section;
}
h3 {
  counter-increment: subsection;
}
h2::before {
  content: counter(section) ". ";
}
h3::before {
  content: counters(section, ".") "." counter(subsection) ". ";
}

HTML:

<h2>Chapter 1</h2>
<h3>Section 1.1</h3>
<h3>Section 1.2</h3>
<h2>Chapter 2</h2>

Kết quả:

• "1. Chapter 1", "1.1. Section 1.1", "1.2. Section 1.2", "2. Chapter 2"

Tùy chỉnh cách hiển thị bộ đếm

Bạn có thể thay đổi kiểu hiển thị bằng các thuộc tính CSS.

h2::before {
  content: counter(section, upper-roman) ". "; /* Hiển thị số La Mã (I, II, III) */
  font-weight: bold;
  color: #28a745;
}

Lựa chọn định dạng counter() phổ biến:

• decimal (1, 2, 3)
• upper-roman (I, II, III)
• lower-alpha (a, b, c)
• ...và nhiều hơn nữa.

Đặt lại bộ đếm

Đặt lại giá trị bộ đếm trong một vùng cụ thể:

div.chapter {
  counter-reset: subsection;
}

Ứng dụng thực tế

• Danh sách tùy chỉnh: Thay thế <ol> bằng bộ đếm để thiết kế độc đáo hơn.
• Hướng dẫn từng bước: Đánh số bước tự động trên nhiều trang.
• Menu điều hướng: Tạo mục menu đánh số tự động.

Lợi ích và hạn chế

Lợi ích:

• Nhẹ, dễ duy trì, linh hoạt về kiểu dáng.

Hạn chế:

• Chỉ hoạt động trong phạm vi CSS; logic phức tạp có thể cần JavaScript.
• Hỗ trợ trình duyệt rất tốt nhưng nên kiểm tra các trường hợp đặc biệt.

Kết luận

CSS counters mở ra vô vàn khả năng đánh số phong cách, mang đến giải pháp gốc cho nội dung động. Hãy bắt đầu với các ví dụ đơn giản, sau đó thử nghiệm counters lồng nhau và tuỳ chỉnh để nâng tầm thiết kế web của bạn.

Hãy thử áp dụng các ví dụ trên và chia sẻ sáng tạo của bạn với cộng đồng Pixel & Code — gắn thẻ chúng tôi để khoe thành phẩm của bạn!