한 줄 요약: 라이트/다크마다 :root 변수를 @media (prefers-color-scheme: dark)에 통째로 복붙하면 토큰 표가 두 벌이 되고 AI가 한쪽만 고친다. CSS light-dark(light, dark) 는 한 속성에서 두 값을 넘기고, 문서/color-scheme이 고른 쪽에 맞춰 고른다. color-mix·relative color(#163)·:has(#148)·Container Queries(#143)·prefers-reduced-motion(#108)·field-sizing(#169)과 겹치지 않게, 이번엔 라이트/다크 한 줄 선택만 판다.버전 가정: CSS Color Module의 light-dark(). 사용 전제: 루트(또는 해당 요소)에 color-scheme: l..

한 줄 요약: 댓글·프롬프트 박스마다 scrollHeight를 읽어 style.height를 때리는 autosize 훅은 접근성·IME·SSR에서 새는 지점이 많다. 모던 엔진의 field-sizing: content 로 필드가 콘텐츠만큼 커지게 두는 것이 계약이다. text-wrap(#155)·color-mix(#163)·scroll-snap(#159)·:has(#148)·Anchor(#139)와 겹치지 않게, 이번엔 폼 컨트롤 자동 크기만 판다.버전 가정: CSS UI field-sizing (content | fixed). Chromium 계열 중심으로 실무 도입 — 지원 표는 배포 주 mid-2026+ 기준으로 팀 caniuse/MDN을 재확인. 미지원 브라우저는 fixed(기본 감각)로 두고 J..

한 줄 요약: 라이트/다크·호버·disabled마다 hex를 복붙하면 토큰 표가 폭발하고 AI가 인접 색을 틀린다. CSS color-mix() 와 relative color 문법(oklch(from …), hsl(from …) 등)으로 브랜드 베이스에서 파생하는 것이 계약이다. :has(#148)·Container Queries(#143)·text-wrap(#155)·light-dark()(별도)·Anchor(#139)와 겹치지 않게, 이번엔 색 파생·토큰만 판다.버전 가정: 모던 Chromium/Safari/Firefox의 color-mix() · CSS Color Module Level 5 relative color. 코드는 최소 골격. 디자인 시스템 전체 마이그레이션·Figma 플러그인·IE po..

한 줄 요약: 카드 캐러셀을 pointermove·라이브러리로만 만들면 접근성·트랙패드·키보드·iOS 모멘텀이 한꺼번에 깨진다. CSS scroll-snap-type / scroll-snap-align 과 고정 헤더 보정 scroll-margin 이 그 계약이다. scroll-driven animations(#135)·Container Queries(#143)·:has(#148)·scrollbar-gutter(#116)·View Transitions(#127)과 겹치지 않게, 이번엔 스냅 스크롤·마진 오프셋만 판다.버전 가정: 모던 Chromium/Safari/Firefox의 CSS Scroll Snap · scroll-margin / scroll-padding. 코드는 최소 골격. 풀터치 드래그 SDK..

한 줄 요약: 카드 제목이 두 줄일 때 맨 아래 한 글자·짧은 막줄이 남거나, 본문에서 orphan이 거슬린다고 · ·측정용 JS를 심으면 반응형·i18n·접근성이 한꺼번에 깨진다. CSS text-wrap: balance(짧은 블록 균형)와 pretty(본문 품질 우선)가 그 계약이다. :has(#148)·Container Queries(#143)·Anchor(#139)·View Transitions(#127)·prefers-reduced-motion(#108)·:focus-visible(#131)과 겹치지 않게, 이번엔 소프트 줄바꿈 힌트만 판다.버전 가정: 모던 Chromium/Safari/Firefox의 text-wrap shorthand(wrap / nowrap / balance / p..

한 줄 요약: “카드 선택·폼 에러·토글 열림”마다 부모에 is-active 클래스를 JS로 토글하면 상태 소스·스타일·접근성이 세 갈래로 샌다. CSS :has() 로 자손/형제 조건에 따라 조상·형제를 스타일하면, 많은 UI를 HTML 상태만으로 닫을 수 있다. Anchor(#139)·Container Queries(#143)·:focus-visible(#131)·Popover(#123)와 겹치지 않게, 이번엔 부모 셀렉터 계약만 판다.버전 가정: 모던 Chromium/Safari/Firefox의 :has() · 실용 패턴(:has(:checked), :has(:invalid), :has([open])). 코드는 최소 골격. 구형 WebView polyfill·전체 디자인 시스템 이전은 범위 밖.교차..

한 줄 요약: 그리드 안 카드·사이드바 위젯을 @media (min-width: …)만으로 짜면 뷰포트는 넓은데 카드 칸은 좁은 레이아웃에서 타이포·열이 무너진다. CSS Container Queries(container-type / container-name / @container)는 조상 컨테이너 크기에 반응한다. Anchor Positioning(#139)·scroll-driven(#135)·View Transitions(#127)·content-visibility(#112)·:focus-visible(#131)와 겹치지 않게, 이번엔 컴포넌트 단위 크기 쿼리만 판다.버전 가정: CSS Containment · Size Container Queries · 작성일 2026-09-24. 주요 브라우저에..

한 줄 요약: 툴팁·드롭다운·커스텀 메뉴를 getBoundingClientRect+position: fixed+리사이즈/스크롤 리스너로 붙이면 스크롤 컨테이너·zoom·가상키보드에서 좌표가 어긋나고 INP(#97)도 흔들린다. CSS Anchor Positioning(anchor-name / position-anchor / position-area 등)은 앵커 요소에 상대 배치를 선언적으로 푼다. Popover API(#123)가 “띄우기”를 맡긴다면, 이번엔 좌표·폴백 계약만 판다. scroll-driven(#135)·View Transitions(#127)·:focus-visible(#131)·focus outline·scrollbar-gutter(#116)와 겹치지 않게.버전 가정: CSS Anch..

한 줄 요약: 수천 행 테이블·문서형 페이지에서 오프스크린 블록까지 전부 레이아웃·페인트하면 스크롤이 무거워진다. CSS content-visibility: auto 로 뷰포트 밖 서브트리를 건너뛰고, contain-intrinsic-size 로 스크롤바 점프를 줄인다. INP(#97)·prefers-reduced-motion(#108)·next/image(#53)·useDeferredValue(#95)·가상 스크롤 라이브러리와 겹치지 않게, 이번엔 CSS 렌더 스킵만 판다.버전 가정: CSS Containment Level 2 content-visibility(작성 2026-09-21). 지원 범위·접근성 이슈는 caniuse·팀 브라우저 매트릭스를 따르고, 이 글에서 “전 브라우저 완전 지원”을 단정..

한 줄 요약: OS/브라우저에서 동작 줄이기(reduced motion) 를 켠 사용자에게 큰 패럴랙스·자동 캐러셀·진입 애니메이션을 그대로 보여주면 어지럼·집중 방해가 된다. CSS @media (prefers-reduced-motion: reduce) 와 JS matchMedia('(prefers-reduced-motion: reduce)') 로 필수 아님 움직임은 중지·대체, 필수 피드백은 투명도·짧은 크로스페이드 등으로 남긴다. INP(#97)·next/font CLS(#93)·image LCP(#53)·Flutter Semantics(#73)·useSyncExternalStore(#99)와 겹치지 않게, 이번엔 모션 선호 접근성만 판다.버전 가정: CSS Media Queries · WCAG 2..