A Guide to CSS counter

Mình hay lang thang và lượn lờ các trang chia sẻ về công nghệ. Nay nhân dịp nghỉ lễ, lượn lờ Medium thấy bài viết về CSS counter - tạo bộ đếm cho bất kỳ element nào trên trang (giống như ol) khá hay nên mạn phép dịch lại để chia sẻ cho mọi người. Biết đâu có ngày nó lại cần thiết cho công việc hay task của mình. Cùng bắt đầu nhé.

---

Sử dụng thuộc tính (property) counter để biết tất các cả element thành một danh sách đánh số. Tương tự như thẻ ol. Thuộc tính này rất hữu ích khi chúng ta tạo một trang tài liệu cần tự động đánh số các tiêu đề hay đơn giản chỉ là việc tạo mục lục cho tài liệu đó.

div {
  /* Định nghĩa và khởi tạo bộ đếm */
  counter-reset: tidbit-counter;
}
h2::before {
  /* Tăng bộ đếm */
  counter-increment: tidbit-counter;
/* Hiển thị bộ đếm */
  content: counter(tidbit-counter) ": ";
}

<div>
  <h2>HTML</h2>
  <h2>CSS</h2>
  <h2>JS</h2>
</div>

Thuộc tính counter làm việc như thế nào?

Có 3 bước để counter hoạt động:

1. Định nghĩa và khởi tạo bộ đếm
2. Tăng bộ đếm
3. Hiển thị bộ đếm

1. Định nghĩa và khởi tạo bộ đếm

Có 2 phần cho bước này. Bạn cần định nghĩa bộ đếm của mình bằng cách đặt tên cho nó

1a. Định nghĩa bộ đếm

Trong ví dụ này, chúng ta sẽ đặt tên cho nó là tidbit-counter. Chúng ta gán tên cho nó để có thể gọi nó ở những bước sau:

counter-reset: tidbit-counter;

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

Phần tiếp theo là chúng ta khởi tạo bộ đếm. Theo mặc định giá trị của nó là 0. Lưu ý rằng giá trị này sẽ không được hiển thị. Giá trị này chỉ là giá trị cài đặt để bắt đầu bộ đếm của chúng ta. Vì vậy, bạn có thể đặt nó là một số bất kỳ. Ví dụ như nếu chúng ta đặt là số 20 thì output của chúng ta sẽ xuất hiện lần lượt là 21, 22, 23, ... (với việc chúng ta tăng theo 1 đơn vị - sẽ nói sau).

counter-reset	Output
0	1, 2, 3, ...
20	21, 22, 23, ...
58	59, 60, 61, ...

Ví dụ:

div {
  counter-reset: tidbit-counter 58;
}
h2::before {
  counter-increment: tidbit-counter;
  content: counter(tidbit-counter) ": ";
}

<div>
  <h2>HTML</h2>
  <h2>CSS</h2>
  <h2>JS</h2>
</div>

Kết quả:

59: HTML
60: CSS
61: JS

Áp dụng thuộc tính counter-reset ở đâu?

Bạn cần phải áp dụng thuộc tính counter-reset trên phần tử cha (parent element). Đây là những gì sẽ xảy ra nếu bạn không áp dụng nó vào thèng cha nó.

/* ❌ Wrong */
h2 {
  counter-reset: tidbit-counter;
}
h2::before {
  counter-increment: tidbit-counter;
  content: counter(tidbit-counter) ": ";
}

Và đây sẽ là output. Như đã nói ở trên, nó sẽ không được tăng đúng cách:

1: HTML
1: JS
1: CSS

Ngoài ra, bạn không cần phải đặt vào phần tử cha trực tiếp của nó cũng được. Miễn là nó có một phần tử HTML bao danh sách đó. Ví dụ:

<section>
  <div>
    <h2>HTML</h2>
    <h2>CSS</h2>
    <h2>JS</h2>
  </div>
</section>

/* ✅ This works */
section {
  counter-reset: tidbit-counter;
}

Kết quả

1. HTML
2. CSS
3. JS

2. Tăng bộ đếm

Một khi bạn đã thiết lập bộ đếm, thì bạn có thể bắt đầu tăng nó. Và dưới đây là cú pháp để thực hiện:

counter-increment: <Tên bộ đếm> <Số nguyên>

Như bạn thấy, nó chấp nhận một số nguyên làm tham số. Điều này có nghĩa là bạn không bị hạn chế với việc chỉ tăng giá trị bộ đếm lên 1. Ví dụ:

counter-increment	Output
1 (mặc định)	1, 2, 3, ...
5	5, 10, 15, ...
-5	-5, -10, -15, ...

