My objectives:
- Create a single HTML document that consolidates all my content for easier copying.
- Incorporate multiple "pages" within the document to highlight different data sections.
- Ensure seamless functionality of the browser's back button and support deep-linking capabilities.
An effective method is utilizing the :target pseudo-class to display only the relevant page (
div {display: none} :target {display: block}To enhance this approach, I envision:
- Integrating a navigation bar that indicates the current page.
- Implementing a main page display when there is no fragment identifier in the URL (
#).
I have devised a solution using empty divs and sibling selectors. The target element (ID provided in the URL fragment) is denoted as an empty div called target, and CSS rules are applied accordingly (
#target1 ~ #page1 { ... } #target1 ~ #link1 { ... }Despite its effectiveness, this solution presents three challenges:
- Each page requires a separate selector in the CSS, complicating maintenance with numerous pages.
- The back button operates smoothly on Chrome and Firefox, but Edge may not support this technique completely (other browsers untested). Speculation arises due to ambiguities in regarding
:targetbehavior with the back button (refer also to this Webkit bug). - A sense of abusing the system lingers as indicated by the question title.
Hence, I am inquiring if there exists a more efficient methodology for achieving my goals. Preferably without relying on JavaScript to maintain clear deep-linking functionality.