[tapirl]

The details / summary feature can also be implemented with pure css without JavaScript. Here is an example: https://docs.go101.org/std/pkg/io.html, just click all "+" signs to expand contents.

We can also use pure css to implement tab panels. A demo: http://tmd.tapirgames.com/demos.html#section-demo-4

Modern css is powerful.

[jakelazaroff]

Note that pure HTML and CSS implementations of tabs using <details> and <summary> fail to meet several important accessibility criteria [1].

While you can make something that visually appears to act as a set of tabs, building it accessibly unfortunately still requires JavaScript.

[1] https://adrianroselli.com/2019/04/details-summary-are-not-in...

[Permik]

This is false, recently the details element has gotten support for grouping them: the [name] attribute. This effectively enforces tab-like semantics where only one of the grouped details elements can be open at a time.

This is a quite recent addition and the modern web is evolving too fast so I wouldn't put it past myself for missing this :)

Yay for progress and for JavaScript free solutions!

[tapirl]

The pure-css effects I mentioned both don't use <detail>/<summary>.

[xorcist]

What is a good reference to learn modern CSS? I seems most books and online resources are quickly outdated.

[tapirl]

I really don't know. I'm not a CSS expert. I've just picked up bits and pieces of CSS knowledge from Google and AI agents. These results often aren't perfect, so you'll need to make some adjustments.