v145 · css

Sidebar Context

A single .widget component placed in three different named containers — sidebar-context, content-context, and header-context. Each zone uses only container-name with no container-type, yet the widget adapts its layout, density, and visible elements purely from the container name query.

Feature detection: checking…

Move the widget to a different zone:

App layout — container-name zones, no container-type widget in: sidebar-context
container-name: header-context
container-name: sidebar-context
Analytics Widget live
Page views are up 14% this week compared to the same period last month. Engagement metrics remain strong.
Updated 2 min ago · 3 sources
container-name: content-context
Active CSS — which @container rule is matching
/* Container zones (no container-type on any zone) */
.zone-header { container-name: header-context; }
.zone-sidebar { container-name: sidebar-context; }
.zone-content { container-name: content-context; }

/* Widget adapts by name-only container query */
@container header-context { .widget { flex-direction: row; … } }
@container sidebar-context { .widget { padding: 0.4rem; background: stone; … } }
@container content-context { .widget { padding: 1rem; all visible; … } }

How each zone styles the widget

sidebar-context
Compact density: reduced padding, smaller font, body text truncated to 2 lines, action buttons hidden. Ideal for narrow navigation panels where space is at a premium.
content-context
Full layout: normal padding, full body text at 1.6 line-height, action buttons visible. This is the default "comfortable" reading context.
header-context
Horizontal row: flex-direction: row, body and meta hidden, actions pinned right. Fits inside a topbar strip without a size query.
/*
  No container-type on any zone — name only.
  Chrome 145 introduced querying by name without requiring
  a container-type to establish layout containment.
*/
.zone-sidebar  { container-name: sidebar-context; }
.zone-content  { container-name: content-context; }
.zone-header   { container-name: header-context;  }

/* Style query with just the container name */
@container sidebar-context (style(--dummy: initial)) {
  .widget {
    padding: 0.4rem 0.5rem;
    background: var(--bg-stone);
    font-size: 0.72rem;
  }
  .widget-actions { display: none; }
}

@container content-context (style(--dummy: initial)) {
  .widget {
    padding: 1rem;
    font-size: 0.85rem;
  }
  .widget-actions { display: flex; }
}

@container header-context (style(--dummy: initial)) {
  .widget {
    flex-direction: row;
    align-items: center;
  }
  .widget-body { display: none; }
}

see also