Gregor shows how to achieve behaviours similar to event listeners in pure CSS with a few hacks.

View the slides

Functionality, what is that?

You can imagine functionality as something similar to event listeners. We have different ways to simulate these events in pure CSS.

Some examples can be seen on my Codepen. Below I also explain how I used them to create a CSS drawing app.

How does it work?

The following snippets will show the basic code for the events.

hover

.action:hover {
  /*
   * actions in here will be fired on hover
   * This is similar the mouseenter or mouseleave event
   */
}

focus

.action:focus {
  /*
   * actions in here will be fired on focus
   */
}

mousedown

.action:active {
  /*
   * actions in here will be fired on mousedown
   */
}

mouseenter

.action {
  transition: all 0;
  transition-delay: 999999999999999999999999s;
}
.action:hover {
  transition-delay: 0;
  /*
   * actions in here will be fired on mouseenter
   * This is similar to the hover event
   */
}

mouseleave

.action {
  transition: all 0;
  transition-delay: 0;
}
.action:hover {
  transition-delay: 999999999999999999999999s;
  /*
   * actions in here will be fired on mouseleave
   * This is similar to the hover event
   */
}

click

input[type="radio"]:checked + label{
  /*
   * actions in here will be fired on click
   */
}
/*
 * abstraction
 */
._2:checked ~ .app ._2 {
  /*
   * actions in here will be fired on click
   */
}

A pure CSS drawing app

I created a pure CSS drawing app making use of a few of these events. You can see it here.

The basic app is built on radio buttons (click event) and transition-delay (mouseenter & mouseleave).

What is actually happening in this app is the following:

  1. if we select a color we are actually checking a radio button
    • all radio buttons share the same name attribute
    • radio buttons toggle each other
  2. while a color is selected we set the background-color of a pixel
  3. we are only changing the background-color on mouseenter (not on mouseleave)

More examples


About the speaker

Gregor Adams
Gregor Adams
Frontend developer/architect

About the conference

dotCSS 2014
The largest CSS conference in Europe
Next edition: dotCSS 2017 in Paris, France. Tickets available now!

Liked this talk? Share it!

Comments

comments powered by Disqus