CSSの未来 : CSS Toggles

• 現在、非公式ドラフトが公開されており、Chromium がプロトタイピングを開始する予定
• チェックボックス/ラジオボタンのような DOM オブジェクトの状態と CSS を結び付けるメカニズム

html {  
  toggle-root: lightswitch; /* トグルを作成。0（無効、デフォルト値）と 1（有効） */  
}  
  
button {  
  toggle-trigger: lightswitch; /* ボタンクリック時にトグル */  
}  
  
html:toggle(lightswitch) {  
  /* lightswitch トグルが有効になったときに適用するスタイル */  
}  

• 複数のトグルを作成可能。1つ以上の有効状態を持つことができ、必ずしも 0/1 のような数値である必要はない
• デフォルト値は 0 だがオーバーライド可能
• 1つの要素が toggle-root であり toggle-trigger でもあることが可能
• toggle-visibility により、トグル値に応じて要素の表示/非表示が可能
• toggle-group によるグループ化が可能（タブインターフェースに有用）

[joyfui]

ラジオボタンを使ってJavaScriptなしでCSSだけでタブメニューを作る方法がありますが、これができればもっと簡単になりそうですね。