如何为Container Style Query添加变更监听器（类比Media Queries）

问题描述 #

需求是实现类似媒体查询（Media Queries）的容器查询状态变更监听机制，替代当前基于**自定义CSS属性 + ResizeObserver + window.getComputedStyle()**的临时方案，核心目标是移除对ResizeObserver的依赖，使用原生事件监听方式。

当前临时实现的示例代码如下：

<!doctype html>
<html lang="en" data-bs-theme="auto">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="DublinDev">

    <title>Title</title>

    <style>
        .parent {
            container-type: size;
        }

        @container (min-width: 500px) {
            .child {
                --size: "Large";
                background-color: olive;
            }
        }

        @container (max-width: 499px) {
            div .child {
                --size: "Small";
                background-color: cyan;
            }
        }
    </style>
</head>

<body>
    <div id="parent" class="parent" style="width: 100%; height: 200px; border: 1px solid #ccc;">
        <div id="child" style="width: 100%; height: 100%;" class="child"></div>
    </div>

    <script>
        const parent = document.getElementById("parent");
        const child = document.getElementById("child");

        const resizeObserver = new ResizeObserver((entries) => {
            const size = window.getComputedStyle(child).getPropertyValue("--size")
            console.log(`Size: ${size}`);
        });

        resizeObserver.observe(child);
    </script>
</body>

</html>

官方方案现状 #

截至2024年，浏览器原生并未提供类似matchMedia的容器查询监听API。CSS容器查询（Container Queries）的JavaScript交互能力仍在标准化进程中，目前没有正式推出的原生事件监听机制能直接替代现有临时方案。

潜在优化方向 #

若想尽量降低ResizeObserver的依赖，可尝试以下思路：

• 结合MutationObserver监听DOM属性变化：通过容器查询触发元素自定义属性或DOM属性的变更，再用MutationObserver监听该属性的变化，避免直接监听元素尺寸。不过这种方式仍需CSS与DOM状态绑定，逻辑本质和原方案相近，但可调整监听目标为容器元素。
• 跟踪标准进展：W3C CSS工作组在CSS容器查询相关规范中正在讨论容器查询的JS API提案，未来可能会推出ContainerQueryList这类接口，支持通过addEventListener监听容器查询状态变化。

结论 #

当前没有官方原生方案能完全替代自定义属性+ResizeObserver的组合实现容器查询状态监听。若需维持现有功能，建议继续使用临时方案，同时关注CSS容器查询JS API的标准化落地。

内容的提问来源于stack exchange，提问作者user1514042