modern-css

SKILL.md

Pure native CSS for building interfaces — no preprocessors, no frameworks.

| CSS Grid, Subgrid, Flexbox | @function, if() (Chrome-only) | | Container Queries (size + style) | Customizable (Chrome-only) | | :has(), :is(), :where() | Scroll-state queries (Chrome-only) | | CSS Nesting, @layer, @scope | sibling-index(), sibling-count() | | @property (typed custom props) | ::scroll-button(), ::scroll-marker |

| oklch(), color-mix(), light-dark() | Typed attr() beyond content | | Relative color syntax | field-sizing: content | | @starting-style, transition-behavior | interpolate-size (Chrome-only) | | Scroll-driven animations | Grid Lanes / masonry (experimental) | | Anchor positioning, Popover API | random() (Safari TP only) |

디자인 시스템, 구성 요소 라이브러리 또는 프런트엔드 애플리케이션을 만들 때 사전에 적용하세요. CSS 그리드, 서브그리드, Flexbox, 컨테이너 쿼리, :has(), @layer, @scope, CSS 중첩, @property, @function, if(), oklch, 색상 혼합, 밝은-어두움, 상대 색상, @starting-style, 스크롤 기반 애니메이션, 보기 전환, 앵커 위치 지정, 팝오버, 사용자 정의 가능한 선택, 콘텐츠 가시성, 논리적 속성, 텍스트 줄바꿈, 보간 크기, 클램프, 필드 크기 조정, 최신 CSS, CSS 아키텍처, 반응형 디자인, 다크 모드, 테마, 디자인 토큰, 캐스케이드 레이어. 웹 프로젝트용 CSS 작성, 레이아웃 접근 방식 선택, 반응형 구성 요소 구축, 다크 모드 또는 테마 구현, 애니메이션 또는 전환 생성, 양식 요소 스타일 지정, 레거시 스타일시트 현대화 등의 작업에 사용하세요. 순수 네이티브 CSS로 인터페이스를 구축하기 위한 최신 CSS 기능과 모범 사례입니다. 출처: ccheney/robust-skills.

원본 보기