อนาคตของ CSS: CSS Toggles

• ตอนนี้มีร่างฉบับไม่เป็นทางการออกมาแล้ว และ Chromium มีแผนจะเริ่มทำต้นแบบ
• กลไกที่เชื่อมสถานะของอ็อบเจ็กต์ DOM เช่น checkbox/radio button เข้ากับ CSS

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

• สามารถสร้างท็อกเกิลได้หลายตัว มีสถานะที่เปิดใช้งานได้มากกว่าหนึ่งค่า และไม่จำเป็นต้องเป็นค่าตัวเลขอย่าง 0/1 เสมอไป
• ค่าเริ่มต้นคือ 0 แต่สามารถ override ได้
• อิลิเมนต์หนึ่งตัวสามารถเป็นได้ทั้ง toggle-root และ toggle-trigger
• ใช้ toggle-visibility เพื่อแสดง/ซ่อนอิลิเมนต์ตามค่าของท็อกเกิลได้
• สามารถจัดกลุ่มด้วย toggle-group ได้ (มีประโยชน์กับอินเทอร์เฟซแบบแท็บ)

[joyfui]

มีวิธีสร้างเมนูแท็บด้วยปุ่มตัวเลือกโดยใช้แค่ CSS โดยไม่ต้องพึ่ง JavaScript อยู่แล้ว แต่ถ้ามีสิ่งนี้ขึ้นมาก็น่าจะทำได้ง่ายขึ้นอีกนะครับ