181. Which CSS technique ensures accessible focus indicators?
- a) :focus-visible
- b) outline: 2px solid
- c) Both a and b
- d) focus-ring: auto
Answer: C - :focus-visible hides focus rings for mouse users while preserving keyboard accessibility.
182. Which CSS property ensures sufficient color contrast?
- a) color-contrast()
- b) contrast-color
- c) color-scheme: high-contrast
- d) No CSS-only solution
Answer: A - Experimental function: color: color-contrast(black vs white, #777).
183. Which CSS feature helps screen readers skip navigation?
- a) .sr-only class
- b) aria-hidden="true"
- c) display: none
- d) skip-link positioning
Answer: D - Combine visually-hidden skip links with :focus styles.
184. Which CSS property respects OS dark/light mode?
- a) color-scheme
- b) @media (prefers-color-scheme)
- c) Both a and b
- d) theme: auto
Answer: C - color-scheme adapts form controls, while media query handles custom styles.
185. Which CSS unit is most accessible for text sizing?
Answer: A - rem respects root font size adjustments (user preference).
186. Which CSS feature helps prevent WCAG reflow issues?
- a) line-clamp
- b) text-overflow: ellipsis
- c) Both a and b
- d) overflow-wrap: anywhere
Answer: C - Both techniques prevent horizontal scrolling at 400% zoom.
187. Which CSS property enables prefers-reduced-motion?
- a) @media (prefers-reduced-motion: reduce)
- b) reduce-motion: auto
- c) animation: safe
- d) motion: reduce
Answer: A - Essential for vestibular disorder accessibility.
188. Which CSS selector targets ARIA states?
- a) [aria-expanded="true"]
- b) :aria-expanded
- c) aria(expanded)
- d) state: expanded
Answer: A - Attribute selectors work with all ARIA attributes.
189. Which CSS feature helps maintain aspect ratios accessibly?
- a) aspect-ratio
- b) padding-top hack
- c) Both a and b
- d) ratio-box
Answer: A - Native aspect-ratio avoids percentage padding calculations.
190. Which CSS property enables CSS-only prefers-contrast detection?
- a) @media (prefers-contrast)
- b) contrast-mode: high
- c) color-contrast: more
- d) visibility: high-contrast
Answer: A - Values: no-preference, more, less, or custom.
191. Which CSS feature is coming in CSS4?
- a) :has() parent selector
- b) Container Queries
- c) Both a and b
- d) CSS Variables 2.0
Answer: C - Both are now supported in modern browsers (though not officially "CSS4").
192. Which CSS feature enables conditional style loading?
- a) @supports
- b) @import when
- c) Both a and b
- d) @media (supports)
Answer: A - @supports (display: grid) { @import "grid.css"; }.
193. Which CSS property enables CSS-only tooltips?
- a) attr() + ::before
- b) tooltip: attr(data-tooltip)
- c) popover API
- d) No CSS-only solution
Answer: A - Limited but possible: content: attr(data-tooltip).
194. Which CSS feature enables cascade layers?
- a) @layer
- b) cascade: layers
- c) style-layers
- d) layer()
Answer: A - @layer base, components, utilities; controls specificity.
195. Which CSS property enables view transitions?
- a) view-transition-name
- b) transition-view
- c) cross-fade()
- d) page-transition
Answer: A - Part of View Transitions API (Chrome 111+).
196. Which CSS feature enables scoped styles without Shadow DOM?
- a) @scope
- b) style[scoped]
- c) Both a and b
- d) CSS Modules
Answer: A - Experimental: @scope (.card) { ... } limits selector reach.
197. Which CSS function creates relative colors?
- a) relative-color()
- b) color-mix()
- c) color(from ...)
- d) oklch()
Answer: C - color(from var(--main) lch l c h / 50%) adjusts existing colors.
198. Which CSS feature enables declarative enter/exit animations?
- a) @starting-style
- b) :initial-state
- c) transition-behavior: allow-discrete
- d) All of the above
Answer: D - New features for smoother component lifecycle animations.
199. Which CSS property enables CSS-only light/dark theming?
- a) :has(input[type="checkbox"])
- b) @media (prefers-color-scheme)
- c) Both a and b
- d) theme-toggle
Answer: C - Combine media query with :has() for user override.
200. Which CSS feature is ideal for micro-interactions?
- a) Custom Properties + calc()
- b) @property registered variables
- c) Both a and b
- d) JavaScript animations
Answer: C - CSS is now capable of complex animations with registered properties.