使用@document 在没有 JS 的情况下进行 SPA 路由

Question

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

我知道除了带有 @-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;
    }
}

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

Answer 1

好的，测试了这个。它不起作用，因为@document 没有更新 URL 变化，就像@media 不断检查屏幕尺寸变化一样。如果它确实进入规范，我希望有可能改变这种行为。

@document 看到 URL 中的 # 和 ?，但需要刷新才能看到效果此时

使用@document 在没有 JS 的情况下进行 SPA 路由

SPA Routing Without JS Using @document

html

javascript

css

routing

single-page-application