Modern & Experimental CSS — Interview Questions & Answers

Ques: What are Container Queries in CSS?

Ans: Container Queries allow styles to change based on the size of a container — not the viewport.

Unlike media queries (which respond to screen size), container queries make components responsive on their own.

Example:

.card {
  container-type: inline-size;
}

@container (min-width: 500px) {
  .card img {
    float: left;
    width: 40%;
  }
}

Ques: What is the difference between Media Queries and Container Queries?

Ques: What is Subgrid in CSS Grid Layout?

Ans: Subgrid lets a nested grid align its rows or columns with its parent grid.

Without subgrid, child grids act independently — but subgrid enables true nested alignment.

Example:

.parent {
  display: grid;
  grid-template-columns: 1fr 2fr;
}

.child {
  display: grid;
  grid-template-columns: subgrid;
}

Ques: What is Native CSS Nesting?

Ans: Native CSS Nesting allows you to write styles inside other selectors — like Sass, but without a preprocessor.

Example (new syntax):

.card {
  background: #fff;
  & h2 {
    color: navy;
  }
  & button:hover {
    background: orange;
  }
}

Ques: What is the CSS Color Module Level 4?

Ans: It introduces new modern color formats for more accurate and vibrant designs.

New Color Spaces:

• lab() / lch() — perceptually uniform colors
• hwb() — hue, whiteness, blackness
• oklab() / oklch() — next-gen, more natural color rendering

Example:

body {
  color: lch(60% 120 40);
  background: hwb(240 30% 20%);
}

Ques: What is CSS Houdini?

Ans: CSS Houdini is a set of APIs that let developers extend CSS by creating custom styles and behaviors using JavaScript.

APIs Include:

• Paint API – Draw custom backgrounds
• Properties & Values API – Register custom CSS properties
• Layout API – Define custom layout behaviors
• Animation Worklet – Custom animations

Example (Paint API):

// custom-paint.js
registerPaint('dots', class {
  paint(ctx, size) {
    for (let y = 0; y < size.height; y += 20) {
      for (let x = 0; x < size.width; x += 20) {
        ctx.beginPath();
        ctx.arc(x, y, 2, 0, 2 * Math.PI);
        ctx.fill();
      }
    }
  }
});

CSS:

.my-box {
  background: paint(dots);
}

Ques: What is CSS Scroll Snap?

Ans: Scroll Snap provides a smooth snapping effect when scrolling through items like carousels or slides.

Example:

.container {
  scroll-snap-type: x mandatory;
  overflow-x: scroll;
  display: flex;
}

.item {
  scroll-snap-align: center;
  flex: 0 0 100%;
}

Ques: What is the CSS Popover API?

Ans: The Popover API lets you easily create native, accessible popups (like tooltips, modals, or dropdowns) with pure HTML & CSS — no JavaScript.

Example:

<button popovertarget="info">Show Info</button>
<div popover id="info">
  This is a native popover!
</div>

Ques: What are new Viewport Units (lvh, svh, dvh)?

Ans: Modern CSS adds new viewport units that adapt better on mobile devices (where browser toolbars shift dynamically).

Example:

.hero {
  height: 100dvh; /* adapts dynamically */
}

Ques: What are Experimental CSS Features Developers Should Watch?

• CSS Masonry Layout (display: masonry)
• CSS Anchor Positioning (dynamic popover placement)
• CSS Nesting (native)
• CSS @scope (local style scoping)
• Color Contrast Functions (color-contrast())

Ques: What is the CSS Anchor Position API?

Ans: The Anchor Position API allows elements (like tooltips, dropdowns) to position themselves relative to another element — even dynamically.

Example:

<button id="btn">Menu</button>
<div popover anchor="btn" style="position-anchor: --anchor;">
  Options
</div>

Ques: How do Modern CSS Features Improve Developer Experience?

• Simplify complex layouts (Grid + Subgrid)
• Enable modular design (Container Queries, Nesting)
• Improve responsiveness (dvh/svh units)
• Boost color precision (LCH, OKLCH)
• Enhance UI accessibility (Popover, Anchor APIs)
• Modern CSS → More power, less JavaScript.

Ques: How to check browser support for new CSS features?

Ans: Use :-

• https://caniuse.com → Browser support chart
• Chrome DevTools → “Rendering” tab
• Feature detection:

@supports (container-type: inline-size) {
  /* use container queries */
}