DEV Community

loading...
Cover image for Simulate single page app using CSS selector (:target)

Simulate single page app using CSS selector (:target)

mohamedfarids profile image mohamed farid Updated on ・2 min read

hack the idea of SPA using :target css selector (it is a funny idea more than for actual use ) preview

why target selector, because it is the only selector that can understand the URL.

the target selector refers to the element with the id matches
the URL hash

the idea is to give every page id and hide all pages except the current target page

and you can still navigate between pages without javascript
or refresh the page as normal

to hide all pages except the target page

 .page:not(:target) {
   display: none;
 }

Enter fullscreen mode Exit fullscreen mode

put nav to be fixed in all pages

<nav>
  <a href="#home">Home</a>
  <a href="#about">About</a>
  <a href="#contact">Contact</a>
  <a href="#posts">Posts</a>
</nav>
Enter fullscreen mode Exit fullscreen mode

create pages that will be affected

<div class="page home" id="home">Home</div>
<div class="page about" id="about">about</div>
<div class="page posts" id="home">posts</div>
Enter fullscreen mode Exit fullscreen mode

if the URL does not have hash push to the home page

if (window.location.hash === "") {
  window.location.hash = "#home";
}
Enter fullscreen mode Exit fullscreen mode

to listen to the page change

window.addEventListener("hashchange", (e) => {
});
Enter fullscreen mode Exit fullscreen mode

as example, if you went to get posts

window.addEventListener("hashchange", (e) => {
  if (location.hash === "#posts") {
    fetch("https://sitetogetposts/posts")
      .then((res) => res.json())
      .then(setPosts)
      .catch(handleError);
  }
});
Enter fullscreen mode Exit fullscreen mode

you can check the full example here

In the end, maybe it is not the optimal solution and The id attribute specifies a unique id for an HTML element not the whole page, but it is work and it is fast you just need two js lines and CSS too, can be used to build Demo or simple app

Any feedback is appreciated 🤝

Discussion (7)

pic
Editor guide
Collapse
mrdanielschwarz profile image
Daniel Schwarz

It's bad for SEO and it's also a lot of code for something that the browser already offers. What's the point?

Collapse
mohamedfarids profile image
mohamed farid Author • Edited

use hash in the URl to style,
build Demo with a few lines of code.

it is a way and you can use it in the right position

Collapse
mrdanielschwarz profile image
Daniel Schwarz

What's a good scenario to use it? I can't think of any positives, only negatives.

Thread Thread
matjones profile image
Mat Jones

Yeah it also means you have to send fully hydrated renders for every page in the entire app for it to work properly

Collapse
dennisfrijlink profile image
Dennis Frijlink

I don't think this is the best solution for a SPA but I like the idea and the simplicity!

Collapse
darcdev profile image
Diego Andres Rojas

Thanks bro, that method give me other ideas. 😁

Collapse
mohamedfarids profile image
mohamed farid Author

you're welcome ♥