CSS Container Queries: A New Approach to Responsive Web Design


Container queries are a new CSS feature making big waves. They let websites shift away from designs based on page size to a container-based approach, part of a larger evolution in the design ecosystem.

Ecommerce Marketing Automation

Containers allow you to add styles to elements, like font sizes, colors, and layout widths, based on the parent container. This is a whole new approach to responsive design, which formerly relied on the viewport size.

For instance, on a website where an element is in a hero section or a grid on a page, the element will change sizes based on the container, not the viewport.

Container queries use breakpoints similar to how media queries do. The big difference is that the @container responds to its parent container, while @media follows the viewport and user agent.

Container Query Example

The HTML:

<div class="element-container">
<div class="links">...</div>
</div>

The CSS:

.element-container {
  contain: size layout;
}

@container (max-width: 1200px) {
  .links {
    color: blue;
  }
}

Initially, the parent element’s containment is defined. That’s followed up with a @container query, which styles the container based on size. The code above uses max-width, and sets the links to color to blue, when the container is less than 1200px wide.

A New Approach to Responsive Design

Container queries empower developers to increase user customization with improved component-based designs, going beyond viewport limitations.

Many are calling this the next era of responsive design, including Enlear Academy which added that the CSS container query is “definitely a long-awaited feature.”

Container queries bring a new way to create responsive designs for mobile, giving developers the ability to re-layout designs based on smaller elements within a larger page’s viewport rules.

Using @container begins with establishing a parent element with containment.

One limitation worth noting: Height-based container queries are not currently possible. To make grid children function with @container, a wrapper element is needed.

To Give Container Queries a Try…

You can try your own tests with the @container property.

Navigate to: chrome://flags in Chrome Canary. Canary is a testing browser for developers that wish to be early adopters of @container queries.

There, you’ll turn on the Enable CSS Container Queries setting. This will enable support for @container, inline-size and block-size values for the contain property, and the LayoutNG Grid implementation.

If you need help utilizing @container queries on your website, contact the web development experts at Hall.

Share this:



Source link

30%* off! Big Savings For Your Small Business!

LEAVE A REPLY

Please enter your comment!
Please enter your name here