How to use @container Property in CSS ?

The @container CSS at-rule is a conditional group rule that styles a container context. A condition filters style declarations, which are applied to the container if the condition is true. The condition is evaluated whenever the container size or <style-feature> value changes.

Using @container (container-condition)

This method involves utilizing CSS’s @container rule to set criteria for picking containers based on their characteristics. These properties may comprise attributes such as container name, type, size, position, etc.

Syntax:

@container (min-width > 600px) {
    .container {
        background-color: lightblue;
    }
}

Values (container-name, container-query)

Values refers to the specific criteria or attributes used to define the conditions for container selection. For instance, `container-name` could represent the name assigned to a container element in HTML, while `container-query` could denote a specific query used to identify containers based on certain characteristics.

Using and, or, not keywords

These keywords are used in container queries to group together numerous conditions. Here’s how they are utilized:

• and: Combine many requirements, all of which must be met.
• or: Combine many requirements, any of which must be met.
• not: Exclude containers that meet a specified requirement.

Syntax:

/* Example of 'and' keyword */
@media (min-width: 600px) and (max-width: 900px) { ... }

/* Example of 'or' keyword */
@media (max-width: 600px), (min-width: 1200px) { ... }

/* Example of 'not' keyword */
@media not screen and (color) { ... }

With container-name

The container-name specifies the name of the container element.

Syntax:

/* A single name */
container-name: webLayout;

/* Global Values */
container-name: inherit | initial | revert | revert-layer | unset;

Nested Container Queries

Nested container queries involve placing one container query inside another to create more complex selection logic.

Syntax:

@container (min-width: 600px) {
    .container { ... }

    @container (min-height: 400px) {
        .container { ... }
    }
}

Browser Compatibility

• Chrome: 105
• Edge: 105
• Firefox: 110
• Opera: 91