6 điểm bởi xguru 2022-04-26 | 1 bình luận | Chia sẻ qua WhatsApp
  • Hiện đã có bản thảo không chính thức, và Chromium dự kiến sẽ bắt đầu tạo prototype
  • Cơ chế liên kết trạng thái của các đối tượng DOM như checkbox/radio button với CSS
html {  
  toggle-root: lightswitch; /* tạo toggle. 0 (vô hiệu hóa, mặc định) và 1 (kích hoạt)  */  
}  
  
button {  
  toggle-trigger: lightswitch; /* toggle khi nhấn nút */  
}  
  
html:toggle(lightswitch) {  
  /* style sẽ được áp dụng khi toggle lightswitch được kích hoạt */  
}  
  • Có thể tạo nhiều toggle. Có thể có nhiều hơn 1 trạng thái kích hoạt, và cũng không nhất thiết phải là giá trị số như 0/1
  • Giá trị mặc định là 0 nhưng có thể override
  • Một phần tử cũng có thể đồng thời là toggle-roottoggle-trigger
  • Thông qua toggle-visibility, có thể hiển thị/ẩn phần tử theo giá trị toggle
  • Có thể nhóm bằng toggle-group (hữu ích cho giao diện tab)

1 bình luận

 
joyfui 2022-04-26

Đã có cách dùng radio button để tạo menu tab chỉ với CSS mà không cần JavaScript, nên nếu cái này xuất hiện thì sẽ còn dễ hơn nữa.