# CSS-Only Tabs _Are just plain cool, and you should use them_ ---- George Mauer - gmauer@gmail.com @togakangaroo - [http://georgemauer.net](http://georgemauer.net) [http://georgemauer.net/css-tabs-preso](http://georgemauer.net/css-tabs-preso)


# Tabbed UIs are *the* metaphor ![jQuery UI](img/jquery-ui-tabs.png) ![Bootstrap](img/bootstrap-tabs.png) ![Material Design](img/material-design-tabs.png)

Javascript is a headache!

## Javascript-free tabs are Possible! ![Game Inventory](img/dc-hero-inventory.jpg) ### Lets take Inventory
## [What we're going for](http://output.jsbin.com/sinaxu) ![Finished Sample](img/finished-example.png)

:target url match selector

+ next sibling selector

+ next sibling selector

~ following sibling selector


One Text Block
One Link
Two Text Block
Two Link
Three Text Block
Three Link

flexbox order

flexbox order with wrapping

Ok, stop messing around

  • Style tabs properly
  • Position all tabs first, articles last
  • Hide all contents except for currently selected :target
  • Highlight the tab that follows :target
  • ...a few more things probably...
  • ...profit

Let's do this

## Pros * Zero javascript, super low overhead * Declarative, no bugs * Zero Hacks ## Cons * Can't pre-empt navigation * Everything must be on the page, no hooks * If using a js library that hijacks urls you need [a slightly different technique](http://jsbin.com/yuhidon/1/edit?html,css,output) * IE11(ish) support for flexbox

No Hacks

# Questions? ---- George Mauer - gmauer@gmail.com @togakangaroo - [http://georgemauer.net](http://georgemauer.net) ---- [Read more about this in detail](http://georgemauer.net/2016/07/15/css-only-tabs.html)