Toggling CSS Customized Properties with Radio Buttons

As a part of a latest article revealed on Codrops, I made some demos that allowed the person to toggle between three completely different values for a clip path utilizing radio buttons. As with so many issues nowadays, I discovered myself reaching for customized properties! Let’s check out why customized properties are nice for this.

Frequent approaches

Let’s have a look at a method we may method this with out customized properties. We may use Javascript to detect when a person interacts with a radio button and append a category to the <determine> accordingly:

const clippedElement = doc.querySelector('.clipped-element')
const controls = doc.querySelector('.controls')

let currentClass = 'circle'

const onChange = (e) => {
  if (!e.goal.worth || !e.goal.checked) return

  if (clippedElement.classList.accommodates(currentClass)) {
    clippedElement.classList.exchange(currentClass, e.goal.worth)
  } else {
    clippedElement.classList.add(e.goal.worth)
  }

  currentClass = e.goal.worth
}

controls.addEventListener('change', onChange)

Then it’s a matter of defining our clip-path values for every class inside our CSS:

.clipped-element {
  -webkit-clip-path: circle(25% at 70%);
  clip-path: circle(25% at 50%);
}

.clipped-element.polygon {
  -webkit-clip-path: polygon(50% 0%...);
  clip-path: polygon(50% 0%...);
}

.clipped-element.svg {
  -webkit-clip-path: path('M202.2...');
  clip-path: path('M202.2...');
}

I’ve shortened the values of the final two right here for brevity and readability, however this demo has the complete code.

Another choice is to set the fashion attribute in JS, however I want the CSS method, because it feels cleaner to me. clip-path requires a prefix in some browsers, so setting this in CSS appears extra maintainable — however it’s a matter of private desire.

Whereas there’s nothing incorrect with these approaches, let’s see what the choice seems to be like with customized properties.

Toggling the customized property

In our HTML we have now three radio buttons with values of circle, polygon and svg respectively:

<kind class="controls">
  <fieldset>
    <legend>Swap clip path values</legend>
    <div>
      <enter sort="radio" title="form" id="r_circle" worth="circle" checked />
      <label for="r_circle">Circle</label>
    </div>
    <div>
      <enter sort="radio" title="form" id="r_polygon" worth="polygon" />
      <label for="r_polygon">Polygon</label>
    </div>
    <div>
      <enter sort="radio" title="form" id="r_svg" worth="svg" />
      <label for="r_svg">SVG path</label>
    </div>
  </fieldset>
</kind>

<div class="clipped-element"></div>

We will assign a customized property for every worth in CSS (once more, the SVG path and polygon values are truncated right here for brevity):

.clipped-element {
  --circle: circle(25% at 50%);
  --polygon: polygon(50% 0%...);
  --svg: path('M202.2...');
}

Moreover, we are able to assign a customized property of --clip a worth for our clip path. That signifies that each time we modify the --clip worth, each the prefixed property worth and the common property worth will likely be up to date. (I’ve written about this in a earlier article, 7 Makes use of For Customized Properties.)

We’ll give it an preliminary worth comparable to our first radio button choice, utilizing the --circle customized property:

.clipped-element {
  --circle: circle(25% at 70%);
  --polygon: polygon(50% 0%...);
  --svg: path('M202.2...');

  --clip: var(--circle);
  -webkit-clip-path: var(--clip);
  clip-path: var(--clip);
}

Then, in our onChange occasion handler, we replace the worth of --clip with the customized property comparable to the chosen radio enter. We will use template literals to do that:

const onChange = (e) => {
  if (!e.goal.worth || !e.goal.checked) return

  clippedElement.fashion.setProperty('--clip', `var(--${e.goal.worth})`)
}

We obtain the identical consequence, and each our CSS and JS code is rather more concise.

The complete demo:

See the Pen
Clip path toggle with customized properties by Michelle Barker (@michellebarker)
on CodePen.

By the way, CSS Methods has just lately revealed a full information to customized properties, that includes some nice suggestions and examples of the way to make use of them.