Container query preparation in SASS - Practice Problems & Coding Challenges

Challenge - 5 Problems

🧠 Conceptual

intermediate

What does a container query do in CSS?

Which statement best describes the purpose of a container query in CSS?

A It applies styles based on the size of the element's container, not the viewport.

B It changes styles depending on the user's screen resolution only.

C It modifies styles only when the browser window is resized.

D It applies styles based on the total number of elements inside a container.

💡 Hint

Think about what 'container' means compared to 'viewport'.

Container queries let you style an element based on its container's size, not the whole screen. This helps create more flexible designs.

📝 Syntax

intermediate

Identify the correct container query syntax in Sass

Which Sass code snippet correctly uses a container query to apply styles when the container is at least 30rem wide?

A @container min-width: 30rem { .box { color: blue; } }

B @container (width >= 30rem) { .box { color: blue; } }

C @container (min-width 30rem) { .box { color: blue; } }

D @container (min-width: 30rem) { .box { color: blue; } }

💡 Hint

Look for the correct parentheses and colon usage.

The correct syntax uses parentheses around the condition with a colon separating property and value.

❓ rendering

advanced

What color will the box be when container width is 40rem?

Given the Sass code below, what color will the box have if its container is 40rem wide?

SASS

@container (min-width: 50rem) { .box { color: red; } }
@container (min-width: 30rem) { .box { color: green; } }
.box { color: black; }

A green

B black

C red

D no color applied

💡 Hint

Check which container queries match 40rem width and which style applies last.

At 40rem, the min-width: 30rem query applies, setting color to green. The 50rem query does not apply, so red is ignored.

❓ selector

advanced

Which selector correctly targets elements inside a container query?

In Sass, which selector inside a container query will style only direct child

elements of the container?

A p { font-weight: bold; }

B & p { font-weight: bold; }

C & > p { font-weight: bold; }

D > p { font-weight: bold; }

💡 Hint

Remember how Sass uses & to refer to the parent selector.

The & symbol in Sass refers to the parent selector. Using & > p targets direct child <p> elements.

❓ accessibility

expert

How to ensure container queries do not harm accessibility?

Which practice helps maintain accessibility when using container queries for styling?

A Use container queries to hide important content when container is small.

B Ensure color changes meet contrast standards and do not rely solely on color to convey information.

C Apply container queries only to decorative elements without text.

D Avoid using container queries on interactive elements.

💡 Hint

Think about users with vision impairments and how styles affect readability.

Accessibility requires good contrast and not relying only on color changes to communicate meaning, even when using container queries.