CSS의 미래 : CSS Toggles
(bram.us)- 현재 비공식 초안이 나왔고, 크로미엄이 프로토타이핑 시작 예정
- 체크박스/라디오 버튼 같은 DOM 객체의 상태와 CSS를 연결하는 메커니즘
html {
toggle-root: lightswitch; /* 토글 생성. 0 (비활성화, 기본값) 과 1 (활성화) */
}
button {
toggle-trigger: lightswitch; /* 버튼 클릭시 토글*/
}
html:toggle(lightswitch) {
/* lightswitch 토글이 활성화 되었을 때 적용할 스타일 */
}
- 여러개의 토글 생성가능. 1개 이상의 활성화 상태를 가질 수 있고, 꼭 0/1 같은 숫자값이 아니어도 됨
- 기본값은 0 이지만 오버라이드 가능
- 한 엘리먼트가 toggle-root 이자 toggle-trigger 인 것도 가능
- toggle-visibility 를 통해서 토글 값에 따라 엘리먼트 보이기/숨기기 가능
- toggle-group 으로 그룹핑 가능(탭 인터페이스에 유용)