:target url match selector

View Github Repository Open presentation in a new window

togakangaroo

See all presentation from togakangaroo

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