diff --git a/cli/engine/browser/injected/index.mjs b/cli/engine/browser/injected/index.mjs index 79777f843..f1e90178e 100644 --- a/cli/engine/browser/injected/index.mjs +++ b/cli/engine/browser/injected/index.mjs @@ -1321,6 +1321,13 @@ if (IS_BROWSER) { try { return CSS.supports(condition); } catch { return true; } } + if (constructorName === 'CSSContainerRule' || /^\s*@container\b/i.test(rule?.cssText || '')) { + // The platform exposes no matchMedia-equivalent for container queries, + // and selector matches do not prove that the element's query container + // satisfies the condition. Omit the group rather than report styles that + // are inactive for the current layout. + return false; + } return true; } diff --git a/cli/engine/detect-antipatterns-browser.js b/cli/engine/detect-antipatterns-browser.js index 3b8295832..d882944c1 100644 --- a/cli/engine/detect-antipatterns-browser.js +++ b/cli/engine/detect-antipatterns-browser.js @@ -8225,6 +8225,13 @@ if (IS_BROWSER) { try { return CSS.supports(condition); } catch { return true; } } + if (constructorName === 'CSSContainerRule' || /^\s*@container\b/i.test(rule?.cssText || '')) { + // The platform exposes no matchMedia-equivalent for container queries, + // and selector matches do not prove that the element's query container + // satisfies the condition. Omit the group rather than report styles that + // are inactive for the current layout. + return false; + } return true; } diff --git a/tests/detect-antipatterns-browser.test.mjs b/tests/detect-antipatterns-browser.test.mjs index 3a54834ba..bc814115d 100644 --- a/tests/detect-antipatterns-browser.test.mjs +++ b/tests/detect-antipatterns-browser.test.mjs @@ -1405,6 +1405,11 @@ describe('detectUrl — browser-only fixtures', () => { }))); const linkedFindings = await linkedPage.evaluate(() => window.impeccableDetect({ serialize: true }) .flatMap(group => group.findings || [])); + const inactiveContainerBackground = await linkedPage.$eval( + '.inactive-container-stripes', + element => getComputedStyle(element).backgroundImage, + ); + assert.equal(inactiveContainerBackground, 'none'); const grids = linkedFindings.filter(finding => finding.type === 'codex-grid-background'); assert.equal(grids.length, 1, JSON.stringify({ linkedFindings, linkedCssom })); assert.equal(grids[0].severity, 'advisory'); diff --git a/tests/fixtures/antipatterns/linked-url-patterns.css b/tests/fixtures/antipatterns/linked-url-patterns.css index 30f8e942c..a5cffc1fd 100644 --- a/tests/fixtures/antipatterns/linked-url-patterns.css +++ b/tests/fixtures/antipatterns/linked-url-patterns.css @@ -40,6 +40,17 @@ main > ::before { } } +.container-query-host { + container-type: inline-size; + width: 240px; +} + +@container (width > 900px) { + .inactive-container-stripes { + background: repeating-linear-gradient(45deg, #eee, #eee 10px, #fafafa 10px, #fafafa 20px); + } +} + .unused-linked-transition { transition: width 200ms ease; } diff --git a/tests/fixtures/antipatterns/linked-url-patterns.html b/tests/fixtures/antipatterns/linked-url-patterns.html index 7d83662e0..7c1cfbe2c 100644 --- a/tests/fixtures/antipatterns/linked-url-patterns.html +++ b/tests/fixtures/antipatterns/linked-url-patterns.html @@ -11,6 +11,9 @@