인풋[type="checkbox"]과 인풋[type="radio"]을 남용해 JS의 출전 기회를 줄여보자.

본문은 《CSS Advent Calendar 2016 - Qiita》 21일째의 문장이다.
아무래도 다들'내가 생각했던 오늘의 디자인'에 대해 얘기하는 것 같지만, 여기서는 분위기를 보지 않고 작은 단락을 쓴다.
전혀 상관없습니다.
"및"morishitter의 CSS 쓰기 (2016년 여름) -morishitter 블로그"입니다.

TL;DR

:checked 아날로그 클래스와 형제 선택기~를 이용하여...

JS를 쓰지 않고'상태(on/off의 2값)의 스타일 전환'

가능

label 요소 및 input[type="checkbox"] 또는 input[type="radio"]를 활용하는 경우

JS를 쓰지 않고'어떤 요소를 클릭한 후 상태(ON/OFF의 2값) 변화'

를 실현할 수 있음

샘플: Pure-CSS의 TODO 목록

작업 완료 상태를 전환하고 작업을 선택할 수 있습니다. (CSS가 오래 지속되지 않을 수도 있습니다.)
Clean and Unbreakable CSS // Speaker Deck

표시는 이런 느낌입니다.

// completeId, selectId, taskは変数
li.TaskList__item
  input.TaskList__item-complete(type="checkbox" id=completeId)
  input.TaskList__item-select(type="radio" name="TaskList__item-select" id=selectId)

  label.TaskList__item-icon(for=completeId)
  label.TaskList__item-body(for=selectId) #{task}

이루어지다

이후의 애완동물에 대해서는 무관한 부분은 생략하였다.

// display: noneになってる
input.TaskList__item-complete(type="checkbox" id=completeId)

// 見えてるチェックボックスはlabelの::before疑似要素
// forでcheckboxのidを指定しているので，これをクリックするとcheckboxの状態も変わる
label.TaskList__item-icon(for=completeId)
.TaskList__item-body #{task}

/*
 * チェックボックスの枠
 */
.TaskList__item-icon::before {
  font-family: "FontAwesome";
  content: "";
  display: block;
  border: 1px solid #444;
  border-radius: 4px;
  margin: calc(2 * var(--spacing)) var(--spacing);
  width: var(--TaskList__item-icon-size);
  height: var(--TaskList__item-icon-size);
  line-height: var(--TaskList__item-icon-size);
  cursor: pointer;  
}

/*
 * チェックボックスの中身
 * FontAwesomeの`fa-check`
 * 「チェックが入ったチェックボックスと同じ階層にある.TaskList__item-iconの::before疑似要素」にチェックマークを入れる
 */
.TaskList__item-complete:checked ~ .TaskList__item-icon::before {
  content: "\f00c";
}

/*
 * 「チェックが入ったチェックボックスと同じ階層にある.TaskList__item-body」に取り消し線を入れる
 */
.TaskList__item-complete:checked ~ .TaskList__item-body {
  text-decoration: line-through;
}

임무 선택도 마찬가지다.

실용성을 위해서...

JS에서 지원하는 기능은 다음과 같습니다.

checkbox/radio의 checked 속성에 반영된 지속적인 작업의 상태

체크박스/radio의change 이벤트를 줍고 웹 API

를 두드리기

퓨어 CSS 뭐가 그렇게 좋아요?

단순한 즐거움일 뿐이다.
JS로서 속성과 이벤트만 보면 되고 외관 따위는 모두 CSS에 동그라미를 칠 수 있다.
흔한 클릭 이벤트를 주워서checked...이런 건 안 써도 돼, 장면 말.
두 가지 상태(on/off,open/close,complete/incomplete/running/stoopped,etc.)만 선택할 수 있다면 잡색 스타일로 바꾸려면 이용 가치가 있을 수 있습니다.
미묘한 시험이 어려워지고 부질없이 상세도를 높인다는 표현 등 단점이 있으니 남용하지 않는 게 좋다.

다른 건요?

Pure CSS TODO list | CodePen 또는

끝말

CSS에는 CSS만 햄버거 메뉴를 만드는 녀석, attr() 등 사용하기 어려운 기능도 있으니 악용하여 유쾌하게 CSS를 쓰세요.
한가할 때 스타일북을 보면 새로운 발견이 있을지도 모른다.
개인적으로 기대가 큽니다CSS 카운터.