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 …
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
Cool, right? But still, how actually useful …
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.
Dan Wilson documents a classic annoyance with transforms:
/* will (perhaps unintentionally) override the original translate */
The native (and WET) solution is list the original transform again:
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