Recommended Free Tools
A site can offer radically different designs at the same address by choosing which page to serve before it reaches the browser. In the implementation described by the author of taranity.com, seven complete design trees are prebuilt, a cookie records the visitor’s selection, and a Cloudflare Pages Function uses that cookie to serve the matching HTML at the canonical URL. This is a first-person project account, not an independently verified deployment or performance study.
How can a site change its design without changing its URL?
Keep the address stable and vary the response. The author describes a static Astro build containing seven design trees with the same content but different typography, page structures, and motion. The build reportedly prerenders 70 pages. At request time, a visitor’s cookie identifies the selected design, and a Cloudflare Pages Function chooses the corresponding prebuilt HTML before sending the page.
As an Amazon Associate I earn from qualifying purchases.
Because the choice is made before delivery, the browser receives one selected design rather than first rendering a default design and then switching styles. The author presents avoiding that browser-side flash as a benefit. The URL itself does not need to encode the design: it remains the canonical address, while the cookie carries the preference.
Free tools Windows power users keep installed
One-click scans. No signup required.
How does this compare with switching styles in the browser?
There are several ways to make a site look different. The right choice depends on whether the differences are mostly visual styling or extend to page structure, and on the project’s build and caching setup.
| Approach | How the choice is represented | What changes | Main consideration |
|---|---|---|---|
| Client-side stylesheet or class switching | A stylesheet choice or document class in the browser | CSS presentation, such as colors, typography, and layout | MDN documents linked stylesheets and alternate stylesheets as browser options for controlling a site’s look and feel. This is a platform option, not the approach the author says this project uses. MDN: the link element and MDN: the CSS cascade. |
| Prebuilt HTML selected before delivery | A cookie read by an edge function | The server selects a complete prebuilt page variant | The author says visitors receive only the selected design and avoid a browser-side flash. The tradeoffs include building every variant and handling cookie-sensitive caching carefully. Author’s project account on DEV Community. |
| Query-parameter selection | A value in the URL query string | Whatever response the site implements for that parameter | MDN explains that query components are interpreted according to the resource; a server may use parameters to modify its response. This is a general alternative, not the mechanism described for this project. MDN: URI query component. |
A client-side stylesheet switch is a natural fit when the page structure stays essentially the same and only presentation changes. Serving complete HTML variants can accommodate larger structural differences, but multiplies the build outputs and makes request handling more involved. These are architectural tradeoffs, not measured results: the project account does not provide independent comparative performance data.
Why does cookie-based design selection complicate caching?
Two requests for the same URL may need different HTML if their cookies represent different design choices. A cache that ignores that distinction could return one visitor’s variant to another visitor. The author says the implementation uses Vary: Cookie and marks the responses private to account for the preference.
Those headers and the surrounding cache configuration must match the actual deployment. Cookie-sensitive responses can reduce the usefulness of shared caching, and a variation rule does not help if an upstream cache is configured to ignore it. The project’s explanation identifies the risk; it does not establish a general cache configuration that is safe for every hosting setup.
What did the author report about testing?
The author reports 411 tests across 29 files. They also describe a clean-checkout type-checking failure because generated content types did not yet exist, addressed with an explicit declaration. This illustrates a dependency-order issue in that project: generated artifacts may be needed before checks can run in a fresh environment.
The author also reports that end-to-end contact tests fell from 75 of 75 to 42 of 75 when a third-party Turnstile challenge failed despite a published dummy key. The described response was to use a stand-in test value and make the limitation visible. These are incidents from one project, not evidence about how commonly such failures occur.
Independent reader supportYour contribution helps us test, update, and keep practical guides available for everyone.What does the accessibility result establish?
The author reports an audit with 50 checks and zero violations. The same account says the audit was not independent, did not include screen-reader testing, and ran on the author’s machine rather than automatically. It is therefore a bounded self-reported check, not proof that all seven designs are accessible or that they remain so as the site changes.
When a site has multiple complete designs, accessibility needs consideration across each variant. A result for a limited set of checks cannot establish how assistive technologies handle every page, interaction, or motion choice. The account does not report screen-reader results.
When is this architecture a sensible choice?
Consider prebuilt variants selected before delivery when the designs genuinely differ in structure and you can account for the added build outputs and cache behavior. Before adopting it, evaluate:
- How much the variants differ beyond CSS styling.
- Whether building and deploying every variant is manageable as content grows.
- How the preference is stored and how caches distinguish responses.
- Whether each design can be checked for accessibility, including with assistive technologies.
- Whether the project benefits from delivering the chosen design immediately, compared with the extra server-side and caching complexity.
The taranity.com account shows one way to keep the visible address canonical while selecting among complete designs. It does not establish that edge selection is faster or better than client-side styling for other sites; that depends on the site’s own build size, cache architecture, content model, and accessibility behavior.
Quick Recap
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
