161. Which CSS property significantly improves rendering performance?
- a) content-visibility
- b) will-change
- c) Both a and b
- d) render-boost
Answer: C - content-visibility: auto skips offscreen rendering, while will-change optimizes animations.
162. Which CSS feature reduces layout recalculations?
- a) contain: strict
- b) isolation: isolate
- c) Both a and b
- d) layout-fix
Answer: A - contain limits browser's recalculation scope for complex layouts.
163. Which Chrome DevTools feature identifies unused CSS?
- a) Coverage tab
- b) Audits panel
- c) CSS Overview
- d) Performance analyzer
Answer: A - Coverage tool shows unused bytes with line-by-line breakdown.
164. Which CSS property prevents expensive paint operations?
- a) transform: translateZ(0)
- b) will-change: transform
- c) Both a and b
- d) paint-mode: fast
Answer: C - Both promote elements to compositor layers (use sparingly).
165. Which CSS tool removes unused selectors automatically?
- a) PurgeCSS
- b) UnCSS
- c) Both a and b
- d) CSSNano
Answer: C - Both analyze HTML/JS to detect unused CSS (PurgeCSS is build-tool friendly).
166. Which CSS feature minimizes CLS (Cumulative Layout Shift)?
- a) aspect-ratio
- b) contain-intrinsic-size
- c) Both a and b
- d) layout-anchor
Answer: C - aspect-ratio reserves space, while contain-intrinsic-size helps with content-visibility.
167. Which CSS property enables hardware-accelerated filters?
- a) backdrop-filter
- b) filter
- c) Both a and b
- d) gpu-filter
Answer: C - Modern browsers accelerate both properties via GPU.
168. Which CSS technique reduces repaints during animations?
- a) Use transform/opacity
- b) Avoid animating width/height
- c) Both a and b
- d) Use requestAnimationFrame
Answer: C - Transform/opacity avoid layout recalculations.
169. Which CSS feature enables progressive rendering?
- a) content-visibility: auto
- b) lazy loading
- c) Both a and b
- d) render-strategy: progressive
Answer: C - content-visibility skips offscreen content, while lazy loading defers non-critical resources.
170. Which CSS property enables variable font loading optimization?
- a) font-display: swap
- b) font-loading: optional
- c) font-strategy: performance
- d) font-render: fast
Answer: A - font-display: swap shows fallback text immediately.
171. Which experimental CSS feature enables scroll-driven animations?
- a) scroll-timeline
- b) view-timeline
- c) Both a and b
- d) scroll-animation
Answer: C - Part of CSS Scroll-Driven Animations spec (Chrome 115+).
172. Which CSS feature enables anchor positioning?
- a) anchor()
- b) position: absolute from()
- c) Both a and b
- d) position-anchor
Answer: A - Experimental: top: anchor(bottom) positions relative to another element.
173. Which CSS function enables trigonometric calculations?
- a) sin()
- b) cos()
- c) Both a and b
- d) calc-trig()
Answer: C - New CSS Math Functions (Chrome 111+, Firefox 108+).
174. Which CSS feature enables nested rules natively?
- a) CSS Nesting
- b) @nest
- c) Both a and b
- d) sass-nesting
Answer: C - Now supported in modern browsers (Chrome 112+, Firefox 117+).
175. Which CSS pseudo-class detects reduced motion preference?
- a) @media (prefers-reduced-motion)
- b) :reduced-motion
- c) prefers-motion: reduce
- d) motion-safe
Answer: A - Critical for accessibility compliance.
176. Which CSS property enables color font rendering?
- a) font-palette
- b) color-font
- c) font-rendering: color
- d) font-tech: COLR
Answer: A - Controls alternate palettes in COLR/SVG fonts.
177. Which CSS feature enables container-based units?
- a) cqw/cqh units
- b) container-relative
- c) @container units
- d) relative-to: container
Answer: A - 1cqw = 1% of container width (requires container-type).
178. Which CSS property enables declarative drag-and-drop?
- a) drag: element
- b) -webkit-draggable
- c) draggable: true
- d) No CSS-only solution
Answer: D - Requires HTML draggable attribute + JavaScript.
179. Which CSS feature enables style queries?
- a) @container style()
- b) @style-query
- c) style()
- d) query-style
Answer: A - Experimental: @container style(--theme: dark) { ... }.
180. Which CSS property enables text wrapping balance?
- a) text-wrap: balance
- b) wrap-balance
- c) text-balance
- d) balance-text
Answer: A - Experimental (Chrome 114+) for more aesthetic headings.