{ "caniuse": [ "css-container-queries", "css-container-query-units" ], "compat_features": [ "api.CSSContainerRule", "api.CSSContainerRule.containerName", "api.CSSContainerRule.containerQuery", "css.at-rules.container", "css.properties.container", "css.properties.container-name", "css.properties.container-name.none", "css.properties.container-type", "css.properties.container-type.inline-size", "css.properties.container-type.normal", "css.properties.container-type.size", "css.types.length.container_query_length_units" ], "description": "Container size queries with the @container at-rule apply styles to an element based on the dimensions of its container.", "description_html": "Container size queries with the @container at-rule apply styles to an element based on the dimensions of its container.", "group": [ "container-queries" ], "kind": "feature", "name": "Container queries", "spec": [ "https://drafts.csswg.org/css-conditional-5/#container-queries" ], "status": { "baseline": "high", "baseline_high_date": "2025-08-14", "baseline_low_date": "2023-02-14", "by_compat_key": { "api.CSSContainerRule": { "baseline": "high", "baseline_high_date": "2025-08-14", "baseline_low_date": "2023-02-14", "support": { "chrome": "105", "chrome_android": "105", "edge": "105", "firefox": "110", "firefox_android": "110", "safari": "16", "safari_ios": "16" } }, "api.CSSContainerRule.containerName": { "baseline": "high", "baseline_high_date": "2026-03-18", "baseline_low_date": "2023-09-18", "support": { "chrome": "111", "chrome_android": "111", "edge": "111", "firefox": "110", "firefox_android": "110", "safari": "17", "safari_ios": "17" } }, "api.CSSContainerRule.containerQuery": { "baseline": "high", "baseline_high_date": "2026-03-18", "baseline_low_date": "2023-09-18", "support": { "chrome": "111", "chrome_android": "111", "edge": "111", "firefox": "110", "firefox_android": "110", "safari": "17", "safari_ios": "17" } }, "css.at-rules.container": { "baseline": "high", "baseline_high_date": "2025-08-14", "baseline_low_date": "2023-02-14", "support": { "chrome": "105", "chrome_android": "105", "edge": "105", "firefox": "110", "firefox_android": "110", "safari": "16", "safari_ios": "16" } }, "css.properties.container": { "baseline": "high", "baseline_high_date": "2025-08-14", "baseline_low_date": "2023-02-14", "support": { "chrome": "105", "chrome_android": "105", "edge": "105", "firefox": "110", "firefox_android": "110", "safari": "16", "safari_ios": "16" } }, "css.properties.container-name": { "baseline": "high", "baseline_high_date": "2025-08-14", "baseline_low_date": "2023-02-14", "support": { "chrome": "105", "chrome_android": "105", "edge": "105", "firefox": "110", "firefox_android": "110", "safari": "16", "safari_ios": "16" } }, "css.properties.container-name.none": { "baseline": "high", "baseline_high_date": "2025-08-14", "baseline_low_date": "2023-02-14", "support": { "chrome": "105", "chrome_android": "105", "edge": "105", "firefox": "110", "firefox_android": "110", "safari": "16", "safari_ios": "16" } }, "css.properties.container-type": { "baseline": "high", "baseline_high_date": "2025-08-14", "baseline_low_date": "2023-02-14", "support": { "chrome": "105", "chrome_android": "105", "edge": "105", "firefox": "110", "firefox_android": "110", "safari": "16", "safari_ios": "16" } }, "css.properties.container-type.inline-size": { "baseline": "high", "baseline_high_date": "2025-08-14", "baseline_low_date": "2023-02-14", "support": { "chrome": "105", "chrome_android": "105", "edge": "105", "firefox": "110", "firefox_android": "110", "safari": "16", "safari_ios": "16" } }, "css.properties.container-type.normal": { "baseline": "high", "baseline_high_date": "2025-08-14", "baseline_low_date": "2023-02-14", "support": { "chrome": "105", "chrome_android": "105", "edge": "105", "firefox": "110", "firefox_android": "110", "safari": "16", "safari_ios": "16" } }, "css.properties.container-type.size": { "baseline": "high", "baseline_high_date": "2025-08-14", "baseline_low_date": "2023-02-14", "support": { "chrome": "105", "chrome_android": "105", "edge": "105", "firefox": "110", "firefox_android": "110", "safari": "16", "safari_ios": "16" } }, "css.types.length.container_query_length_units": { "baseline": "high", "baseline_high_date": "2025-08-14", "baseline_low_date": "2023-02-14", "support": { "chrome": "105", "chrome_android": "105", "edge": "105", "firefox": "110", "firefox_android": "110", "safari": "16", "safari_ios": "16" } } }, "support": { "chrome": "105", "chrome_android": "105", "edge": "105", "firefox": "110", "firefox_android": "110", "safari": "16", "safari_ios": "16" } }, "id": "container-queries", "groups": [ "container-queries" ], "specs": [ { "url": "https://drafts.csswg.org/css-conditional-5/#container-queries", "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": "container-queries" } ], "mdnUrls": [ { "slug": "Web/CSS/Guides/Containment/Container_queries", "title": "CSS container queries", "anchor": null, "url": "https://developer.mozilla.org/docs/Web/CSS/Guides/Containment/Container_queries" } ], "standardPositions": [ { "vendor": "mozilla", "url": "https://github.com/mozilla/standards-positions/issues/118", "position": "positive", "concerns": [] } ], "hasNegativeStandardPosition": false, "stateOfSurveys": [ { "name": "State of HTML 2025", "url": "https://2025.stateofhtml.com/en-US/usage/#html_interoperability_features_features_only", "question": "usage", "subQuestion": "html_interoperability_features_features_only", "path": "dataAPI.surveys.state_of_html.html2025.usage.html_interoperability_features_features_only.freeform.allEditions.1.buckets.24.entity" }, { "name": "State of HTML 2025", "url": "https://2025.stateofhtml.com/en-US/performance/#performance_pain_points_limitations_1", "question": "performance", "subQuestion": "performance_pain_points_limitations_1", "path": "dataAPI.surveys.state_of_html.html2025.performance.performance_pain_points_limitations_1.freeform.allEditions.0.buckets.4.entity" }, { "name": "State of HTML 2025", "url": "https://2025.stateofhtml.com/en-US/performance/#performance_pain_points_features", "question": "performance", "subQuestion": "performance_pain_points_features", "path": "dataAPI.surveys.state_of_html.html2025.performance.performance_pain_points_features.freeform.allEditions.0.buckets.2.entity" }, { "name": "State of HTML 2025", "url": "https://2025.stateofhtml.com/en-US/performance/#performance_pain_points", "question": "performance", "subQuestion": "performance_pain_points", "path": "dataAPI.surveys.state_of_html.html2025.performance.performance_pain_points.freeform.allEditions.0.buckets.16.entity" }, { "name": "State of HTML 2024", "url": "https://2024.stateofhtml.com/en-US/usage/#html_interoperability_features", "question": "usage", "subQuestion": "html_interoperability_features", "path": "dataAPI.surveys.state_of_html.html2024.usage.html_interoperability_features.freeform.allEditions.0.buckets.17.entity" }, { "name": "State of CSS 2025", "url": "https://2025.stateofcss.com/en-US/usage/#gamechanger_feature", "question": "usage", "subQuestion": "gamechanger_feature", "path": "dataAPI.surveys.state_of_css.css2025.usage.gamechanger_feature.freeform.allEditions.0.buckets.5.entity" }, { "name": "State of CSS 2025", "url": "https://2025.stateofcss.com/en-US/usage/#favorite_new_features", "question": "usage", "subQuestion": "favorite_new_features", "path": "dataAPI.surveys.state_of_css.css2025.usage.favorite_new_features.freeform.allEditions.0.buckets.1.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.1.entity" }, { "name": "State of CSS 2025", "url": "https://2025.stateofcss.com/en-US/layout/#layout_pain_points", "question": "layout", "subQuestion": "layout_pain_points", "path": "dataAPI.surveys.state_of_css.css2025.layout.layout_pain_points.freeform.allEditions.0.buckets.16.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.7.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.7.entity" } ], "chromeUseCounters": { "percentageOfPageLoad": 0.19809235, "url": "https://chromestatus.com/metrics/webfeature/timeline/popularity/19" }, "interop": [ { "year": 2023, "label": "interop-2023-container", "url": "https://wpt.fyi/interop-2023?feature=interop-2023-container" } ], "wpt": { "url": "https://wpt.fyi/results?q=feature:container-queries" }, "developerSignals": null, "bugs": {}, "baselineLowDateAsObject": "2023-02-14T00:00:00.000Z", "baselineHighDateAsObject": "2025-08-14T00:00:00.000Z" }