Design Atlas{}Modern CSS & web APIs
:has(), anchor positioning, the Popover API, @starting-style — what browsers now give you for free. — 20 entries
:has() Relational Selector:has() 관계형 선택자
A CSS selector that matches a parent (or itself) based on the state of its descendants or siblings — often called the "parent selector".
Anchor Positioning앵커 포지셔닝
CSS-only positioning that pins one element to another without JS measuring coordinates — replaces tooltip/popover positioning libraries.
Popover API팝오버 API
The native overlay API — one HTML `popover` attribute gives you top-layer rendering, light-dismiss, and Esc-to-close for free.
@starting-style
An at-rule that defines the "before" state for an element appearing from `display:none`, so entry animations work with plain transitions.
Subgrid서브그리드
Lets a nested grid item inherit its parent grid's column/row tracks instead of defining its own.
color-mix()
Mixes two colors directly in CSS — tint/shade variants without Sass's `mix()` or a JS color library.
Native CSS NestingCSS 네이팅
Native syntax for nesting selectors inside a parent rule without Sass — `&` refers to the parent.
light-dark()
Declares a light and a dark color in one line — the browser picks based on `color-scheme`.
field-sizing
A property that lets `<textarea>`/`<input>` grow and shrink to fit their content with CSS alone.
text-box-trim
Trims the leading whitespace a font leaves above/below text so the box hugs the glyphs exactly.
Scroll-State Container Queries스크롤 상태 쿼리
A container query that asks about scroll-related state directly — whether an element is currently stuck, snapped, or scrollable.
<dialog> Element<dialog> 엘리먼트
The native modal element — focus trapping, Esc-to-close, top-layer rendering, and `::backdrop` all handled by the browser.
Exclusive Accordion with <details name><details name> 배타적 아코디언
Give several `<details>` elements the same `name` and opening one auto-closes the others — like radio buttons.
CSS Trigonometric FunctionsCSS 삼각함수
Trigonometric functions — `sin()`, `cos()`, `atan2()` — usable directly inside CSS calculations, for circular layouts and clock hands without JS.
interpolate-size
A property that lets sizing values without a fixed number — like `height: auto` — take part in transitions.
Cascade Layers캐스케이드 레이어
Groups styles into named `@layer` layers so priority is decided by layer order, not selector specificity.
@scope
Bounds a set of selectors to a DOM subtree so nested components' CSS doesn't leak into or out of each other.
Relative Color Syntax상대 색상 문법
`color(from ...)` reads an existing color and lets you tweak just one channel, whatever format the original was in.
View Transition Types뷰 트랜지션 타입
Styles a view transition differently based on why it happened — slide left for "next", slide right for "back".
inert Attributeinert 속성
An HTML attribute that removes an element and all its descendants from focus, click, and screen readers at once — for locking the background behind a modal.