한 줄 요약 - 최근 3주 사이 브라우저들이 나란히 따라오면서 Baseline(주요 브라우저가 모두 지원해 안심하고 쓸 수 있는 상태)에 합류했거나 새로 들어온 웹표준 기능을 모았습니다. 공통 주제는 예전엔 자바스크립트로 메우던 일을 브라우저가 직접 해준다는 것.
1. CSS :open 가상클래스 - 열림 상태를 한 줄로
details, dialog, select, 그리고 날짜/색상 피커처럼 열고 닫히는 요소가 지금 열려 있는지를 CSS :open 하나로 잡습니다. 예전엔 details만 [open] 속성으로 잡혔고 dialog는 JS로 클래스를 토글해야 했으며 select 드롭다운이 펼쳐진 순간은 CSS로 잡을 방법이 없었어요. 이제 :open 하나로 통일됩니다. 아래 관련 데모에서 직접 만져볼 수 있어요. (Chrome 148 / Firefox 151 / Safari 26.5)
2. 이름만으로 쓰는 컨테이너 쿼리
컨테이너 쿼리(부모 요소의 크기에 따라 자식 스타일을 바꾸는 기능)를 쓸 때 예전엔 container-name과 container-type을 둘 다 지정해야 했는데, 이제 이름만으로도 동작합니다. 설정이 줄어 카드/위젯 컴포넌트를 더 가볍게 반응형으로 만들 수 있어요.
3. Document Picture-in-Picture (Firefox 151)
영상 PiP는 익숙하지만, Document PiP는 임의의 HTML을 담는 떠 있는 창을 만들 수 있습니다. 음악 플레이어, 타이머, 메모 위젯처럼 작업 중 항상 보이게 띄우고 싶은 UI에 어울립니다.
4. video/audio의 lazy 로딩 (Chrome 148)
이미지에만 있던 loading=lazy 가 video와 audio 로 확장됐습니다. 뷰포트(화면에 보이는 영역) 근처에 와야 미디어를 불러오므로, 미디어가 많은 페이지의 초기 로딩이 가벼워집니다.
지금 써도 되나
대부분 최신 Chrome/Firefox/Safari에서 막 합류한 기능들입니다. 새 기능은 @supports 로 지원 여부를 확인하고 폴백을 같이 두는 습관이 안전해요. 예를 들어 :open 은 @supports selector(:open) 로 감싸고, 안 되는 브라우저에는 details의 [open] 폴백을 둡니다.