In this section you will find some HTML and CSS tips, tricks and various assorted thoughts that I've come up with while making this webpage.
I am not a web developer so take my opinion with a grain of salt, but I believe that client-side scripting is just fundamentally a bad idea. Javascript in particular is imo an overpowered language for what it's used for, having to rely on browser sandboxing to block (not always successfully) vulnerabilities and exploits - and it saddens me to see how ubiquitous it's become. When I browse the internet, especially in a Web 1.0 context where I jump between various different low-traffic pages made by people I don't necessarily fully trust, I personally want the certainty of being presented with a document, not a program.
Sadly, due to Javascript's ubiquity certain features of HTML and CSS have been left under-developed, even if they would make sense otherwise - for instance, you should not need Javascript for basic client-side DOM manipulations such as compositing a page out of multiple HTML files. A lot of these issues are thankfully solved by PHP, but it's not a perfect solution due to the extra strain it puts on a server (besides it's not always available, f.eg. in static web hosting).
Still, even with the current state of things it is imo possible to build a beautiful and reasonably dynamic website with pure HTML and CSS - which is what I'm attempting to do here. It may take a bit of extra work and you will run into some limitations that you wouldn't have with Javascript, but for me that's honestly part of the charm. I don't exactly encourage you to do the same (as it really can get a bit troublesome), and just to be clear I certainly don't condemn anyone for using Javascript, as long as a reasonable degree of compatibility is maintained (f.eg. with a static site map to circumvent Javascript-loaded sidebars).
If you're interested in learning more, look up the concept of Progressive Enhancement, which is imo the best way to ensure gradual improvement of web development features.
When I first learned about iframes in HTML, I was both overjoyed and perplexed as to why they aren't used more - surely a way to dynamically insert more HTML into your page without Javascript would find widespread use? Unfortunately I soon learned that iframes are both limited in concept (creating a whole new browser context instead of just loading in HTML tags) and, like imo much of HTML and CSS, severely under-developed (no way to fit height to content, source link change-able only with anchors, etc).
So I went on a journey to create a better tab system, and ended with something that while limited, goes beyond just iframes and helps create a layout that is convenient, intuitive and performant (at least I hope it is for the last one, I'm not an expert in CSS performance). I've never seen tabs implemented in this way anywhere else, so I hope you will find my version helpful and/or interesting.
The whole system is a spin on the classic "checkbox hack", which allows to change CSS attributes based on whether an input tag is checked. I use radio input tags with the circle icon hidden as tab selectors, which then toggle the visibility of container elements. What separates this from other CSS tab implementations I've seen is the combination of both tab selector styling (the currently selected tab can have a different label style) and ease of use (only 1 short line above each tab container). This comes at the cost of some limitations, described in detail in the "Limitations" section below.
Aside from regular tabs (which are all loaded with the rest of the page), this system can be combined with iframes. Instead of one iframe that loads different files, you then have several iframes that you switch between - which, again at the cost of some limitations, allows you to at least simulate an iframe that dynamically adjusts its height based on content.
Due to the limitations of CSS selectors, the tabs and their content have to be in a grid layout - because the grid-row/grid-column attribute is as far as I know the only way to separate the labels from the tabs (which have to be next to each other in the DOM). To circumvent this you can separate the label tags from the input tags, but then you won't be able to make the currently selected label change style.
There is no way in HTML/CSS to scale an iframe to its contents, so you have to manually set the height of each iframe you use.
Iframe source can only be changed with an anchor, and as far as I know it isn't possible for an element to be both an anchor and a label. Therefore, separate "Load" links are necessary to actually load the iframe content after the tab has been selected. There is no way to circumvent this as without the tab system it wouldn't be possible to have different-sized iframes for each file. Personally I actually quite like this solution, as it allows the user to load multiple iframes and then jump between them without any new HTTP requests.
Radio input tags must use unique names, even across multiple tabs.
After including the stylesheet in your page, create a container element with the "tabs" class. Then, for each tab you want to create, add a label tag with a radio-type input and the tab's name inside it (remember to choose the same "name" attribute for each input tag in the same group). Immediately after each label tag, place a container with the "tab" class and your tab contents inside.
<div class="tabs"> <label><input type="radio" name="r1"/>Tab name</label> <div class="tab"> Tab content </div> </div>
In order to center horizontally-aligned tab selectors, add the custom "center-labels" attribute to your "tabs" container, and set to "true" (this will add "margins:auto" to each label inside it). Then, you must add a style attribute with "grid-template-columns", with the value 100%/n (rounded down) repeated n times (separated with spaces) where n is the number of columns in the grid. If this makes your tab selectors overflow the page's width (as it did for me once), try subtracting 1% from the last column's width.
The below example has two columns, each set to 50% width.
<div class="tabs" center-labels="true" style="grid-template-columns:50% 50%;"></div>
For vertically-aligned tabs, add a custom "grid-align" attribute to the "tabs" container and set it to "v". Then, you may add a style attribute with "grid-template-columns" set to whatever width you want your tab selector column to be, and optionally "row-gap" set to 0px to arrange the rows more neatly.
Finally, you can put the whole thing in another container with "min-height" set so the whole container doesn't jump between different heights too often (setting this property directly on the "tabs" container seems to create some problems with the row alignment).
<div style="min-height:400px"> <div class="tabs" grid-align="v" style="grid-template-columns:200px; row-gap:0px"></div> </div>
Combining this system with iframes is very simple - place an iframe in your tab contents, with two links above it that load and unload (by loading about:blank) its content. Then, set each iframe's height value manually (as mentioned earlier this is unfortunately necessary), and optionally make the first tab load automatically by giving its iframe the "src" attribute.
<a href="Tab link" target="iframe-name">Load</a> <a href="about:blank" target="iframe-name">Unload</a> <iframe name="iframe-name" height=4950px></iframe>
For an example of usage, you can simply view the source of this very page. An example with iframes and horizontal tab selector spacing can be seen in the gallery page.
The tab system itself doesn't actually provide any sort of dynamic loading - the entire page is loaded immediately, and all tabs other than the one selected are simply hidden. This is perfectly fine for smaller pages, especially ones that contain only text (f.eg. this page with all its tabs is still only ~10kB). For tabs that contain images or other large elements, I recommend using iframes.