Question 1

What’s the `minmax()` function in Grid?

Accepted Answer

It sets a range for grid tracks—like `minmax(100px, 1fr)` for a flexible column. Balances control and flexibility.

Question 2

What’s the `backdrop-filter` property?

Accepted Answer

It applies effects like blur to the area behind an element—think frosted glass. Fancy and modern.

Question 3

What’s the `@keyframes` rule?

Accepted Answer

It defines steps for an animation, letting you control how properties change over time. Pair it with `animation` for cool effects.

Question 4

What’s the `will-change` property?

Accepted Answer

It hints to the browser which properties will animate, optimizing performance—like `will-change: transform`. Use it sparingly.

Question 5

What’s the `clamp()` function?

Accepted Answer

It sets a value between a min and max—like `clamp(1rem, 2vw, 3rem)`. Great for responsive sizing.

Question 6

How do you create a responsive typography scale?

Accepted Answer

Use relative units like `rem` or `vw`, and tweak with media queries. It keeps text readable across devices.

Question 7

How do you hide an element visually but keep it for screen readers?

Accepted Answer

Use a class with `position: absolute`, `width: 1px`, and `clip` to tuck it off-screen. Keeps it accessible but invisible.

Question 8

What’s CSS-in-JS?

Accepted Answer

It’s a pattern where CSS is written in JavaScript files (like in React with styled-components), scoping styles to components. More dynamic but controversial.

Question 9

How do you optimize CSS for performance?

Accepted Answer

Minify CSS, avoid deep nesting, use shorthand properties, and prioritize critical CSS. It cuts load time and keeps rendering snappy.

Question 10

What’s the `grid-template-areas` property?

Accepted Answer

It names grid areas for a visual layout—like a blueprint. Makes complex designs readable.

DeVlt

Hard Css Interview Questions

Unlock All Interview Questions

Why Practice Hard Css Questions?

DeVlt