[tiu] Container Queries

In this edition of Today I Used: Container Queries. How can this feature help overcome the limitations of media queries?

The situation

A while back we got feedback from a user that they were unable to access an important feature in our application.
We found that on smaller screens, a part of the application would fall outside of the available screen area. Important controls were not available anymore for the user, unless they zoomed out a lot.

A quick solution would be to add the css-rule overflow-x: scroll and be done with it, but there is probably a nicer way to do this.

The solution?

We started with using @media queries to show shorter texts and move information behind tooltips which can be activated using a hover. This made enough room so the application is fully visible on smaller screens.

This seemed to solve the issue, except for a few problems: we have a toggleable side navigation, which reduces the available space by about 250px. When expanded, it would mess with the @media queries' breakpoints and show a scrollbar.

Also, when the user zooms in, the window size stays the same but the content grows in size. The @media queries won't trigger and the scroll bar is shown.

Lastly we had to choose different breakpoints then our global ones, since the breakpoints were dependant on the content in the screen. These breakpoints felt a bit random, since it was hard to pick 'nice' values.

Container queries to the rescue

@container queries work the same as @media queries but instead of using the entire window as a measurement, you can target an HTML element to listen to.

.table-container {
  container-type: inline-size; // use the inner dimensions
  container-name: role-table;  // give it a name, to reference 
  overflow-x: auto;            // scroll, if needed
}

Then we can target this container using @container <<container-name>. The following code toggles the short and long header names.

@container role-table (max-width: 750px) {
  .table {
    .short-header {
      display: table-cell;
    }

    .long-header {
      display: none;
    }
  }
}

@container role-table (min-width: 750px) {
  .table {
    .short-header {
      display: none;
    }

    .long-header {
      display: table-cell;
    }
  }
}

Now the breakpoints activate correctly when the sidebar is toggled, since this reduces the available width of the container. Also we can be specific about the available size of the specified container, and not have seemingly random @media query breakpoints in the codebase.

Extra cool feature

Another cool feature of @container-queries is that they provide container query length units. These are special units that specify a length relative to the dimensions of a query container.

The container query length units are:

• cqw: 1% of a query container's width
• cqh: 1% of a query container's height
• cqi: 1% of a query container's inline size
• cqb: 1% of a query container's block size
• cqmin: The smaller value of either cqi or cqb
• cqmax: The larger value of either cqi or cqb

This means you can smoothly change the size of for instance the font, based on the container size.

@container role-table (min-width: 700px) {
  .title {
    font-size: max(1.5em, 1.23em + 2cqi);
  }
}

More info

• MDN: CSS Container Queries
• Can I Use: Container Query