Chris Ashton

dai11y 09/05/2022

Your daily frequent11y newsletter, brought to you by @ChrisBAshton:

The Future of CSS: CSS Toggles

Article by @bramus, discussing the new CSS Toggles Unofficial Proposal Draft, alongside the demo site for the proposed feature.

“CSS toggles are a mechanism for associating toggleable state with a DOM element”. Perhaps this is best summarised in a code example:

html {
  toggle-root: lightswitch; /* Create a toggle named lightswitch. It will cycle between 0 (inactive, default) and 1 (active) */
}

button {
  toggle-trigger: lightswitch; /* When clicking the button, toggle the lightswitch */
}

html:toggle(lightswitch) {
  /* Styles to apply when the lightswitch toggle is active */
}

This should make it much easier to define global toggles such as dark/light mode, applying reduced motion, switching to low data modes, etc, allowing us to apply the necessary styles without relying on JavaScript.

For now, this is just a prototype, and is subject to change. To start using this today, you’d need to use the polyfill.


Did you know that you can subscribe to dai11y, week11y, fortnight11y or month11y updates! Every newsletter gets the same content; it is your choice to have short, regular emails or longer, less frequent ones. Curated with ♥ by developer @ChrisBAshton.

Loading...