한 줄 요약 - Chrome 150 베타에 들어온 CSS 기능 중 실무에 바로 와닿는 두 가지를 소개합니다. 색의 투명도만 따로 떼어 바꾸는 alpha(), 그리고 동영상이 재생 중인지 멈췄는지에 따라 CSS만으로 스타일을 바꾸는 가상클래스예요.
무슨 일이에요?
alpha(--brand / 0.4)처럼 쓰면 기존 브랜드 색의 색감은 그대로 두고 투명도만 40%로 만든 색을 얻습니다. 색 값을 여러 벌 정의하지 않아도 됩니다. 또 video:paused, video:playing 같은 가상클래스로, 자바스크립트 이벤트를 붙이지 않고도 재생 중일 때만 컨트롤 숨기기 같은 걸 CSS로 처리할 수 있어요.
놓치기 쉬운 것
아직 Chrome 150 베타에 들어온 단계라, 지금 당장 모든 사용자 브라우저에서 동작하진 않습니다. 실제 적용할 때는 @supports로 지원 여부를 확인하고 폴백을 두는 게 안전합니다.