Với một web developer, việc trình bày thông tin một cách đúng đắn, đúng thứ tự là một điều quan trọng. Hệ thống phân cấp thông tin cũng giúp cho người đọc thông tin nắm bắt được nội dung theo một mạch chính xác những gì xảy ra trước – những gì xảy ra sau .

Trong phân cấp thông tin chúng ta thường đánh số cho đối tượng – như ordered list (ol tag html). Nhưng đó không phải chúng ta dùng CSS và để các yếu tố không có tính tự tăng (auto increment). Để đáp ứng được những yêu cầu trên chúng ta có thể sẽ phải sử dụng một đoạn code giống như bên dưới này:

Tuyệt vời ! Nó sẽ đáp ứng được những yêu cầu trên, nhưng câu hỏi mà một người dùng sẽ hỏi là: “Tôi không muốn dùng số đếm để đánh thứ tự, tôi muốn dùng bảng chữ cái Alphabets, chữ cái La Mã hoặc Hi Lạp thì bạn sẽ làm như thế nào ???”. Chắc chắn là đoạn code trên không thể làm được điều đó. Thật may mắn, chúng ta có CSS Counters !

Xem thêm trình duyệt hỗ trợ tại đây .

Counter Reset và Counter Increment

Trước khi chúng ta bắt đầu với CSS Counter, bạn nên biết rằng counter liên quan đến 2 điều: resetincrement. Reset là nơi mà chúng ta đặt lại counter hoặc đặt lại điểm bắt đầu mới cho counter. Trong khi đó Increment chính là bộ tăng tự động của counter. Sơ qua như vậy, chúng ta cùng tìm hiểu chi tiết qua code nhé.

Copy đoạn HTML đơn giản này nhé:

Chúng ta set <ul class=”numbered-list”></ul> như là 1 điểm reset tại đây, CSS đơn giản như bên dưới:

Chú ý: counter-name là một tên bất kì mà bạn muốn đặt.

Khi mà chúng ta đã tạo ra điểm reset, việc cần làm là set giá trị tự tăng. Để làm việc này, trong code HTML ta có sử dụng <span class=”numbered-list__counter”></span> . Chỉ cần set CSS như này:

Nhưng để để hiển thị counter increment bên ngoài front-end chúng ta phải sử dụng thuộc tính content cho selector :before:after.

img-counter-1

Thay đổi chỉ số increment

Thuộc tính counter-increment có thể được set giá trị dương hoặc âm để tăng giá trị tại mỗi bước.

Điều này sẽ tăng giá trị tự động tại mỗi bước lên 2.

img-counter-2

Để giá trị này tự động giảm dần ở mỗi step, bạn truyền vào giá trị âm.

img-counter-3

Thay đổi giá trị bắt đầu (counter reset)

Truyền vào 1 giá trị nguyên bất kì sau counter-reset để thay đổi giá trị khởi đầu.

Khi bạn thiết lập giá trị 2 giống như bên trên bạn sẽ nhận được kết quả giống như bên dưới vì counter sẽ bắt đầu từ 3. Bạn cũng nên hiểu rằng giá trị mặc định của counter reset là 0.

img-counter-4

Sử dụng các định dạng counter khác

Trả lời cho câu hỏi ở đầu bài viết, nếu bạn đặc biệt thích sử dụng các định dạng tự tăng khác như bảng chữ cái Alphabets, chữ cái La Mã hoặc Hi Lạp thì bạn chỉ cần thay đoạn code trong style :before content như sau:

Dưới đây là các option của các định dạng: decimal, decimal-leading-zero, lower-roman, upper-roman, lower-greek, lower-latin, upper-latin, armenian, georgian, lower-alpha, upper-alpha.

2 BÌNH LUẬN

ĐỂ LẠI BÌNH LUẬN