Show HN: Create single-page applications without JavaScript

Re:Show HN: Create single-page applications without JavaScript by ianertson on Tuesday November 24, 2020 @12:52AM (#25195695)

How exactly is it faking different pages using anchors? I read your code but I can't find the logic behind it

[ Parent | on HN ]

Re:Show HN: Create single-page applications without JavaScript by joegibbs on Tuesday November 24, 2020 @03:18AM (#25196392)

It does it by this CSS:

    main > * {
        display: none;
    }

    main > *:last-child {
        display: block;
    }

    main > *:target {
        display: block;
    }

    main > *:target ~ * {
        display: none;
    }

Which hides all children of the <main> element except the last element, which is the default page. Then when an element is targeted by its ID it's displayed, otherwise it's hidden.

It saves that into a CSS file and injects that into the <head>.

[ Parent | on HN ]