Entire website in a single HTML file (css-tricks.com)

Article summary

The article discusses a website that is contained within a single HTML file, using CSS to show and hide different sections of the page. This is achieved through the use of the :target pseudo selector, which allows the website to display different content without the need for JavaScript. The website appears to be a standard multi-page site, but all the content is loaded at once, which can be a drawback for mobile users or those with slow internet connections. The technique used is not new, but it is still an interesting example of what can be done with HTML and CSS.

Main themes

• single-file websites
• CSS-only development
• JavaScript alternatives
• web development trade-offs
• responsive design
• virtual textbooks
• single-page applications
• web performance optimization

What commenters say

• The technique used in the website is not new and has been done before with JavaScript.
• The use of a single HTML file can be beneficial for small projects or documentation, but may not be suitable for larger sites.
• Some commenters are impressed by the simplicity and speed of the website, while others are concerned about the potential drawbacks, such as increased load times for mobile users.
• The concept of a single-file site or application is not the same as a single-page application, which typically relies on JavaScript.
• The use of CSS to create a multi-page site without JavaScript is seen as a clever trick, but some commenters are unsure of its practical applications.
• The discussion highlights the trade-offs between different approaches to web development, including the use of JavaScript, CSS, and single-page applications.
• Some commenters suggest that the technique used in the website could be useful for certain types of content, such as virtual textbooks or documentation.
• Others argue that the limitations of the approach, such as the lack of support for responsive layouts in PDFs, make it less suitable for certain use cases.