Masa Depan CSS: CSS Toggles

• Saat ini draf tidak resmi sudah dirilis, dan Chromium dijadwalkan mulai membuat prototipe
• Mekanisme yang menghubungkan status objek DOM seperti checkbox/radio button dengan CSS

html {  
  toggle-root: lightswitch; /* 토글 생성. 0 (비활성화, 기본값) 과 1 (활성화)  */  
}  
  
button {  
  toggle-trigger: lightswitch; /* 버튼 클릭시 토글*/  
}  
  
html:toggle(lightswitch) {  
  /* lightswitch 토글이 활성화 되었을 때 적용할 스타일 */  
}  

• Bisa membuat beberapa toggle; dapat memiliki lebih dari satu status aktif, dan nilainya juga tidak harus berupa angka seperti 0/1
• Nilai default adalah 0, tetapi bisa dioverride
• Satu elemen juga bisa menjadi toggle-root sekaligus toggle-trigger
• Melalui toggle-visibility, elemen dapat ditampilkan/disembunyikan sesuai nilai toggle
• Bisa dikelompokkan dengan toggle-group (berguna untuk antarmuka tab)

[joyfui]

Ada cara membuat menu tab hanya dengan CSS tanpa JavaScript menggunakan tombol radio, dan kalau ini hadir sepertinya akan jadi lebih mudah.