This talks aims to showcase some examples of CSS structures that are able to respond to user interactions like scroll, click on an element or filling a form. By taking advantage of some recently introduced pseudo selectors like :target, :valid, :required and :checked we can develop a whole new range of CSS rules that can react while the user interact with the page. During the talk we’ll explore some of these rules and how we can replace some well known javascript powered widgets with their pure CSS counterparts

1. CSS
TIPS
AND
TRICKS
Sandro
Paganotti

2. :required
:valid
:invalid
counter
CLICK to PLAY
or click for completed version
CSS
AND
FORMS

3. CSS
AND
RATING
SYSTEMS
:checked
CLICK to PLAY
or click for completed version
from
Lea Verou

4. CSS
AND
SLIDESHOW
appearance
CLICK to PLAY
or click for completed version

5. CSS
AND
3D
transform-style
perspective
transform
CLICK to PLAY
or click for completed version

6. CSS
AND
ACCORDION
flex/box
:target
CLICK to PLAY
or click for completed version

7. caniuse.com
!
graceful degradation
!
selectivzr
!
(few) polyfills
CSS
AND
BROWSER
SUPPORT

8. THANKS!
@sandropaganotti
compartoweb.com
bit.ly/css3pro