Can the CSS (Level 4) @document rule handle URLs that have the # symbol or include query parameters?
For those who are not familiar with this topic
Currently, only Firefox supports this feature with the @-moz-document prefix. If other browsers start supporting it, this could potentially enable CSS-only SPA routing, even without JavaScript. I plan to experiment with this over the weekend if anyone else hasn't already.
Here is an example:
@document url("https://www.sample.site/#/page-1/") {
.page-2 {
display: none;
}
}
@document url("https://www.sample.site/#/page-2/") {
.page-1 {
display: none;
}
}
I believe a build tool could be developed for CSS fallbacks in React / Gatsby or other static sites to improve user experience when routing isn't available, even with a <noscript> fallback option.