DEV Community: creatures.dev

CSS Style Queries

Lazar Nikolov — Thu, 31 Aug 2023 02:02:23 +0000

Style Queries is a very cool feature in CSS, and they’re defined by the containment spec. Aside from being able to query a parent’s inline size (that’s container queries), the containment spec also includes the ability to query a parent’s style values (that’s style queries). Even though the container queries are available in all modern browsers, the style queries aren’t. Chrome and Edge have it. Opera’s working on it. Firefox and Safari, not so much. If you haven’t learned about container queries so far, check out our Container Queries article. Style queries are just slightly different than container queries, so I’d suggest to learn about container queries first. Alright, let’s play with some style queries!

Syntax

Here’s our first example:

The markup is simple. We have a list of collection of cards who have an image, a title and some text. We can see that the images have an overlay with different colors. We can call them different variants of the card, and it’s a really good example for demonstrating style queries. Let’s break down the example. In the markup, we can see that we’re defining a CSS variable on every <li> element: style='--variant: teal', and that’s all we need to do in our markup. Then in our CSS we define a container query, but instead of querying on its size, we’re querying on its specific style value, which is the variable we defined earlier: @container style(--variant: teal). This creates a containment context on the element that has the --variant: teal variable, and that’s the first <li> element. Just like the container queries, everything we put inside has to target a descendant of that <li> element. In our case we’re targeting the .poster element, which is the image, and we’re setting its ::after element’s content to a specific SVG image:

