CSS đang có bộ tạo số ngẫu nhiên gốc đầu tiên với hàm random() mới, hiện đang có sẵn trong Safari Technology Preview . Mặc dù điều này mang lại những khả năng thú vị để tạo ra các hiệu ứng hình ảnh động mà không cần JavaScript , cộng đồng lập trình viên đang đặt ra những câu hỏi quan trọng về bảo mật, hiệu suất và ứng dụng thực tế.
Hỗ trợ trình duyệt hiện tại
- Safari Technology Preview : Được hỗ trợ (thử nghiệm)
- Chrome : Không được hỗ trợ
- Firefox : Không được hỗ trợ
- Edge : Không được hỗ trợ
- Trạng thái: Chưa có trình duyệt nào triển khai cho người dùng theo mặc định
- Đặc tả kỹ thuật: CSS Values and Units Module Level 5 (bản nháp)
 |
|---|
Khám phá hàm random() mới thú vị trong CSS để tạo kiểu động |
Lo ngại về lỗ hổng bảo mật từ các lập trình viên
Cuộc thảo luận sôi nổi nhất tập trung vào những rủi ro bảo mật tiềm ẩn. Các lập trình viên lo ngại rằng mọi người có thể lạm dụng tính năng tạo kiểu này cho các ứng dụng nhạy cảm về bảo mật, tương tự như cách các hàm ngẫu nhiên phi mật mã khác đã bị sử dụng không đúng mục đích trong quá khứ. Lo ngại là có người có thể cố gắng triển khai tạo mật khẩu hoặc các giao thức bảo mật khác bằng CSS , điều này có thể tạo ra những lỗ hổng nghiêm trọng.
Nếu bạn triển khai các giao thức bảo mật trong ứng dụng sản xuất bằng CSS thì bạn xứng đáng bị hack và sau đó bị kiện vì sơ suất.
Tuy nhiên, những người khác lập luận rằng việc mong đợi bảo mật mật mã từ một hàm stylesheet là không hợp lý. Cuộc tranh luận làm nổi bật một thách thức rộng lớn hơn trong phát triển web: làm thế nào để ngăn chặn việc lạm dụng các công cụ trong khi vẫn giữ chúng đơn giản và tập trung vào mục đích dự định.
Câu hỏi về hiệu suất và các phương pháp thay thế
Các thành viên cộng đồng cũng đang thảo luận về tác động hiệu suất và các giải pháp thay thế hiện có. Một số lập trình viên chỉ ra nguyên lý cicada - một kỹ thuật thông minh sử dụng các mẫu số nguyên tố để tạo ra các hiệu ứng hình ảnh giả ngẫu nhiên có thể dự đoán được và hiệu suất cao hơn so với tính ngẫu nhiên thực sự.
Nguyên lý cicada sử dụng nhiều mẫu chồng lấp với các kích thước số nguyên tố khác nhau để tạo ra vẻ ngoài ngẫu nhiên mà không thực sự tạo ra các số ngẫu nhiên.
Những người khác lưu ý rằng họ hiện đang đạt được các hiệu ứng tương tự bằng cách thiết lập các thuộc tính tùy chỉnh CSS với JavaScript , khiến hàm mới này trở thành một bổ sung đáng hoan nghênh giúp giảm sự phụ thuộc vào JavaScript .
 |
|---|
Tạo hiệu ứng thị giác động bằng hàm random() mới của CSS |
Ứng dụng thực tế hạn chế
Một số lập trình viên đặt câu hỏi liệu hàm random() có giải quyết được nhu cầu kinh doanh thực sự hay không. Các ví dụ được trình bày - trường sao, chồng ảnh và bánh xe may mắn - có vẻ giống như các minh họa hơn là các ứng dụng thực tế cho công việc phát triển web thông thường.
Hàm này sử dụng cú pháp đơn giản: random(min, max, step) trong đó bạn xác định phạm vi và kích thước bước tùy chọn. Ví dụ, random(0, 100) tạo ra các số từ 0 đến 100, trong khi random(0turn, 1turn, .25turn) tạo ra các giá trị xoay theo bước một phần tư vòng.
Cú pháp hàm random() trong CSS
- Mẫu cơ bản:
random(min, max, step) - Tất cả các tham số phải sử dụng cùng loại số (số nguyên, phần trăm, độ dài, góc)
- Tham số step là tùy chọn
- Ví dụ:
random(0, 100)- số nguyên từ 0 đến 100random(0turn, 1turn, .25turn)- xoay theo bước một phần tư vòng
 |
|---|
Minh họa các ứng dụng tiềm năng của hàm random() trong CSS với thiết kế vòng quay |
Hỗ trợ trình duyệt và trạng thái đặc tả
Hiện tại, chỉ có Safari Technology Preview hỗ trợ tính năng này, và không có trình duyệt nào đã phát hành nó cho người dùng theo mặc định. CSS Working Group vẫn đang thảo luận về đặc tả, với một số vấn đề mở về việc liệu cách tiếp cận này có phục vụ tốt nhất nhu cầu của lập trình viên hay không.
Đội ngũ WebKit đang tích cực tìm kiếm phản hồi từ các lập trình viên thử nghiệm tính năng này, vì đầu vào từ cộng đồng sẽ ảnh hưởng trực tiếp đến việc triển khai cuối cùng. Điều này đại diện cho một cơ hội để các lập trình viên định hình cách CSS phát triển.
Mặc dù hàm random() mở ra những khả năng sáng tạo mới cho việc tạo kiểu web, các cuộc thảo luận cộng đồng tiết lộ những cân nhắc quan trọng về bảo mật, hiệu suất và tiện ích thực tế có thể sẽ ảnh hưởng đến hình thức cuối cùng và việc áp dụng của nó.
Tham khảo: Rolling the Dice with CSS random()