使用@document而不使用JS的SPA路由

Question

CSS（第4级）@document规则是否支持包含#符号的URL或包含URL查询参数？

For those not familiar

我知道，除带有@-moz-document前缀的Firefox之外，所有浏览器均不支持此功能。如果确实最终进入了其他浏览器，则似乎可以最终允许仅CSS SPA路由（即使禁用了JS）。如果没有人对此进行测试，我将在本周末进行实验。

例如

@document url("https://www.site.example/#/page-1/") {
    .page-2 {
        display: none;
    }
}

@document url("https://www.site.example/#/page-2/") {
    .page-1 {
        display: none;
    }
}

我认为也许可以为React / Gatsby或其他静态生成的站点的CSS回退创建一个构建工具，否则即使没有<noscript>后退也可能由于缺乏路由而导致糟糕的体验

Answer 1

确定，对此进行了测试。由于@document没有以URL更改的方式更新，因此无法工作，就像@media不断检查屏幕尺寸更改的方式一样。如果确实进入规范，我希望这种行为有可能改变。

@document 确实在URL中看到了#和?，但是此时需要刷新才能看到效果。