I can’t stop thinking about this site. It looks like a pretty standard fare; a website with links to different pages. Nothing to write home about except that… the whole website is contained within a single HTML file.
What about clicking the navigation links, you ask? Each link merely shows and hides certain parts of the HTML.
<section id="home"> <!-- home content goes here -->
</section>
<section id="about"> <!-- about page goes here -->
</section>Each <section> is hidden with CSS:
section { display: none; }Each link in the main navigation points to an anchor on the page:
<a href="#home">Home</a>
<a href="#about">About</a>And once you click a link, the <section> for that particular link is displayed via:
section:target { display: block; }See that :target pseudo selector? That’s the magic! Sure, it’s been around for years, but this is a clever way to use it for sure. Most times, it’s used to highlight the anchor on the page once an anchor link to it has been clicked. That’s a handy way to help the user know where they’ve just jumped to.
Anyway, using :target like this is super smart stuff! It ends up looking like just a regular website when you click around:
Direct Link to Article — Permalink
The post A Whole Website in a Single HTML File appeared first on CSS-Tricks.
You can support CSS-Tricks by being an MVP Supporter.