@counter-style

Baseline Widely available *

This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2023.

* Some parts of this feature may have varying levels of support.

Quy tắc at @counter-style CSS cho phép bạn mở rộng các kiểu danh sách được định sẵn và định nghĩa kiểu đếm tùy chỉnh không nằm trong tập hợp các kiểu được định sẵn. Quy tắc @counter-style chứa các mô tả định nghĩa cách giá trị đếm được chuyển thành biểu diễn chuỗi.

Mặc dù CSS cung cấp nhiều kiểu đếm được định sẵn hữu ích, quy tắc at @counter-style cung cấp phương pháp linh hoạt để tạo counter. Quy tắc at này đáp ứng nhu cầu typography toàn cầu bằng cách cho phép các tác giả định nghĩa kiểu đếm tùy chỉnh khi các kiểu định sẵn không đáp ứng yêu cầu của họ.

Cú pháp

css

@counter-style thumbs {
  system: cyclic;
  symbols: "\1F44D";
  suffix: " ";
}

Quy tắc at @counter-style được nhận dạng bằng tên kiểu đếm, và kiểu của counter được đặt tên có thể được tinh chỉnh bằng <declaration-list> gồm một hoặc nhiều mô tả và giá trị của chúng.

Tên kiểu đếm

<counter-style-name>: Cung cấp tên cho kiểu đếm của bạn. Nó được chỉ định là <custom-ident> phân biệt hoa thường không có dấu nháy. Giá trị không được bằng none. Giống như tất cả các định danh tùy chỉnh, giá trị của kiểu đếm không thể là từ khóa toàn cục CSS. Tránh dùng các giá trị thuộc tính CSS đã liệt kê khác, bao gồm các giá trị thuộc tính list và counter style. Tên counter của bạn không thể là các giá trị thuộc tính list-style-type không phân biệt hoa thường là decimal, disc, square, circle, disclosure-open và disclosure-closed.

Note: Các tên kiểu đếm không thể ghi đè decimal, disc, square, circle, disclosure-open và disclosure-closed không thể được dùng làm tên counter tùy chỉnh. Tuy nhiên, chúng hợp lệ trong các ngữ cảnh khác nơi kiểu dữ liệu <counter-style-name> được mong đợi, chẳng hạn trong system: extends <counter-style-name>.

Mô tả

