Modern CSS and the web platform

10 questions drawn from the parts of this series. Answers here count toward each post's own quiz.

1. Question 1 of 10·IntermediateA flex row has an avatar and a flex: 1 text block holding a white-space: nowrap; text-overflow: ellipsis title, yet the title still pushes the row wider than its container. Why, and what is the fix?

   flex: 1 is not strong enough; add width: 100% to the text block.text-overflow does not work in flex; switch to display: grid.Flex items have min-width: auto, meaning they cannot shrink below the content's min-content; a nowrap title has a very wide min-content, so min-width: 0 lets the item shrink and the child can truncate.The avatar takes all the space; set flex-shrink: 0 on the text block.
2. Question 2 of 10·StarterHow does the post suggest quickly telling flexbox and grid apart?

   Flexbox is content-out (item sizes decide the space they take, one dimension); grid is layout-in (draw the tracks first, then place items, two dimensions).Flexbox is for desktop and grid is for mobile.Flexbox only aligns horizontally and grid only aligns vertically.Grid is the new version that fully replaces flexbox, so the two should not be used together.
3. Question 3 of 10·StarterA card using viewport media queries gets squeezed into a narrow text column when placed in a 280px sidebar on a 1440px screen. Why do container queries fix this?

   Because container queries measure the viewport more accurately than media queriesBecause container queries let the card switch breakpoints through a variant prop passed from aboveBecause the card asks how wide its containing element is instead of the window, so it picks the right layout wherever it is placedBecause container queries fully replace media queries, even for page layout
4. Question 4 of 10·IntermediateYou set container-type: inline-size on a flex item with no flex-grow and use @container to restyle that same element. Which two problems can occur?

   Styles do not apply because @container only works with px, and the container always has zero heightAn element cannot query itself, only descendants receive the styles; and size containment can shrink the container to 0 since width no longer derives from contentThe container doubles its width; and @container finds the farthest container instead of the nearestThe query runs in an infinite loop; and a container-name is required to work
5. Question 5 of 10·IntermediateWhy should components use semantic tokens (--color-accent) rather than primitives (--blue-600) directly?

   Because browsers do not support primitivesBecause semantic tokens render fasterBecause for dark mode or a rebrand you only repoint the semantic token to another primitive, and components need not knowBecause Tailwind only accepts semantic tokens
6. Question 6 of 10·IntermediateA user chose the dark theme but sees a light flash every time the page opens. What is the cause and the fix?

   localStorage is cleared; store it in a long-lived cookiedata-theme is set after the first paint; set it earlier with a tiny synchronous inline script in headCSS has not loaded yet; move all CSS into JavaScriptprefers-color-scheme is broken; remove the media query
7. Question 7 of 10·IntermediateWhen should you use <dialog> with showModal() instead of popover?

   When you need the element in the top layer, because popovers cannot enter the top layerWhen you need open and close animations, because popovers cannot be animatedWhen the user must deal with this content before doing anything else, because the rest of the page becomes inertWhen you need click-outside to close, because popovers do not support light dismiss
8. Question 8 of 10·IntermediateNow that platform primitives exist (popover, anchor positioning), how should a team decide between native and a library like Radix or Floating UI?

   Drop libraries entirely, since native primitives can always replace everything a library doesAsk "do we still need a library for this case": accessible menus, comboboxes and date pickers should still use a headless library because the hard part is keyboard and screen reader behaviour, not positioningKeep the library everywhere to avoid browser compatibility riskUse native only on desktop and a library on mobile
9. Question 9 of 10·IntermediateIn React you pass the open prop to <dialog> to open a modal. What actually happens?

   The dialog opens as a full modal, just slightly slowerYou only get a non-modal dialog: no top layer, background not inert, Escape does not close it; for a modal you must call showModal()The dialog does not appear because React blocks openThe dialog is modal but has no ::backdrop
10. Question 10 of 10·IntermediateWhere should initial focus go in a "Delete project" confirmation dialog, and why?

    The "Delete" button, for the fastest interactionThe first input, as in any formThe safe "Cancel" button, so an accidental Enter does not lose dataLet the browser decide, since defaults are always consistent