CSS Can Do What?!

When you don't actually need JavaScript

https://slides.com/brob/css-can-do-what/live

Bryan Robinson

Twitter: @brob

bryanlrobinson.com

Simple
Fewer Requests
Fun and Profit

Why?

CSS is Powerful

I Still Love JS

Examples and Demos

TOOLTIPS

And not just because of :hover

:hover

attributes

content

CONCEPTS

Demo

https://codepen.io/brob/pen/RZKrGK

https://codepen.io/brob/professor/RZVwPe/

[attr] selector

content: attr()

MODAL

Who needs JS for a Click?

:target

CONCEPTS

Demo

https://codepen.io/brob/pen/jLqmqw

https://codepen.io/brob/professor/EvWaXB/​

:target

OFF-CANVAS NAV

HTML/CSS states

[checked]

~

Transitions

CONCEPTS

Demo

https://codepen.io/brob/pen/oeNdbg

https://codepen.io/brob/professor/Vzjpzx/​

http://bryanlrobinson.com/blog/2017/08/02/css-only-mobile-slide-out-navigation/

http://bryanlrobinson.com/category/you-can-do-what-with-css/

http://tinyletter.com/code-contemporary