- Thuộc tính counter-increment cho phép các nhà phát triển tăng hoặc giảm giá trị của một biến CSS có tên là counter một cách linh hoạt.
- Việc đánh số hiệu quả đòi hỏi sự kết hợp giữa việc đặt lại bộ đếm để khởi tạo bộ đếm và hàm counter() để hiển thị giá trị.
- Cách sử dụng nâng cao bao gồm các bộ đếm lồng nhau bằng cách sử dụng hàm counters() và định dạng tùy chỉnh với chữ số La Mã hoặc danh sách chữ cái.
Bạn đã bao giờ nhìn vào một tài liệu dài và ước mình có thể tự động đánh số tiêu đề mà không cần phải gõ thủ công "1, 2, 3" mỗi khi thêm một phần mới chưa? Thật may mắn, vì CSS có sẵn cách để xử lý việc này. Hãy coi các bộ đếm CSS như các biến nội bộ theo dõi số thứ tự khi trình duyệt hiển thị trang của bạn, cho phép bạn tạo danh sách và chuỗi tự động cập nhật.
Mặc dù thoạt nhìn có vẻ như cần đến JavaScript, nhưng những công cụ này lại được tích hợp sẵn trong trình duyệt và vô cùng nhẹ. Bằng cách sử dụng bộ đếm tăng dần kết hợp với các thuộc tính khác , bạn có thể biến các phần tử HTML thông thường thành một chuỗi được đánh số có cấu trúc, giúp người dùng dễ dàng điều hướng nội dung hơn trong khi vẫn giữ được mã HTML sạch sẽ và có ý nghĩa.
Cơ chế cốt lõi: Cách thức hoạt động
Để thiết lập và vận hành các bộ đếm này, bạn không thể chỉ sử dụng một thuộc tính; bạn cần một nhóm nhỏ các quy tắc CSS hoạt động cùng nhau. Đầu tiên, bạn có thuộc tính `counter-reset` , hoạt động như vạch xuất phát. Nó khởi tạo một bộ đếm với một tên cụ thể và, tùy chọn, một số bắt đầu. Nếu bạn không cung cấp số, nó sẽ mặc định là 0. Ví dụ, nếu bạn muốn mục đầu tiên là 1, bạn sẽ đặt lại nó về 0 trước khi các mục xuất hiện.
Tiếp theo là phần quan trọng nhất: `counter-increment` . Thuộc tính này cho trình duyệt biết cần cộng thêm một giá trị vào bộ đếm được đặt tên của bạn mỗi khi gặp một bộ chọn cụ thể. Theo mặc định, nó cộng thêm 1, nhưng bạn có thể chỉ định bất kỳ số nguyên nào . Nếu bạn sử dụng số âm, chẳng hạn như -1, bộ đếm sẽ thực sự đếm ngược, đây là một thủ thuật hay để tạo bộ đếm ngược hoặc danh sách đảo ngược. Nếu bạn cần ngăn bộ đếm tăng lên trong một khu vực cụ thể, bạn chỉ cần đặt nó thành ` none`.
Đưa các con số lên màn hình
Một điều thường khiến người mới bắt đầu vấp ngã là... các bộ đếm vô hình Theo mặc định, chúng chỉ là những con số trôi nổi trong bộ nhớ trình duyệt. Để thực sự nhìn thấy chúng, bạn phải sử dụng... thuộc tính nội dung, thường nằm bên trong một ::before or ::after phần tử giả. Đây là nơi mà hàm counter() Hàm này được sử dụng để truy xuất giá trị hiện tại của biến và in nó ra dưới dạng văn bản.
- Cách triển khai cơ bản: Bạn chọn mục tiêu là phần tử bạn muốn đánh số, rồi áp dụng.
counter-increment, và sau đó sử dụngcontent: counter(name);trong một phần tử giả. - Chuỗi ký tự tùy chỉnh: Bạn không bị giới hạn chỉ bởi số lượng. Bạn có thể nối văn bản, Chẳng hạn như
content: \"Step \" counter(my-counter) \": \";Để tạo vẻ ngoài chuyên nghiệp hơn. - Định dạng đầu ra: Bạn có thể thay đổi cách hiển thị của số bằng cách truyền thêm đối số thứ hai cho hàm. Ví dụ: La Mã thượng sẽ cung cấp cho bạn chữ số La Mã, trong khi alpha thấp hơn Cung cấp một danh sách được sắp xếp theo thứ tự chữ cái.
Các kỹ thuật nâng cao và các trường hợp ứng dụng thực tế
Nếu bạn đang đối phó với cấu trúc lồng nhauGiống như mục lục có các phần 1, 1.1 và 1.1.1, một bộ đếm duy nhất là không đủ. Đây là lúc... hàm counters() (Số nhiều) là cứu tinh. Không giống như dạng số ít, counters() có thể theo dõi nhiều cấp độ lồng nhau và nối chúng lại với nhau bằng một sợi dâychẳng hạn như dấu chấm, để tạo ra một hệ thống đánh số thứ bậc.
Một ứng dụng rất thiết thực là thêm vào số dòng thành khối mãKhi sử dụng các trình làm nổi bật cú pháp không hỗ trợ đánh số mặc định, bạn có thể nhắm mục tiêu vào các dòng mã bằng CSS. Bằng cách đặt lại bộ đếm trên... <pre> gắn thẻ và tăng giá trị của nó sau mỗi lần .line lớp học, bạn tạo ra một cột đánh số liền mạch mà không cần động đến logic JavaScript của bạn.
Một thủ thuật khéo léo khác là đếm anh chị em mà về mặt kỹ thuật không lồng nhau. Nếu bạn có một loạt các <h2> và <h3> bạn có thể tạo các thẻ <h2> đặt lại <h3> bộ đếm. Điều này tạo ra một trình tự logic Trong đó, các tiêu đề phụ được đặt lại từ 1 mỗi khi một tiêu đề chính mới xuất hiện, mặc dù tất cả chúng đều là các phần tử cùng cấp trong DOM.
Một từ về khả năng truy cập
Mặc dù việc sử dụng bộ đếm CSS để làm cho bất kỳ nhóm div nào trông giống như một danh sách có vẻ hấp dẫn, nhưng bạn nên cẩn thận. HTML ngữ nghĩa là yếu tố quan trọng nhất.Nếu nội dung về mặt logic là một danh sách, hãy sử dụng... <ol> và <li>Việc sử dụng CSS để mô phỏng danh sách rất hữu ích cho... trang trí thị giác hoặc thêm số thứ tự vào tiêu đề, nhưng điều đó không nên thay thế cấu trúc cơ bản mà trình đọc màn hình dựa vào để điều hướng trang một cách hiệu quả.
Bằng cách tận dụng sức mạnh của việc đặt lại bộ đếm, tăng bộ đếm và hàm `counter()` , bạn có thể chuyển từ hệ thống đánh số tĩnh sang một hệ thống động xử lý tất cả các phép toán cho bạn. Cho dù bạn đang xây dựng một tài liệu kỹ thuật phức tạp với các phần lồng nhau hay chỉ đơn giản là thêm một chút trau chuốt cho các đoạn mã trên blog, những công cụ này đều cung cấp một cách mạnh mẽ và hiệu quả để xử lý việc sắp xếp thứ tự trực tiếp trong các bảng định kiểu của bạn.
