CSS-only Tabs

[shoelace-style]

CSS-only Tabs

[claviska]

Interesting, I missed your link and must've been hiding under a rock because I hadn't heard of the :target selector. It's well supported, so I'm going to reopen this for evaluation.

[kevnk]

Haha. For the record, I only stumbled on the :target selector myself when looking for an example to link to on this github issue. So plenty of "rock-hiding" going around these days!

[claviska]

The only example I've seen of pure CSS tabs involved radio buttons, basically like this one:

https://codepen.io/wallaceerick/pen/ojtal

It's clever, but the markup required to achieve this is a bit complex and requires a certain order that's hard to remember. You also can't trigger the tabs via keyboard in most (all?) browsers since the input is hidden. Not sure if there's an easy way around that.

The JS for tabs is super light weight. The current example uses jQuery but I'm planning to rewrite it with a vanilla version so we can drop all third party dependencies. There will also be a small script for dropdowns too, which are landing in the next beta. These will eventually end up minified in /dist so they can be loaded via CDN.

There's a fine line between "starter kit" and framework, and including scripts definitely starts to cross that line. However, I feel that certain components (e.g. tabs and dropdowns) are so incredibly common that leaving them out would be a disservice to the library and its users.

That said, I do wish we could somehow avoid scripts for these two components. It would be cool, but it's probably not feasible at this point in time given what we're trying to accomplish.

[kevnk]

Cool - makes sense. I've used the radio input method before, but hadn't realized the inability to trigger it with keyboard! Thanks for that.

Did you see the css-tricks example I linked in my first comment: https://css-tricks.com/css3-tabs/ It doesn't use radio inputs. Instead, it uses :target which is well-supported and has markup that is really straight-forward.

[kevnk]

I just read more from that article and viewed some demos... and I didn't get the best feel for them and would just go with rolling my own js snippet or grabbing yours.

All the best!

[claviska]

Hmm, some problems with :target:

• Can't set active state on a tab
• Can't prevent window from scrolling without JS
• Can't prevent tabs from hijacking the back button without JS

Interesting approach though. Going to close this in favor of the original script.