@container style(--variant: teal) {
    .poster::after {
        content: url("data:image/svg+xml;base64,PHN2Zy.........)
    }
}

We can now repeat the same for the other variants cream, mint, pink, yellow and sky, and our card variants will be done!

You might’ve also noticed that even though the style queries are built on top of container queries, we didn’t define the container or container-name anywhere. CSS is smart enough to figure it out for you. But what if you have multiple components that use the --variant variable? In that case, you can explicitly define the container name, so your style queries don’t mix:

li {
   container-name: daily-mix-card;
    /* ... */
}

@container daily-mix-card style(--variant: teal) {
    /* ... */
}

Combining multiple styles

Let’s see another example:

In this example we’re using the variables to indicate whether certain things should be visible in the card. There are three variables: ---star-seller, ---order-soon, and ---free-delivery. All of them when set to true will make the “✪ Star Seller”, “Only X left - order soon” and “FREE delivery” (respectfully) elements visible. If you look at line 29 in the HTML you’ll see that we have two variables defined: --star-seller and --order-soon. And if you look at the “EWB Bench” item, you’ll see that both the purple “Star Seller” and the red “Only 1 left - order soon” labels are displayed. Or check out the vintage lamp item with the red border around its image. It has all three styles set to true. To define a style query that queries on multiple styles, use and to combine the style(...) functions like this:

@container style(--star-seller: true) and style(--free-delivery: true) and style(--order-soon: true) {
  img {
    border: 3px solid red;
  }
}

With this approach, we can create and combine as many styles as we like. The best thing about it is that everything is controlled just by the style attribute of the <li> element. If we want to dynamically control that using JavaScript, all we need to do is invoke the setProperty method of the element’s style property:

product.style.setProperty('--star-seller', true);

Conclusion

Just imagine what you can do with style queries. All that with just pure CSS! No JavaScript logic to show/hide or conditionally render certain elements. Style queries allow us to define variants of our components, or toggle the visibility of certain elements, all just by setting a single CSS variable at the root element. We can also dynamically add/remove/change the variables with JavaScript by using the style.setProperty() method.

Another benefit of this feature is the separation of data from design. The HTML and CSS define all the possible varieties, while the JavaScript only toggles them. And since we’re talking about plain JavaScript, we can use style queries to define our variants and togglable elements without being constrained to a specific UI framework! That’s why this CSS feature is a game changer, and I can’t wait for it to be supported by all modern browsers.

CSS Container Queries

Lazar Nikolov — Thu, 31 Aug 2023 01:59:52 +0000

Unlike Media Queries, which let you apply styles to an element based on the viewport size, Container Queries let you apply styles to an element based on its own size. Talk about next level responsive design! And the best thing is, it’s supported by all modern browsers! Let’s say you want a card’s layout to be horizontal if it has at least a certain width, and switch to vertical when it gets narrower. Here’s an example:

Containment context

Looking at the example, we can see that our article.post-card has a container property with a value of post-card / inline-size. This declares a containment context on our post card element. The container is a shorthand property that sets the container-name to post-card and the container-type to inline-size. The inline-size value declares the containment context on the inline axis of the container. This means that you can only define styles based on the width of the container. If you also want to define styles based on the height, you can use the size value.

Bear in mind that when you declare a container to a certain element, it will prevent it from being sized based on its contents. This goes for both size and inline-size. To provide size to the “containerized” element, you would need to either define it through its parent (flex and grid stretch by default) or its display (block also stretches by default), or set its width or height explicitly. Setting the container-type to size will collapse its height, while setting it to inline-size will collapse its width.

Another thing to have in mind is that you can’t use an inline element as a container. If you were to define a span as a container, you could, but you’d have to make it a non-inline display. Rule of thumb: any element that’s not inline can be made into a container.

Container query

Check out line 40. We set the .content element’s flex-direction to column. On smaller sizes we want the image and text to be one on top of the other, but if we have enough horizontal space we can actually put them one next to the other, or set the flex-direction to row. That’s a use case for a container query! Scroll down to line 96:

@container post-card (min-width: 512px) {
  ...
}

This is how we define a container query. With this line, we’re basically telling CSS “when the post-card container (not element with class) has at least 768px of width, apply these styles (…)”. The top level scope is the article.card element. We should take that in consideration when writing the selectors. On line 99 we redefine the .content element’s flex-direction to row. That’ll make the image and text to flow horizontally, and if we expand the viewport enough we’ll see that the card’s content changes direction. Notice that if we change the selector to article.post-card div.content it won’t work, even though it’s a perfectly valid selector, because it would expect to find an article.post-card inside of the article.post-card element and we both know that’s wrong. But following this example, we can redefine any property of any descendant of our article.post-card. That’s the beauty of it!

Container query units

Along with the new @container syntax, we also get brand new values that are relative to the container size. Here are they:

cqw is 1% of the container’s width
cqh is 1% of the container’s height
cqi is 1% of the container’s inline size
cqb is 1% of the container’s block size
cqmin and cqmax are the smallest and largest (respectfully) value of either cqi or cqb

So, if we wanted to set something to be the 3% of the container’s width for example, we would set it to 3cqw. Scroll all the way down to line 123, 128 and 133, and you’ll see that the text elements are being set to a certain percentage of the container’s inline size. Try changing the size of the card and you’ll see that the font size grows and shrinks with the card. This might not be a real-world use case, but you get the gist 😁.

Conclusion

So there you have it! Container Queries! How cool are they? You can use them to define responsive elements that react not based on the viewport’s size, but based on the space they’re given, regardless of the viewport size. That means that you can have two instances of the same component on a page, but because of the different space they’re given, they’ll appear differently. Check out the creatures.dev blog page. The featured post card is the same component as the post cards in the grid below. That card is the card from this example, but used in production. If you want to see more use cases, check out this article (takes you to CSS Tricks).

Getting started with CSS Nesting

Lazar Nikolov — Sat, 12 Aug 2023 21:48:34 +0000

CSS Nesting used to only be possible in CSS preprocessors like Sass and Less. But guess what, it's now built in native CSS and all modern browsers will support it after August 29th. Let's see what's CSS Nesting and how we can use it.

What is CSS Nesting?

CSS Nesting is a new feature that allows you to nest selectors inside other selectors. Nesting helps by reducing repetition, reducing the file size, better file organization and easier refactoring. Let's see an example without nesting:

/* No nesting */
article.card {
  border: 1px solid lightgrey;
  border-radius: 6px;
  overflow: hidden;
}

article.card header {
  border-bottom: 1px solid lightgrey;
  background: #f1f3f4;
  padding: 16px;
}

This example can be written with nesting like this:

/* With nesting */
article.card {
  border: 1px solid lightgrey;
  border-radius: 6px;
  overflow: hidden;

  & header {
    border-bottom: 1px solid lightgrey;
    background: #f1f3f4;
    padding: 16px;
  }
}

Nesting examples

To get a good feel of how nesting works, let's see some more examples.

Multi-level nesting

article.card {
  border: 1px solid lightgrey;
  border-radius: 6px;
  overflow: hidden;

  & header {
    border-bottom: 1px solid lightgrey;
    background: #f1f3f4;
    padding: 16px;

    & h2 {
      margin: 0;
    }
  }
}

In this example we can see that we can nest as many levels as we want. The first level is the article.card selector, which is the root selector. The second level is the & header selector, which is nested inside the root selector. The header styles will only be applied to header elements that are children of article.card elements.

Nesting without the `&` symbol

article.card {
  border: 1px solid lightgrey;
  border-radius: 6px;
  overflow: hidden;

  .content {
    border-bottom: 1px solid lightgrey;
  }
}

We don't always need to add the & symbol to indicate nesting. If we don't add it, CSS will add & + " " (space) in front of the nested selector. By explicitly placing the & symbol, we can control where the parent selector should be placed.

Nesting pseudo-classes

article.card {
  /* ... */

  :is(.content, footer) {
    padding: 16px;
  }
}

It's also possible to nest pseudo-classes like the :is() in this example. As we saw in the previous example, if we don't add the & symbol CSS is going to add that for us + an empty space, so this example will target all children of
the article.card element that are either .content or footer elements. The "compiled" selector will look like this:

article.card :is(.content, footer): {
  /* ... */
}

Nesting pseudo-elements

article.card {
  /* ... */

  & footer a {
    /* ... */

    &:hover {
      background: maroon;

      &::after {
        content: '>';
        margin-left: 12px;
      }
    }
  }
}

Just like the pseudo-classes, we can also nest pseudo-elements. In this example we're defining hover styles for the a element that's a child of the footer. We're also defining styles for the ::after pseudo-element of the a element while it's being hovered. Feel free to play around with the example above to see the result.

Nesting `@media` queries

article.card {
  /* ... */

  @media (min-width: 768px) {
    /* ... */
  }
}

We can also nest @media queries. This is a great way to keep the styles for a specific breakpoint in one place. This way we can easily find and update them if needed.

The `&` symbol

As mentioned in the previous examples, the & symbol is used to indicate where the parent selector should be placed. This gives us more control over the final selector, and if needed, we can also completely rearrange the whole context. Let's see some examples:

a {
  &:hover {
    /* a:hover */
  }

  :hover {
    /* a :hover */
  }
}

In this example we can see the different output when we use the & symbol and when we don't. In cases where we want to define pseudo-classes for the parent selector, we'd need to use the & symbol. Otherwise, CSS will add the parent selector in front of the pseudo-class.

Since the & symbol is just a placeholder for the parent selector, we can also use it multiple times in the same selector, and flip the context completely:

header {
  & h2 {
    /* header h2 */
  }

  h2 & & & {
    /* h2 header header header */
  }
}

Understanding the parser

The nesting parser is what's responsible for parsing the nested selectors. The way that the parser identifies if the selector is defining a nested style is by checking whether the selector contains one of the symbols below:

& @ : . > ~ + # [ *

You might recognize some of these symbols. Some of them are used for selectors, pseudo-classes and pseudo-elements, combinators, attribute selectors etc...

If the parser finds a nested selector that doesn't start with any of these symbols, it will fail to parse it, which will result in incorrect styles.

Conclusion

Nesting is a great feature that can help us write more maintainable CSS. It can also help us write less code since we don't need to repeat the parent selector over and over again. This is huge for CSS, and I'm excited to see all of the creative ways developers are going to come up with to use it.

DEV Community: creatures.dev

CSS Style Queries

Syntax

Combining multiple styles

Conclusion

CSS Container Queries

Containment context

Container query

Container query units

Conclusion

Getting started with CSS Nesting

What is CSS Nesting?

Nesting examples

Multi-level nesting

Nesting without the & symbol

Nesting pseudo-classes

Nesting pseudo-elements

Nesting @media queries

The & symbol

Understanding the parser

Conclusion

Nesting without the `&` symbol

Nesting `@media` queries

The `&` symbol