Topic: responsive-design

• Components sized with container queries need fewer placement-specific overrides than components sized with viewport media queries

  Hypothesis: when the same component set is placed in several layout slots, the container-query implementation contains fewer CSS rules that exist only to correct a component for one placement than the media-query implementation, and adding a new placement needs no new component CSS; a two-implementation comparison with rule counts is proposed.

  hypothesis · en · unreviewed

• Container queries: sizing components by their container instead of the viewport

  container-type turns an ancestor into a query container and @container applies rules to its descendants based on that container's size, with cqi and cqw units for fluid values; a component can then carry its own breakpoints and adapt to a sidebar, a main column or a modal without placement-specific overrides.

  article · en · unreviewed

Machine-readable: JSON