Skip to main content
CSS is fun and cool and I like it.

Articles Tagged custom properties

It takes as much energy to wish as it does to plan. — Eleanor Roosevelt
46 Articles
{
,

}
Article

The Issue with Preprocessing CSS Custom Properties

Avatar of Chris Coyier
Author
Chris Coyier
7 Comments
Go to Comments

CSS has Custom Properties now. We've written about them a bunch lately. Browser support is good, but of course, old non-evergreen browsers like Internet Explorer don't have them and never will. I can see the appeal of authoring with "future CSS", and letting a preprocessor backport it to CSS that is compatible with older browsers. Babel for CSS! Why not?!

It makes me nervous though - because it's only some use cases of Custom Properties that you can preprocess. … Read article

Article

Making Custom Properties (CSS Variables) More Dynamic

Avatar of Dan Wilson
Author
Dan Wilson
3 Comments
Go to Comments

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 … Read article

Article

CSS Custom Properties and Theming

Avatar of Chris Coyier
Author
Chris Coyier
14 Comments
Go to Comments

We posted not long ago about the difference between native CSS variables (custom properties) and preprocessor variables. There are a few esoteric things preprocessor variables can do that native variables cannot, but for the most part, native variables can do the same things. But, they are more powerful because of how they are live-interpolated. Should their values ever change (e.g. JavaScript, media query hits, etc) the change triggers immediate change on the site.

Cool, right? But still, how actually useful … Read article

Link

Individual CSS Transform Functions

Avatar of Chris Coyier
Shared by
Chris Coyier

Dan Wilson documents a classic annoyance with transforms:

button {
  transform: translateY(-150%);
}
button:hover {
  /* will (perhaps unintentionally) override the original translate */
  transform: scale(.8);
}

The native (and WET) solution is list the original transform again:

button:hover {
  transform: translateY(-150%) scale(.8);
}

Dan's trick is to use custom properties instead. Set them all on the element right up front, then re-set them the :hover state:

:root {
  --tx: 150%;
  --scale: 1;
}
button {
  transform: 
    translateY(var(--tx))
    scale(var(--scale));
}
… Read article
Our Notes   /   Read at danielcwilson.com