Như đã thấy ở trên, bạn có thể truyền một số âm để giảm bộ đếm. Và chúng ta hãy xem điều đó được thực hiện như thế nào nhé :

div {
  counter-reset: tidbit-counter;
}
h2::before {
  counter-increment: tidbit-counter -5;
  content: counter(tidbit-counter) ": ";
}

<div>
  <h2>HTML</h2>
  <h2>CSS</h2>
  <h2>JS</h2>
</div>

Kết quả

-5. HTML
-10. CSS
-15. JS

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

Cuối cùng, để hiển thị bộ đếm, chúng ta cần truyền function counterlàm giá trị cho thuộc tính content. Thuộc tính content thường là cách để chúng ta hiển thị giá trị trong một HTML thông qua CSS. Đây là cú pháp của function counter:

counter(<Tên bộ đếm>, <Kiểu danh sách của bộ đếm>)

Theo mặc định, chúng ta sẽ với các số. Và đó là mặc định của counter list style, hoặc trong tài liệu nó gọi là style. Nhưng bạn cũng có thể sử dụng các kiểu khác như:

style	Output
default	1, 2, 3, ...
upper-alpha	A, B, C, ...
lower-roman	i, ii, iii, ...
thai	๑, ๒, ๓ ...

Bạn có thể xem danh sách các style đầy đủ tại đây.

Ví dụ

div {
  counter-reset: tidbit-counter;
}
h2::before {
  counter-increment: tidbit-counter;
  content: counter(tidbit-counter, thai); /* 👈 */
}

<div>
  <h2>HTML</h2>
  <h2>CSS</h2>
  <h2>JS</h2>
</div>

Kết quả

๑HTML
๒CSS
๓JS

Multiple Counters

Bạn cũng có thể đặt nhiều bộ đếm bằng cách định nghĩa thêm một tên bộ đếm khác vào counter-reset. Ví dụ, bộ đếm 1 counter-one sẽ bắt đầu từ 0 (theo mặc định, nên chúng ta không cần phải định nghĩa số đằng sau tên của nó), còn bộ đếm 2 counter-two sẽ bắt đầu từ 100:

div {
  counter-reset: counter-one counter-two 100;
}
h2::before {
  counter-increment: counter-one;
  content: counter(counter-one) ": ";
}
h3::before {
  counter-increment: counter-two;
  content: counter(counter-two) ": ";
}

<div>
  <h2>one</h2>
  <h2>one</h2>
  
  <h3>two</h3>
  <h3>two</h3>
</div>

Kết quả

1: one
2: one
101: two
102: two

Bộ đếm lồng nhau

Bạn cũng có thể đặt một bộ đếm lồng nhau. Thay vì sử dụng counter, bạn sử dụng số nhiều counters. counters chấp nhận thêm một tham số bổ sung:

counters(<Tên bộ đếm>, <string>, <Kiểu danh sách của bộ đếm>);

Tham số string là một chuỗi phân cách mà bạn sẽ sử dụng để chỉ ra cách mà bạn muốn tách danh sách cho các bộ đếm lồng nhau.

string	Output
"."	1.1, 1.2, 1.3, ...
">"	1>1, 1>2, 1>3, ...
":"	1:1, 1:2, 1:3, ...

Hãy xem ví dụ dưới đây:

div {
  counter-reset: multi-counters;
}
h2::before {
  counter-increment: multi-counters;
  content: counters(multi-counters, ".") ": ";
}

<div>
  <h2>Frameworks</h2>
  <div>
    <h2>Vue</h2>
    <h2>React</h2>
    <h2>Angular</h2>
  </div>
</div>

Kết quả

1: Frameworks
  1.1: Vue
  1.2: React
  1.3: Angular

counter vs <ol>

Bộ đếm bằng CSS không thay thế thẻ <ol>. Nếu bạn có một danh sách đánh số theo thứ tự, thì bạn vẫn nên sử dụng thẻ <ol> bởi vì điều quan trọng là bạn sẽ cấu trúc HTML của mình bằng cách sử dụng ngữ nghĩa phù hợp (vì <ol> là Ordered List). Việc sử dụng ngữ nghĩa phù hợp cho HTML sẽ rất quan trọng cho việc bạn SEO trang của mình.

Sự tương thích

CSS counter được hỗ trợ bởi tất cả các trình duyệt chính bao gồm cả Internet Explorer 8 trở lên. Bạn có thể xem chi tiết tại Can I Use: CSS Counter!

Đến đây là kết thúc bài dịch của mình. Hy vọng nó sẽ có ích cho bạn trong tương lai gần. Hẹn gặp lạ !

Nguồn bài viết: https://medium.com/@samanthaming/a-guide-to-css-counter-8e80039ac547