Working on a web design involves handling the design for different screen sizes. Based on those designs, the developer will use CSS media queries to detect the viewport width or height, and then alter the design based on that. This is how we used to design web layouts for the past 10 years, and it’s about to get even better. I have some good news for you.

CSS Container queries, a long-requested feature by web developers is coming soon to CSS and now available as an experimental feature in Chrome Canary. In this article, I will go through what is it, how it will change your workflow as a designer, and more. I don’t care if you a designer who codes or not, as the main point of this article is to introduce this concept so you can be prepared for the next. If you spot any CSS bits that you don’t fully understand, you can totally ignore them and move on.

Enough talking, Let’s dig in!

The Current State Of Responsive Design

Nowadays, it’s still okay to work on multiple versions of the same web layout to show how the inner parts will change based on the viewport width. We design different sizes like mobile, tablet, and desktop.

In the figure above, the designer has created three variations of the same design, so the developer can get an idea of how things will work. All is good till now.

Now, I will show you a more detailed look for the design and its variations so I can shed light on the problem that CSS container queries will fix for us.

Notice that this is the same component, and it has three variations which are the default, card, and the featured. As a designer, you have used multiple versions of the layout to showcase this. It’s like saying: “This is how the article component will look on mobile, and this is how it will look on tablets”.

In CSS, the developer needs to create three variations of this component, and each one of them is unique. Consider the following basic styles:

.c-media {
  /* the default styles */
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

@media (min-with: 400px) {
  .c-media--card {
    display: block;
  }

  .c-media--card img {
    margin-bottom: 1rem;
  }
}

@media (min-with: 1300px) {
  .c-media--featured {
    position: relative;
    /* other styles */
  }

  .c-media--featured .c-media__content {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
  }
}

The variations above depend on media queries or the viewport width. That means, we can’t control them based on their parent width. Now you might be thinking, what’s the problem here? Well, that’s a good question.

The problem is that the developer is tied with using a variation of a component only when the viewport width is greater than a specific value. For example, if I want to use the “featured” variation in the tablet size, it won’t work, why? Because the media query for it kicks in at 1300px viewport width or more.

#article #css #designers