- CSS Tutorial
- CSS - Home
- CSS - Introduction
- CSS - Syntax
- CSS - Selectors
- CSS - Inclusion
- CSS - Measurement Units
- CSS - Colors
- CSS - Backgrounds
- CSS - Fonts
- CSS - Text
- CSS - Images
- CSS - Links
- CSS - Tables
- CSS - Borders
- CSS - Border Block
- CSS - Border Inline
- CSS - Margins
- CSS - Lists
- CSS - Padding
- CSS - Cursor
- CSS - Outlines
- CSS - Dimension
- CSS - Scrollbars
- CSS - Inline Block
- CSS - Dropdowns
- CSS - Visibility
- CSS - Overflow
- CSS - Clearfix
- CSS - Float
- CSS - Arrows
- CSS - Resize
- CSS - Quotes
- CSS - Order
- CSS - Position
- CSS - Hyphens
- CSS - Hover
- CSS - Display
- CSS - Focus
- CSS - Zoom
- CSS - Translate
- CSS - Height
- CSS - Hyphenate Character
- CSS - Width
- CSS - Opacity
- CSS - Z-Index
- CSS - Bottom
- CSS - Navbar
- CSS - Overlay
- CSS - Forms
- CSS - Align
- CSS - Icons
- CSS - Image Gallery
- CSS - Comments
- CSS - Loaders
- CSS - Attr Selectors
- CSS - Combinators
- CSS - Root
- CSS - Box Model
- CSS - Counters
- CSS - Clip
- CSS - Writing Mode
- CSS - Unicode-bidi
- CSS - min-content
- CSS - All
- CSS - Inset
- CSS - Isolation
- CSS - Overscroll
- CSS - Justify Items
- CSS - Justify Self
- CSS - Tab Size
- CSS - Pointer Events
- CSS - Place Content
- CSS - Place Items
- CSS - Place Self
- CSS - Max Block Size
- CSS - Min Block Size
- CSS - Mix Blend Mode
- CSS - Max Inline Size
- CSS - Min Inline Size
- CSS - Offset
- CSS - Accent Color
- CSS - User Select
- CSS Advanced
- CSS - Grid
- CSS - Grid Layout
- CSS - Flexbox
- CSS - Visibility
- CSS - Positioning
- CSS - Layers
- CSS - Pseudo Classes
- CSS - Pseudo Elements
- CSS - @ Rules
- CSS - Text Effects
- CSS - Paged Media
- CSS - Printing
- CSS - Layouts
- CSS - Validations
- CSS - Image Sprites
- CSS - Important
- CSS - Data Types
- CSS3 Tutorial
- CSS3 - Tutorial
- CSS - Rounded Corner
- CSS - Border Images
- CSS - Multi Background
- CSS - Color
- CSS - Gradients
- CSS - Box Shadow
- CSS - Box Decoration Break
- CSS - Caret Color
- CSS - Text Shadow
- CSS - Text
- CSS - 2d transform
- CSS - 3d transform
- CSS - Transition
- CSS - Animation
- CSS - Multi columns
- CSS - Box Sizing
- CSS - Tooltips
- CSS - Buttons
- CSS - Pagination
- CSS - Variables
- CSS - Media Queries
- CSS - Functions
- CSS - Math Functions
- CSS - Masking
- CSS - Shapes
- CSS - Style Images
- CSS - Specificity
- CSS - Custom Properties
- CSS Responsive
- CSS RWD - Introduction
- CSS RWD - Viewport
- CSS RWD - Grid View
- CSS RWD - Media Queries
- CSS RWD - Images
- CSS RWD - Videos
- CSS RWD - Frameworks
- CSS References
- CSS - Questions and Answers
- CSS - Quick Guide
- CSS - References
- CSS - Color References
- CSS - Web browser References
- CSS - Web safe fonts
- CSS - Units
- CSS - Animation
- CSS Resources
- CSS - Useful Resources
- CSS - Discussion
CSS - @container
The @container at-rule in CSS is a conditional group rule that is useful in applying styles to the content that is in a container.
Overview
The style defined for the containment context is applied, when the condition specified is true.
The evaluation of the condition takes place when the size of the container changes.
container-name can be provided to filter the set of query containers to find a matching query container name. It is case-sensitive and optional.
After a valid query container is found, each container feature in the <container-condition> gets evaluated against that query container.
Syntax
@container <container-condition> { <stylesheet> }
Possible Values
The @container at-rule can have following values:
<container-condition>: Lists a set of features that get evaluated against the query container, as the size of the container changes.
<stylesheet>: Contains set of CSS declarations.
CSS @container - Logical keywords in container queries
Following logical keywords can be used to define the container condition:
and: used to combine two or more conditions.
or: used to combine two or more conditions.
not: used to negate the condition. Just one condition is permitted per container query and can not be used with the and or or keywords.
Refer the sample examples for more understanding.
@container (width > 200px) and (height > 200px) { /* <stylesheet> */ } @container (width > 200px) or (height > 200px) { /* <stylesheet> */ } @container not (width < 200px) { /* <stylesheet> */ }
CSS @container - Named Containment Contexts
A context that is contained can be named using the container-name property, in the following manner:
.test-container { container-name: sidebar; container-type: inline-size; }
In case you want to use the shorthand container for container: <name> / <type>, follow the syntax like this:
.test-container { container: sidebar / inline-size; }
CSS @container - Naming Restrictions For container-name
Following conditions are applied to define a <container-name>:
Any valid <custom-ident> can be used in the name.
It should not be equal to default.
The defined name should not be placed in quotes.
The dashed ident specifiying the name of the author in the identifier, such as --container-name, is allowed.
Multiple names separated by a space is permitted.
Example
Here is an example for the @container at-rule.
<html> <head> <style> * { box-sizing: border-box; } img { max-width: 500px; height: 400px; display: block; } body { font-size: 1.5em; } .wrapper { display: grid; grid-template-columns: 2fr 1fr; gap: 30px; } .card { background: black; color: white; border-radius: 40px; display: grid; max-width:400px; } .card .image { border-radius: 40px; } .card .content { padding: 10px; } .card h2 { margin: 0; padding: 10px; } /* make the two grid items a containment context */ .first, .second{ container-type: inline-size; } /* the card is placed as a child of the two grid items, displaying as one or two columns */ @container (min-width: 500px) { .card { grid-template-columns: 1fr 2fr; grid-template-rows: auto 1fr; align-items: start; column-gap: 20px; max-width:80%; } .card h2 { padding: 0; margin: .5em 0 0 0; } .card header { grid-row: 1; grid-column: 2; } .card .image { grid-row: 1 /3; grid-column: 1; height:100%; } .card .content { grid-column: 2; grid-row: 2; padding: 0 20px 20px 0; } } </style> </head> <body> <div class="wrapper"> <div class="second"> <article class="card"> <header> <h2>@container</h2> </header> <div class="image"><img src="images/red-flower.jpg"></div> <div class="content"> <p>@container rule applied on the card which makes it responsive when size of the container is changed</p> </div> </article> </div> <div class="first"> <article class="card"> <header> <h2>@container</h2> </header> <div class="image"><img src="images/red-flower.jpg"></div> <div class="content"> <p>@container rule applied on the card which makes it responsive when size of the container is changed</p> </div> </article> </div> </div> </body> </html>
In the above example:
container-type property is set to inline-size, as the containment should happen on the inline axis.
The container-type property is set on a class called .first class, which makes the container element as queryable container.
.card is contained in the <article> element, on which @container at-rule is applied, hence whenever the containing element's size changes, the card changes.
A breakpoint is created at a min-width of 500px, so when the container is at min-width of 500px, the card looks like as in the example.
As the condition changes, the card will appear differently.
Container queries let us create more powerful and reusable components that can adjust to nearly any layout and container, making the web page more responsive.
Descriptors or related properties
The table given below lists all the descriptors related to @container:
Descriptor / Property | Description |
---|---|
aspect-ratio | Defines the desired width-to-height ratio of an element's box. |
block-size | Defines the horizontal or vertical size of an element's block, depending on its writing mode. Relates to the width of the element. |
height | Sets the height of the element's box. |
inline-size | Defines the horizontal or vertical size of an element's block, depending on its writing mode. Relates to the height of the element. |
orientation | Defines the orientation of the viewport. |
width | Sets the width of the element's box. |
To Continue Learning Please Login
Login with Google