# 미래의 CSS: State Container Queries

> Clean Markdown view of GeekNews topic #9566. Use the original source for factual precision when an external source URL is present.

## Metadata

- GeekNews HTML: [https://news.hada.io/topic?id=9566](https://news.hada.io/topic?id=9566)
- GeekNews Markdown: [https://news.hada.io/topic/9566.md](https://news.hada.io/topic/9566.md)
- Type: news
- Author: [xguru](https://news.hada.io/@xguru)
- Published: 2023-07-01T10:17:02+09:00
- Updated: 2023-07-01T10:17:02+09:00
- Original source: [ishadeed.com](https://ishadeed.com/article/css-state-queries/)
- Points: 11
- Comments: 3

## Topic Body

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

## Comments



### Comment 16898

- Author: alstjr7375
- Created: 2023-07-02T05:42:27+09:00
- Points: 2

[CSS toggle](https://news.hada.io/topic?id=6440)도 그렇고 점점 "저는 CSS로 프로그래밍해요"가 가능한 날이 오고 있는듯한..

### Comment 16907

- Author: xguru
- Created: 2023-07-02T10:14:27+09:00
- Points: 3
- Parent comment: 16898
- Depth: 1

https://github.com/kkuchta/css-only-chat  
  
이런 것도 있었죠.. CSS로만 구현한 채팅

### Comment 16908

- Author: alstjr7375
- Created: 2023-07-02T10:45:25+09:00
- Points: 1
- Parent comment: 16907
- Depth: 2

대단하네요 ㄷㄷㄷㄷㄷ