Archive | custom properties

RSS feed for this section

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 …


Simplifying CSS Cubes with Custom Properties is a post from CSS-Tricks

The Issue with Preprocessing CSS Custom Properties

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. …


The Issue with Preprocessing CSS Custom Properties is a post from CSS-Tricks

CSS Custom Properties and Theming

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 …


CSS Custom Properties and Theming is a post from CSS-Tricks

Now that CSS Custom Properties are a Thing, All Value Parts Can Be Changed Individually

CSS Custom Properties give us the ability to reach into a property value and change certain parts of it. That’s useful in a bunch of places, but in particular, it’s useful in properties which don’t allow us to do it any other way.


Now that CSS Custom Properties are a Thing, All Value Parts Can Be Changed Individually is a post from CSS-Tricks

Individual CSS Transform Functions

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));
}


Individual CSS Transform Functions is a post from CSS-Tricks