{ "caniuse": [ "css-container-queries-style" ], "compat_features": [ "css.at-rules.container.style_queries_for_custom_properties" ], "description": "Container style queries with the @container at-rule apply styles to an element based on the values of custom properties of its container.", "description_html": "Container style queries with the @container at-rule apply styles to an element based on the values of custom properties of its container.", "group": [ "container-queries" ], "kind": "feature", "name": "Container style queries", "spec": [ "https://drafts.csswg.org/css-conditional-5/#style-container" ], "status": { "baseline": "low", "baseline_low_date": "2026-05-19", "by_compat_key": { "css.at-rules.container.style_queries_for_custom_properties": { "baseline": "low", "baseline_low_date": "2026-05-19", "support": { "chrome": "111", "chrome_android": "111", "edge": "111", "firefox": "151", "firefox_android": "151", "safari": "18", "safari_ios": "18" } } }, "support": { "chrome": "111", "chrome_android": "111", "edge": "111", "firefox": "151", "firefox_android": "151", "safari": "18", "safari_ios": "18" } }, "id": "container-style-queries", "groups": [ "container-queries" ], "specs": [ { "url": "https://drafts.csswg.org/css-conditional-5/#style-container", "seriesComposition": "delta", "shortname": "css-conditional-5", "series": { "shortname": "css-conditional", "currentSpecification": "css-conditional-3", "title": "CSS Conditional Rules", "shortTitle": "CSS Conditional", "releaseUrl": "https://www.w3.org/TR/css-conditional/", "nightlyUrl": "https://drafts.csswg.org/css-conditional/" }, "seriesVersion": "5", "shortTitle": "CSS Conditional 5", "seriesPrevious": "css-conditional-4", "organization": "W3C", "groups": [ { "name": "Cascading Style Sheets (CSS) Working Group", "url": "https://www.w3.org/groups/wg/css/" } ], "release": { "url": "https://www.w3.org/TR/css-conditional-5/", "status": "Working Draft", "filename": "Overview.html" }, "nightly": { "url": "https://drafts.csswg.org/css-conditional-5/", "status": "Editor's Draft", "alternateUrls": [ "https://w3c.github.io/csswg-drafts/css-conditional-5/" ], "repository": "https://github.com/w3c/csswg-drafts", "sourcePath": "css-conditional-5/Overview.bs", "filename": "index.html" }, "title": "CSS Conditional Rules Module Level 5", "source": "w3c", "categories": [ "browser" ], "standing": "good", "tests": { "repository": "https://github.com/web-platform-tests/wpt", "testPaths": [ "css/css-conditional" ] }, "fragment": "style-container" } ], "mdnUrls": [ { "slug": "Web/CSS/Reference/At-rules/@container#container_style_queries", "title": "`@container` CSS at-rule", "anchor": "container_style_queries", "url": "https://developer.mozilla.org/docs/Web/CSS/Reference/At-rules/@container#container_style_queries" } ], "standardPositions": [ { "vendor": "mozilla", "url": "https://github.com/mozilla/standards-positions/issues/686", "position": "positive", "concerns": [] }, { "vendor": "apple", "url": "https://github.com/WebKit/standards-positions/issues/57", "position": "support", "concerns": [] } ], "hasNegativeStandardPosition": false, "stateOfSurveys": [ { "name": "State of CSS 2026", "url": "https://2026.stateofcss.com/en-US/usage/#favorite_new_features", "question": "usage", "subQuestion": "favorite_new_features", "path": "dataAPI.surveys.state_of_css.css2026.usage.favorite_new_features.freeform.allEditions.1.buckets.18.entity" }, { "name": "State of CSS 2026", "url": "https://2026.stateofcss.com/en-US/usage/#css_interoperability_features", "question": "usage", "subQuestion": "css_interoperability_features", "path": "dataAPI.surveys.state_of_css.css2026.usage.css_interoperability_features.freeform.allEditions.0.buckets.5.entity" }, { "name": "State of CSS 2026", "url": "https://2026.stateofcss.com/en-US/features/#reading_list", "question": "reading_list", "subQuestion": "reading_list", "path": "dataAPI.surveys.state_of_css.css2026.reading_list.reading_list.combined.allEditions.0.buckets.15.entity" }, { "name": "State of CSS 2026", "url": "https://2026.stateofcss.com/en-US/layout/#layout_pain_points_features", "question": "layout", "subQuestion": "layout_pain_points_features", "path": "dataAPI.surveys.state_of_css.css2026.layout.layout_pain_points_features.freeform.allEditions.0.buckets.11.entity" }, { "name": "State of CSS 2026", "url": "https://2026.stateofcss.com/en-US/_all_features/#all_features", "question": "_all_features", "subQuestion": "all_features", "path": "dataAPI.surveys.state_of_css.css2026._all_features.all_features.7.entity" }, { "name": "State of CSS 2025", "url": "https://2025.stateofcss.com/en-US/usage/#css_interoperability_features", "question": "usage", "subQuestion": "css_interoperability_features", "path": "dataAPI.surveys.state_of_css.css2025.usage.css_interoperability_features.freeform.allEditions.0.buckets.16.entity" }, { "name": "State of CSS 2025", "url": "https://2025.stateofcss.com/en-US/features/#reading_list", "question": "reading_list", "subQuestion": "reading_list", "path": "dataAPI.surveys.state_of_css.css2025.reading_list.reading_list.combined.allEditions.0.buckets.11.entity" }, { "name": "State of CSS 2025", "url": "https://2025.stateofcss.com/en-US/features/#all_features", "question": "features", "subQuestion": "all_features", "path": "dataAPI.surveys.state_of_css.css2025.features.all_features.8.entity" }, { "name": "State of CSS 2024", "url": "https://2024.stateofcss.com/en-US/usage/#css_interoperability_features", "question": "usage", "subQuestion": "css_interoperability_features", "path": "dataAPI.surveys.state_of_css.css2024.usage.css_interoperability_features.freeform.currentEdition.buckets.16.entity" }, { "name": "State of CSS 2024", "url": "https://2024.stateofcss.com/en-US/features/#reading_list", "question": "reading_list", "subQuestion": "reading_list", "path": "dataAPI.surveys.state_of_css.css2024.reading_list.reading_list.responses.currentEdition.buckets.11.entity" }, { "name": "State of CSS 2024", "url": "https://2024.stateofcss.com/en-US/features/#all_features", "question": "features", "subQuestion": "all_features", "path": "dataAPI.surveys.state_of_css.css2024.features.all_features.8.entity" } ], "chromeUseCounters": { "percentageOfPageLoad": 0.00390262, "url": "https://chromestatus.com/metrics/webfeature/timeline/popularity/20" }, "interop": [ { "year": 2026, "label": "interop-2026-container-style-queries", "url": "https://wpt.fyi/interop-2026?feature=interop-2026-container-style-queries" } ], "wpt": { "url": "https://wpt.fyi/results?q=feature:container-style-queries" }, "developerSignals": null, "bugs": { "firefox": [ "https://bugzil.la/1795622" ], "chrome": [ "https://crbug.com/1442183", "https://crbug.com/1302630", "https://crbug.com/40217044" ], "chrome_android": [ "https://crbug.com/40217044" ], "edge": [ "https://crbug.com/40217044" ], "oculus": [ "https://crbug.com/40217044" ], "opera": [ "https://crbug.com/40217044" ], "opera_android": [ "https://crbug.com/40217044" ], "samsunginternet_android": [ "https://crbug.com/40217044" ], "webview_android": [ "https://crbug.com/40217044" ] }, "useCases": null, "baselineLowDateAsObject": "2026-05-19T00:00:00.000Z", "baselineHighDateAsObject": null, "expectedBaselineHighDate": "2028-11-19" }