Making a page CSS and non-CSS compatible - ♺ ∙ Web Crafting Materials

Most of the pages on my site don't currently use CSS because HTML is enough. But a few pages have a sidebar that looks terrible with CSS disabled (only ever an issue if you use a browser like Links), so i'm trying to make pages that can look good with CSS enabled or disabled. Since my use case here is a sidebar, that's what i'm focused on.

One thing i tried was moving the sidebar to a new document and embedding it with an iframe, which i thought would let me put it next to the body of a page without relying on CSS divs. This did not work. It is possible to get the iframe to stay in the right place on the page without using CSS to position it, but i can't make it run the whole height of the page without using CSS because adjusting the iframe's height with relative units bases those units on the frame rather than the parent page.

Putting the iframe inside a table (with the page body in an adjacent cell) works alright. It still won't scroll with the page and the iframe border can't be disabled without CSS, but it's functional. Unless the sidebar contains links to parts of the parent page. I would demonstrate this but i don't know how to make a functional iframe in Codepen.

I figured if i can't make a single page that works with and without CSS (and the non-CSS version is going to be ugly anyway) i can make the page switch to a non-CSS version if CSS is disabled. Disabling the plain HTML version with CSS is easy enough. I can just put it all in <div style="display:none;">. Disabling the CSS styled part of the page when CSS is disabled is a bit harder. I thought at first i'd have to do something like <font color="(background color)" style="font-color:black"> to hide the text with HTML and then show it again with CSS. That runs into trouble with links still being underlined.

Then i thought i could ignore things like text color and use <details> to hide the CSS version of the page. This might work if <details> could be collapsed with CSS disabled, but it didn't collapse when i tested it in Firefox or Links2. If that had worked, the next step would have been finding a way to make the details expand when the page loads using CSS instead of HTML, so it's still collapsed without CSS.

Finally i found out about the global hidden attribute. I can put the entire CSS version of a page in <div hidden style="display:initial;">. HTML hides it and CSS shows it. And that works in Firefox with CSS disabled, but not in Links2 and i don't really know why.

All this to say, i tried and i think i got close. Maybe this will be useful to someone else, but i'll probably stick with assuming everyone who uses the internet can see CSS right.