| name | modern-css |
| description | Modern CSS capabilities designers should know - container queries, :has(), view transitions, scroll-driven animations, subgrid, fluid typography. Use when designing responsive layouts, specifying component behavior, or bridging design-to-development communication. |
Modern CSS for Designers
Designers who don't understand what CSS can do design things that are either impossible to build or unnecessarily hard to build. You don't need to write CSS. But you need to know what's possible natively so you stop handing off designs that require JavaScript hacks for things CSS does out of the box.
When to Use This Skill
Use when you need:
- Responsive design that goes beyond media queries
- Component-level responsiveness (container queries)
- Typography that scales fluidly
- Animation specification that maps to CSS
- Understanding what's possible natively (no JavaScript needed)
Container Queries
Components adapt based on their container's size, not the viewport.
.card-container { container-type: inline-size; }
@container (min-width: 400px) {
.card { flex-direction: row; }
}
Why designers care: A card component in a sidebar behaves differently than the same card in main content - automatically. True component reusability.
:has() Selector (Parent Selector)
Style a parent based on what it contains.
.form-group:has(input:invalid) { border-color: red; }
.card:has(img) { grid-template-rows: auto 1fr; }
Why designers care: Conditional styling without JavaScript. Components self-adapt based on content.
Fluid Typography
Smooth font scaling between min and max sizes:
h1 { font-size: clamp(2rem, 5vw + 1rem, 4rem); }
Rules:
- Always combine vw with rem (pure vw doesn't respond to browser zoom - accessibility issue)
- Use consistent viewport calculations across elements for synchronized scaling
- Tools: fluidtypography.com, clampgenerator.com
CSS Grid Patterns
Auto-responsive grid (no media queries):
.grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 1rem;
}
Subgrid
Child grids inherit parent grid tracks. Cards in a grid maintain aligned headers, content, and footers even when content lengths vary.
Grid vs. Flexbox
- Grid = 2D layout (rows + columns). Use for page layout.
- Flexbox = 1D layout (row OR column). Use for component layout.
View Transitions API
Native browser transitions between states or pages. Smooth page transitions, shared element transitions (thumbnail → full image), state changes - all handled natively.
Scroll-Driven Animations
Animate based on scroll position rather than time.
Use cases: Reading progress bars, parallax, reveal-on-scroll, header transformations.
Performance: Tokopedia replaced JS scroll handlers with CSS: 80% less code, CPU dropped from 50% to 2% while scrolling.
What Designers Should Specify
When handing off responsive behavior, specify:
- Container breakpoints (not just viewport breakpoints)
- Fluid ranges (min/max sizes for typography and spacing)
- Layout shifts (what changes at each breakpoint - grid columns, stack direction)
- Animation triggers (on scroll, on hover, on state change)
- Easing and duration (map to the motion design token system)
Related Skills
design-systems - Token architecture that maps to CSS custom propertiesmotion-design - Animation principles and easing curvesfigma-at-scale - Figma variables that map to CSS tokens
