:target url match selector



:target url match selector

0 0


css-tabs-preso

Presentation on building tabbed uis with only CSS

On Github togakangaroo / css-tabs-preso

# 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)

Hi

# 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

One Two Three

						

+ next sibling selector

One Two Three

						

~ following sibling selector

One Two Three

						

:last-of-type

One Text BlockOne Link Two Text BlockTwo Link Three Text BlockThree Link

						

flexbox order

One Text BlockOne Link Two Text BlockTwo Link Three Text BlockThree Link

						

flexbox order with wrapping

One Text BlockOne Link Two Text BlockTwo Link Three Text BlockThree Link

						

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)