system: Chỉ định thuật toán dùng để chuyển đổi giá trị số nguyên của counter thành biểu diễn chuỗi. Nếu giá trị là cyclic, numeric, alphabetic, symbolic hoặc fixed, mô tả symbols cũng phải được chỉ định. Nếu giá trị là additive, mô tả additive-symbols cũng phải được chỉ định.
symbols: Chỉ định các ký hiệu dùng cho biểu diễn marker. Ký hiệu có thể chứa chuỗi, hình ảnh hoặc định danh tùy chỉnh. Mô tả này bắt buộc nếu mô tả system được đặt thành cyclic, numeric, alphabetic, symbolic hoặc fixed.
additive-symbols: Định nghĩa các bộ đôi cộng cho các hệ thống cộng. Trong khi các ký hiệu chỉ định trong mô tả symbols được dùng để xây dựng biểu diễn marker bởi hầu hết các thuật toán, các hệ thống counter cộng như số La Mã bao gồm một chuỗi các ký hiệu có trọng số. Mô tả là danh sách ký hiệu counter cùng với trọng số số nguyên không âm của chúng, liệt kê theo trọng số giảm dần. Mô tả này bắt buộc nếu mô tả system được đặt thành additive.
negative: Chỉ định các ký hiệu sẽ được thêm vào đầu hoặc cuối biểu diễn counter nếu giá trị là âm.
prefix: Chỉ định ký hiệu sẽ được thêm vào trước biểu diễn marker. Các tiền tố được thêm vào biểu diễn ở giai đoạn cuối, trước bất kỳ ký tự nào được thêm vào giá trị counter âm bởi mô tả negative.
suffix: Tương tự mô tả prefix, chỉ định ký hiệu được thêm vào sau biểu diễn marker. Các hậu tố đứng sau biểu diễn marker, kể cả sau bất kỳ ký tự nào được thêm vào giá trị counter âm bởi mô tả negative.
range: Định nghĩa phạm vi giá trị mà kiểu đếm được áp dụng. Nếu kiểu đếm được dùng để biểu diễn giá trị counter ngoài phạm vi được định nghĩa bởi mô tả này, kiểu đếm sẽ quay lại dùng kiểu fallback của nó.
pad: Được dùng khi bạn cần biểu diễn marker có độ dài tối thiểu. Ví dụ nếu bạn muốn counter bắt đầu từ 01 và đi qua 02, 03, 04, v.v., thì mô tả pad cần được dùng. Đối với các biểu diễn lớn hơn giá trị pad được chỉ định, marker được xây dựng bình thường.
speak-as: Mô tả cách các bộ tổng hợp giọng nói, chẳng hạn như trình đọc màn hình, nên thông báo kiểu đếm. Ví dụ, giá trị của marker danh sách có thể được đọc ra như số hoặc chữ cái cho danh sách có thứ tự hoặc như tín hiệu âm thanh cho danh sách không có thứ tự, dựa trên giá trị của mô tả này.
fallback: Chỉ định tên counter của hệ thống để quay lại nếu hệ thống được chỉ định không thể xây dựng biểu diễn của giá trị counter hoặc nếu giá trị counter nằm ngoài range được chỉ định. Nếu counter dự phòng cũng không thể biểu diễn giá trị, thì dự phòng của counter đó sẽ được dùng, nếu có. Nếu không có counter dự phòng nào được mô tả hoặc nếu chuỗi hệ thống dự phòng không thể biểu diễn giá trị counter, nó sẽ cuối cùng quay lại kiểu decimal.

Cú pháp hình thức

@counter-style = 
  @counter-style <counter-style-name> { <declaration-list> }  

<counter-style-name> = 
  <custom-ident>

Ví dụ

Chỉ định ký hiệu với counter-style

css

@counter-style circled-alpha {
  system: fixed;
  symbols: Ⓐ Ⓑ Ⓒ Ⓓ Ⓔ Ⓕ Ⓖ Ⓗ Ⓘ Ⓙ Ⓚ Ⓛ Ⓜ Ⓝ Ⓞ Ⓟ Ⓠ Ⓡ Ⓢ Ⓣ Ⓤ Ⓥ Ⓦ Ⓧ Ⓨ Ⓩ;
  suffix: " ";
}

Quy tắc kiểu counter ở trên có thể được áp dụng cho danh sách như sau:

css

.items {
  list-style: circled-alpha;
}

Đoạn code trên tạo ra kết quả sau:

<ol class="items">
  <li>one</li>
  <li>two</li>
  <li>three</li>
  <li>four</li>
  <li>five</li>
</ol>
<p>...</p>
<ol class="items" start="25">
  <li>twenty-five</li>
  <li>twenty-six</li>
  <li>twenty-seven</li>
  <li>twenty-eight</li>
</ol>

Xem thêm ví dụ trên trang demo (mã nguồn).

Kiểu counter sẵn sàng sử dụng

Tìm bộ sưu tập hơn 100 đoạn code counter-style trong tài liệu Ready-made Counter Styles. Tài liệu này cung cấp các counter đáp ứng nhu cầu của các ngôn ngữ và nền văn hóa trên toàn thế giới.

Bộ chuyển đổi kiểu counter lấy từ danh sách này để kiểm tra và tạo code sao chép và dán cho kiểu counter.

Thông số kỹ thuật

Specification
CSS Counter Styles Level 3 # the-counter-style-rule

Tương thích trình duyệt

Xem thêm

Help improve MDN

Learn how to contribute

This page was last modified on Jan 1, 1970 by MDN contributors.

View this page on GitHub • Report a problem with this content