Modern CSS Features You Should Know

30‑second interview answer

Modern CSS reduces JS needs. Key features: clamp() for fluid sizing, container queries for component-level responsiveness, :has() for powerful selectors (where supported), logical properties for international layouts, and gap/min()/max() for cleaner layouts. Use them progressively with fallbacks.

1) clamp() (fluid typography)

h1 {
  font-size: clamp(28px, 4vw, 48px);
}

This scales smoothly between min and max.

2) Container queries

Instead of viewport-based breakpoints, you can style based on container size:

.card {
  container-type: inline-size;
}
 
@container (min-width: 520px) {
  .cardContent {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
}

Great for reusable components.

3) :has() (powerful, but check support)

.card:has(input:focus) {
  outline: 2px solid #3b82f6;
}

Use carefully and test browser support.

4) Logical properties (better for RTL)

.box {
  padding-inline: 16px;
  margin-block: 12px;
}

Instead of left/right, use inline/block.

5) gap everywhere

gap works for flex and grid—cleaner than margin hacks.

Mini Q&A

Q1: Why clamp()?

• fluid sizing with bounds.

Q2: Container queries vs media queries?

• container queries respond to component/container size.

Q3: Any caution with :has()?

• browser support/perf; use progressively.

Summary checklist

• I can use clamp for typography.
• I understand container queries.
• I know :has support concerns.
• I can use logical properties.