11P by xguru 2023-07-01 | favorite | 댓글 3개
  • 크로미움 팀이 새로운 타입의 쿼리를 실험중
  • 작년엔 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)

CSS toggle도 그렇고 점점 "저는 CSS로 프로그래밍해요"가 가능한 날이 오고 있는듯한..

https://github.com/kkuchta/css-only-chat

이런 것도 있었죠.. CSS로만 구현한 채팅

대단하네요 ㄷㄷㄷㄷㄷ