크롬에서 hover CSS가 사라질 때, 규칙을 남겨 비교하는 법

마우스를 옮기기 전에 :hover를 고정한다

버튼 위에 마우스를 올렸을 때만 나타나는 색이나 테두리는 Elements → Styles → :hov에서 살펴볼 수 있다. Chrome의 가상 클래스 전환 기능은 실제로 포인터를 올려두지 않아도 선택한 요소에 해당 상태를 적용한다.

1. Elements에서 스타일을 확인할 요소를 선택한다.
2. Styles 탭의 :hov를 누른다.
3. :hover를 체크하고 해당 상태의 규칙과 화면을 확인한다.
4. 체크를 해제해 원래 상태와 비교한다.

예를 들어 버튼의 배경색이 바뀌는 이유를 찾는다면, hover를 켠 상태에서 색을 지정한 선택자와 선언을 먼저 읽는다. 화면의 다른 요소를 가리키려고 포인터를 움직일 때마다 상태가 풀리는 불편을 줄일 수 있다.

이전에 적용된 규칙도 화면에 남길 수 있다

Chrome의 10월 DevTools 업데이트 안내에는 선택한 요소에 전에 매칭됐던 스타일 규칙을, 더 이상 적용되지 않을 때도 계속 표시하는 기능이 포함됐다. Settings → Preferences → Elements에서 Show inactive CSS rules를 켠다. 규칙을 기본으로 접어 둘지는 Collapse non-contributing CSS rules로 조정한다. 두 항목은 DevTools의 Elements 설정에 등록돼 있다.

hover 상태를 유지하는 기능과는 쓰임새가 다르다. :hov는 상태를 재현하고, 새 표시는 상태가 끝나 매칭되지 않는 규칙을 비교 대상으로 남긴다. 클래스를 바꾸거나 hover를 해제한 뒤에도 이전 규칙이 무엇이었는지 추적하려는 작업에 맞는다.

이때 비활성 표시로 남은 선언을 현재 화면의 원인으로 읽어서는 안 된다. 이전에 적용됐다는 정보와 지금 적용된다는 정보는 다르다. 이어서 해당 요소에 현재 적용된 값을 확인해야 한다.

취소선·정보 아이콘·계산값을 나눠 본다

Styles의 표시 규칙은 CSS가 효과를 내지 못하는 이유도 구별한다. 우선순위에서 다른 선언에 밀린 속성에는 취소선이 나타난다. 문법은 맞지만 현재 레이아웃 조건에서 효과가 없는 속성은 흐린 글씨와 정보 아이콘으로 표시된다.

가령 display: block인 요소에 justify-content를 적었다면, 선택자 우선순위를 높이는 것만으로 해결되지 않는다. 정보 아이콘의 설명을 읽으면 현재 속성 조합에서 무엇이 맞지 않는지 알 수 있다. 이는 과거에 매칭됐던 규칙을 남겨두는 새 기능과도 구별해야 한다.

Computed에서는 브라우저가 계산한 속성값과 그 출처를 확인할 수 있다. 버튼 색 문제라면 background-color를 찾아 펼치고 어떤 선언에서 왔는지 따라간다. 이전 규칙은 변화의 단서로, Computed는 현재 결과를 판단하는 기준으로 쓰는 순서다.

메뉴 자체가 닫히면 포커스나 JavaScript 동작을 살핀다

DevTools를 클릭하는 순간 메뉴·날짜 선택기가 사라진다면 CSS 규칙 표시만으로 해결되지 않을 수 있다. Emulate a focused page는 페이지가 포커스를 잃으면 숨는 요소를 조사하는 기능이다. Elements → Styles → :hov에서 이 옵션을 켜고 해당 요소를 선택한다.

JavaScript 실행으로 화면이 바뀌는 경우에는 Chrome의 사라지는 요소 디버깅 안내가 제시하는 중단점 같은 방법이 필요하다. hover CSS를 고정하는 일, 이전 규칙을 남기는 일, 실행 중인 코드를 멈추는 일은 각각 다른 문제에 쓰인다. 먼저 사라진 것이 스타일 규칙인지 요소 자체인지 구분하면 필요한 도구를 좁힐 수 있다.