v150 · CSS · demo

OR Breakpoints

A navigation sidebar that collapses to icon-only when either the sidebar container is narrow or the main content area is wide — expressing a real "OR" condition with a single @container rule.

main ≥ 700px: no
@container OR rule: inactive

Main Content Area

This area's width also drives the sidebar state via a comma-separated container query — make it very wide and the sidebar collapses to icons.

Why OR Conditions Matter

Previously, you needed two separate @container blocks to express an OR. Now one comma-separated rule handles both conditions: the sidebar being narrow, or the main area being wide.

/* One rule — two conditions — true if EITHER matches */
@container sidebar (max-width: 100px),
           maincontent (min-width: 700px) {
  .nav-text    { display: none; }
  .nav-label   { display: none; }
  .nav-item a  { justify-content: center; }
}

see also

implementation reference

Need the exact API surface, compatibility boundaries, errors, lifecycle, and source links? Read the matching gendn reference ↗