Tính toán và hiển thị giá giảm ngay trong CSS: Không cần JavaScript hay Server
Bạn có tin CSS có thể tự tính toán giá khuyến mãi và hiển thị giá mới chỉ từ dữ liệu thuộc tính HTML? Hãy tìm hiểu sức mạnh của hàm attr() nâng cao và các hàm toán học hiện đại trong CSS.
Cuộc cách mạng của các hàm toán học trong CSS
Trước đây, mọi việc tính toán con số phức tạp trên giao diện web thường phải nhờ đến JavaScript hoặc xử lý từ phía Server. Tuy nhiên, với sự phát triển của CSS hiện đại, chúng ta có thể thực hiện các phép tính trực tiếp ngay tại trình duyệt của người dùng. Điều này không chỉ giúp giảm độ trễ (latency) mà còn tiết kiệm tài nguyên trình duyệt đáng kể, đặc biệt hữu ích cho các trang thương mại điện tử cần hiển thị giá ưu đãi theo thời gian thực.
Khai thác sức mạnh của hàm attr() nâng cao
Điểm mấu chốt của kỹ thuật này nằm ở phiên bản nâng cấp của hàm attr(). Thay vì chỉ trả về giá trị chuỗi (string) để dùng cho thuộc tính 'content' như trước, hàm attr() mới cho phép chúng ta ép kiểu dữ liệu về dạng số (number) hoặc màu sắc. Ví dụ, bạn có thể lưu trữ giá gốc và phần trăm giảm giá trong các thuộc tính 'data-price' và 'data-discount' của HTML, sau đó dùng CSS để truy xuất chúng như những biến số thực thụ trong một phép toán.
Xử lý số thập phân và hiển thị giá mới
Thử thách lớn nhất là CSS Counter mặc định không hỗ trợ số thập phân. Để giải quyết, chúng ta sử dụng các hàm toán học như round() để lấy phần nguyên (đô la) và mod() để tách phần lẻ (cent). Sau đó, kết hợp chúng lại bằng CSS Pseudo-elements. Dù một số trình duyệt đang trong quá trình cập nhật hỗ trợ đầy đủ cho việc ép kiểu dữ liệu trong attr(), nhưng đây chắc chắn là hướng đi của tương lai giúp code Frontend sạch và nhẹ nhàng hơn.
Tại Việt Nam, nơi các chương trình khuyến mãi 'Flash Sale' diễn ra liên tục, việc áp dụng những kỹ thuật CSS thuần túy như thế này sẽ giúp trải nghiệm người dùng mượt mà hơn, tránh được tình trạng giá bị giật hoặc hiển thị chậm do thực thi JavaScript quá nặng.