[CSS]#17 will-change, :focus- within(CSS pseudo-class)

will-change(불안정한 animation*사용 시 같이 사용): 기본적으로 브라우저에게 뭔가가 바뀔 것이라고 말해주는 것

(브라우저에게 렌더링 힌트를 주고 element에 실행되길 기대하는 변화를 명시함

+부가설명: will-change는 그래픽카드를 이용해서 애니메이션을 가속화한다.)

이 속성을 쓰면 브라우저가 애니메이션을 더 괜찮게 만들어준다. 왜냐면 이게 바뀔 거라는 것을 알고 있기 때문이다.

 

*불안정한 animation이란? 어떤 요소에 keyframe을 걸어서 애니메이션 효과를 추가했는데 그 모습이 흔들린다거나 불안정적인 형상을 띄는 animation효과를 지칭합니다.

e.g.)

will-change속성의 값을 transform으로 줬습니다.

기존의 animation "heartBeat"는 will-change속성이 없을 시, scale값에 따라 1.5배로 transform하는데 흔들리는 등 불안정적인 모습을 보였습니다. 이를 해결하기 위해 will-change의 값을 transform을 줌으로써 브라우저상의 불안정적인 animation효과를 고쳤습니다. will-change는 정상적으로 작동하는 animation에는 따로 기입하지 않아도 됩니다.

 

---

:focus- within(CSS pseudo-class) 

The :focus-within CSS pseudo-class matches an element if the element or any of its descendants are focused. In other words, it represents an element that is itself matched by the :focus pseudo-class or has a descendant that is matched by :focus. (This includes descendants in shadow trees.)

-> 콘테이너 엘리멘트의 내부적으로 focus된 element가 있는지 알 수 있도록 도와주는 property

 

이 선택자는 다음과 같은 예제로 사용될 때 유용합니다 예를 들어, 유저가 form태그 안의 input필드에 마우스를 올렸을 때(focus상태)form 콘테이너 전체를 하이라이팅할 수 있습니다. 

->form태그와 같이 잘 사용될 거 같네요.

 

*사용예시*

/* Selects a <div> when one of its descendants is focused */

div:focus-within {

background: cyan;

}

:focus-within은 조건문처럼 봐도 될 거 같습니다. 위의 예시 코드를 해석하면 

만일 div내부 요소가 focused된다면, 배경색을 cyan으로 바꿔줘라는 의미가 됩니다.

 

ref: https://developer.mozilla.org/en-US/docs/Web/CSS/:focus-within

:focus-within - CSS: Cascading Style Sheets | MDN

 

*또 다른 예시*

focus-within예시

만일 reply의 내부요소에 focus가 된다면, reply___column의 첫번째 요소를 안보이게 해줘! 라는 의미입니다.

(참고로 display: none -> opcity:0, visibility: hidden;으로 하는 것이 더 나아보입니다.)

앞에있는 focus-within이  true이면 뒤의 element에 해당 CSS를 적용해줘 라는 말과 같습니다.