Functional CSS Tabs Re-Revisited

Avatar of Geoff Graham
Geoff Graham on (Updated on )

Update: We’re redacting this article. Much of it was work originally done by Art Lawry and published on A List Apart in the article Radio-Controlled Web Design. We didn’t appropriately credit that work. Apologies to Art and A List Apart.

Further explanation and more about CSS tabs:

Here at CSS-Tricks, we’ve been playing with the idea of CSS tabs for years. Half a decade ago we explored seven different techniques (All of them pretty bad, don’t use those). We revisited it four years ago and solved some of the shortcomings there, but introduced some new problems.

These days, through techniques like The Checkbox Hack, you can get a lot closer to a good tabbed UI experience with just HTML and CSS. Check out Art’s post about how to do that. And his final demo:

See the Pen Radio-Controlled Tabs (ARIA) by Art Lawry (@artlawry) on CodePen.

As ever on the web, there is always new possibilities to explore. I believe the jury is still out on whether form controls are acceptable for accessibility for toggling the visibility of content when display: none is being used to hide that content. Perhaps other hiding methods could be explored.

Stephan Barthel has explored this concept using flexbox which is pretty interesting in itself.

There are rumors of CSS helping with arbitrary state-based design as well, so certainly the future is interesting for this kind of thing.