Container query preparation in SASS - Browser Rendering Trace

Render Flow - Container query preparation

[Parse CSS selectors] -> [Identify container query rules] -> [Check container size] -> [Apply styles if conditions met] -> [Recalculate layout] -> [Paint changes]

The browser reads CSS, finds container queries, measures container sizes, applies styles if conditions match, then updates layout and paints the result.

Render Steps - 3 Steps

Code Added:<section class="card-container"> and <article class="card"> elements

Before

[ ] (empty page)

→

After

[card-container]
  [card]
    Title
    Some content here.

Adding HTML elements creates the basic structure visible on the page with text inside the card.

🔧 Browser Action:Builds DOM tree and renders default styles

Code Sample

A container query changes the card's background and padding when the container is at least 30rem wide.

SASS

<section class="card-container">
  <article class="card">
    <h2>Title</h2>
    <p>Some content here.</p>
  </article>
</section>

SASS

@container card-container (min-width: 30rem) {
  .card {
    background-color: lightblue;
    padding: 1rem;
  }
}

.card-container {
  container-type: inline-size;
  container-name: card-container;
  border: 1px solid #ccc;
  padding: 0.5rem;
}

Render Quiz - 3 Questions

After applying step 2, what new behavior does the container have?

A It changes background color automatically

B It becomes measurable for container queries based on width

C It hides its children elements

D It becomes a flex container

Common Confusions - 2 Topics

Why doesn't my container query styles apply even though I wrote @container?

You must set container-type on the container element first. Without container-type, the browser won't measure the container size and won't apply container query styles (see render_step 2).

💡 Always add container-type on the container before using @container queries.

Why does changing container width not update styles immediately?

Container queries react to container size changes, but if the container-type is missing or incorrect, the browser won't detect size changes to trigger style updates (see render_step 2 and 3).

💡 Ensure container-type matches the dimension you want to query (inline-size for width).

Property Reference

Property	Value Applied	Effect	Common Use
container-type	inline-size	Enables container queries based on container width	Set on container element
@container	(min-width: 30rem)	Applies styles when container width is at least 30rem	Wraps styles for responsive design
background-color	lightblue	Changes background color visually	Style change inside container query
padding	1rem	Adds space inside element edges	Improves spacing when condition met

Concept Snapshot

container-type enables container queries by making an element measurable. @container rules apply styles based on container size conditions. Common container-type values: inline-size (width), size (width & height). Container queries update styles responsively inside containers, not viewport. Remember to set container-type before using @container queries.