CSS Container Style Queries in Practice

CSS Container Style Queries represent a powerful evolution in responsive design, allowing components to adapt based on their container's properties rather than just viewport dimensions. Let's explore how to implement these queries effectively in your projects.

Understanding Container Style Queries

Container Style Queries allow you to query the computed style values of a container element and apply styles to its descendants based on those values. This enables truly modular, context-aware components.

Basic Setup

First, define a containment context:

.card-container {
    container-type: inline-size;
    container-name: card;
}

Simple Style Query

Create a basic style query:

@container style(--theme: dark) {
    .card {
        background: #333;
        color: white;
    }
}

Practical Applications

Theme-Aware Components

Create components that respond to parent theme changes:

.theme-container {
    container-type: inline-size;
    container-name: theme;
    --theme: light;
}

.dark-mode {
    --theme: dark;
}

@container theme style(--theme: dark) {
    .button {
        background: #333;
        color: white;
    }
}

Layout Adaptations

Adjust layouts based on container properties:

.grid-container {
    container-type: inline-size;
    container-name: grid;
    --columns: 1;
}

@container grid style(--columns >= 2) {
    .grid-item {
        flex: 0 0 calc(50% - 1rem);
    }
}

Advanced Techniques

Combining with Container Queries

Use both size and style queries together:

.responsive-card {
    container-type: inline-size;
    container-name: card;
    --card-style: compact;
}

@container card (min-width: 400px) and style(--card-style: compact) {
    .card-content {
        display: flex;
        gap: 1rem;
    }
}

Dynamic Property Queries

Query multiple properties:

.feature-container {
    container-type: inline-size;
    container-name: feature;
    --layout: stack;
    --spacing: compact;
}

@container feature style(--layout: stack) and style(--spacing: compact) {
    .feature-item {
        margin-bottom: 0.5rem;
    }
}

Real-World Examples

Card Component

Create an adaptive card component:

.card-wrapper {
    container-type: inline-size;
    container-name: card;
    --card-variant: default;
}

.card {
    padding: 1rem;
    border-radius: 8px;
}

@container card style(--card-variant: featured) {
    .card {
        padding: 2rem;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    }

    .card-title {
        font-size: 1.5rem;
        margin-bottom: 1rem;
    }
}

Navigation Menu

Implement an adaptive navigation:

.nav-container {
    container-type: inline-size;
    container-name: nav;
    --nav-style: expanded;
}

@container nav style(--nav-style: compact) {
    .nav-items {
        flex-direction: column;
        gap: 0.5rem;
    }

    .nav-link {
        padding: 0.5rem;
    }
}

Best Practices

Performance Considerations

• Use containment contexts judiciously
• Avoid deep nesting of containers
• Consider reflow implications
• Test performance on various devices

Maintainability

• Use meaningful container names
• Document style query dependencies
• Keep queries focused and specific
• Use CSS custom properties for values

Progressive Enhancement

.component {
    /* Base styles */
    padding: 1rem;

    /* Container setup */
    container-type: inline-size;
    container-name: component;

    @supports (container-type: inline-size) {
        /* Container-specific enhancements */
    }
}

Common Patterns

Responsive Typography

Implement context-aware typography:

.text-container {
    container-type: inline-size;
    container-name: text;
    --text-size: normal;
}

@container text style(--text-size: large) {
    .heading {
        font-size: 2rem;
        line-height: 1.2;
    }

    .body-text {
        font-size: 1.125rem;
        line-height: 1.6;
    }
}

Adaptive Spacing

Create context-aware spacing:

.spacing-container {
    container-type: inline-size;
    container-name: spacing;
    --density: normal;
}

@container spacing style(--density: compact) {
    .stack > * + * {
        margin-top: 0.5rem;
    }
}

@container spacing style(--density: comfortable) {
    .stack > * + * {
        margin-top: 1.5rem;
    }
}

Debugging and Testing

Debug Helpers

Add visual indicators for container contexts:

.debug .container {
    outline: 2px solid red;
}

.debug [style*="--theme"] {
    outline: 2px solid blue;
}

Testing Strategies

• Test across different container sizes
• Verify style query breakpoints
• Check fallback behavior
• Validate accessibility

Conclusion

CSS Container Style Queries provide a powerful tool for creating truly modular and context-aware components. Key takeaways:

• Use container queries for component-level responsiveness
• Combine style and size queries for complex adaptations
• Consider performance and maintainability
• Implement progressive enhancement
• Test thoroughly across different contexts

As browser support continues to improve, Container Style Queries will become an essential tool in modern web development, enabling more sophisticated and maintainable responsive designs.