미래의 CSS: State Container Queries
(ishadeed.com)- 크로미움 팀이 새로운 타입의 쿼리를 실험중
- 작년엔 Size Container Query가 메이저 브라우저들에서 모두 지원 시작
- 컨테이너의 너비 기준으로 쿼리 가능
- 여기에 추가로 이제 Style 쿼리도 가능 : 특정 CSS 변수가 있는지 확인. 아직 크롬 카나리에서만 가능
- State 쿼리는 상태값에 따른 쿼리
-
position: sticky등의 상태가 활성화 되어있는지를 확인 가능하며,@container state(stuck: top)이 처럼 방향에 따라 별도의 스타일 지정 -
flex-wrap이 되었는지도 '@container header state(wrap: true)` 처럼 확인 - 문서의 방향
ltrrtl여부에 따라서도 처리 가능@container state(dir: rtl)
-