Lập trình web

Đếm phần tử bằng CSS

Chia sẻ nhanh

Nghiên cứu sâu hơn trong CSS bạn sẽ tìm thấy chức năng CSS counters. Nếu như một phần tử được xác định CSS cho phép bạn đếm phần tử đó hiển thị trên webpage bằng cách tăng giá trị xuất hiện của nó khi xuất hiện.



Cách này rất hữu ích nếu bạn đang làm một danh sách hướng dẫn theo từng bước hoặc bất cứ loại trình bày nào nếu bạn muốn đánh số thứ tự. CSS counters có thể giúp bạn bằng cách làm điều đó tự động, thậm chí bạn có thể sử dụng để đếm các hình ảnh trên page và thêm số thứ tự cho nó trước khi chú thích

Trong ví dụ này tôi sẽ hướng dẫn bạn tạo một danh sách công thức đơn giản cho bánh và CSS sẽ tự động tìm kiếm điểm bắt đầu cuả mỗi bước và thêm số lượng vào trước nó

//HTML

<section>
<p>Place the flour in a large bowl, make a well in the centre and pour in the milk and eggs. Give the liquid mixture a quick whisk before incorporating the flour. Continue to whisk until you have a smooth batter.</p>
<p> Now add 1 tbsp vegetable oil and whisk thoroughly.</p>
<p>Take a crêpe pan, or large frying pan, dip some kitchen roll in the oil and carefully wipe the inside of the pan. Heat the pan over a medium heat for one minute.</p>
<p>Add just under a ladleful of batter to the pan and immediately start swirling it around the pan to produce a nice even layer.</p>
<p>Cook the pancake for approximately 30-40 seconds. Use a palette knife to lift the pancake carefully to look at the underside to check it is golden-brown before turning over. Cook the other side for approx 30-40 seconds and transfer to a serving plate.</p>
</section>

//CSS
CSS counters sử dụng giá trị tăng dần đều. Muốn sử dụng đúng các đoạn counters, đầu tiên ta phải thiết lập lại giá trị mặc định là 0 trước khi đếm bất cứ phần tử nào trên trang. Vì vậy ta đặt thuộc tính reset ngay tại thẻ body với mục đích tránh khai báo nhiều lần:

body {
counter-reset: steps;  
}

p:before {
counter-increment: steps;
content: "Step " counter(steps) ": ";
}
p {
color: #242424;
font-family: arial, sans-serif;
font-size: 16px;
line-height: 20px;
}

p:before {
counter-increment: steps;
content: "Step " counter(steps) ": ";
font-weight: bold;
font-size: 18px;
}

Nếu bạn muốn nắm rõ hơn, bạn có thể xem ví dụ về các bước tạo ra 1 cái bánh

Trình duyệt hỗ trợ
Vì đây là một thuộc tính của CSS 2.1 nên việc các trình duyệt hỗ trợ là rất tốt. Chỉ có duy nhất trình duyệt không hỗ trợ là IE7. Và theo thống kê của chúng tôi, số người dùng IE7 là 0,61% và theo thông báo chính thức của Microsoft là IE7 đã chính thức bị khai tử. Vậy nên đối với CSS Counters là một sự lựa chọn tốt cho các trình duyệt hiện tại.

Bình luận

TOP

Bạn đã sẵn sàng chuyển ý tưởng tuyệt vời
của bạn thành hiện thực?