css variables

Simplifying CSS Cubes with Custom Properties

I know there are a ton of pure CSS cube tutorials out there. I've done a few myself. But for mid-2017, when CSS Custom Properties are supported in all major desktop browsers, they all feel... outdated and very WET. I thought I should do something to fix this problem, so this article was born. It's going to show you the most efficient path towards building a CSS cube that's possible today, while also explaining what common, but less than ideal cube coding patterns you should steer clear of. So let's get started!

(more…)

Making Custom Properties (CSS Variables) More Dynamic

CSS Custom Properties (perhaps more easily understood as CSS variables) provide us ways to make code more concise, as well as introduce new ways to work with CSS that were not possible before. They can do what preprocessor variables can… but also a lot more. Whether you have been a fan of the declarative nature of CSS or prefer to handle most of your style logic in JavaScript, Custom Properties bring something to the table for everyone.

Most of the power comes from two unique abilities of Custom Properties:

  • The cascade
  • The ability to modify values with JavaScript

Even more power is exposed as you combine Custom Properties with other preexisting CSS concepts, like calc() .

(more…)

Autoprefixing with CSS Variables

I'd call this a bonafide CSS trick, courtesy Lea Verou.

Don't miss the comments, in which Sérgio Gomes reminds us this might make it easier to change values in JavaScript, because you could skip worrying about prefixes there. Changing CSS variables in JavaScript is already rather appealing, as the changes will disperse throughout wherever they are used naturally.

And Andrea Giammarchi's trick, where you create a setup that behaves almost like a @mixin with default values:

* {
  --box-shadow:
    var(--box-shadow-x, 0)
    var(--box-shadow-y, 0)
    var(--box-shadow-blur) /* no default, required */
    var(--box-shadow-radius, 0)
    var(--box-shadow-color, black);
  box-shadow: var(--box-shadow, initial);
}

p {
  --box-shadow-blur: 8px;
}

p.special {
  --box-shadow: 10px 0 0 green;
}
icon-anchoricon-closeicon-emailicon-linkicon-logo-staricon-menuicon-nav-guideicon-searchicon-staricon-tag