CSS Individual Transform Properties in Safari Technology Preview

The WebKit blog details how to use individual CSS Transform properties in the latest version of Safari Technology Preview. This brings the browser in line with the CSS Transforms Module Level 2 spec, which breaks out the translate(), rotate() and scale() functions from the transform property into their own individual properties: translate, scale, and rotate.

So, instead of chaining those three functions on the transform property:

.some-element { transform: translate(50px 50px) rotate(15deg) scale(1.2); }

…we can write those out individually as their own properties:

.some-element { translate: 50px 50px; rotate: 15deg; scale: 1.2; }

If you’re like me, your mind immediately jumps to “why the heck would we want to write MORE lines of code?” I mean, we’re used to seeing individual properties become sub-properties of a shorthand, not the other way around, like we’ve seen with background, border, font, margin, padding, place-items, and so on.

But the WebKit team outlines some solid reasons why we’d want to do this:

• It’s simpler to write a single property when only one function is needed, like scale: 2; instead of transform: scale(2);.
• There’s a lot less worry about accidentally overriding other transform properties when they’re chained together.
• It’s a heckuva lot simpler to change a keyframe animation on an individual property rather than having to “pre-compute” and “recompute” intermediate values when chaining them with transform.
• We get more refined control over the timing and keyframes of individual properties.

The post points out some helpful tips as well. Like, the new individual transform properties are applied first — translate, rotate, and scale, in that order — before the functions in the transform property.

Oh, and we can’t overlook browser support! It’s extremely limited at the time of writing… basically to just Safari Technology Preview 117 and Firefox 72 and above for a whopping 3.9% global support:

• <a href="https://caniuse.com/mdn-css_properties_translate">translate</a>
• <a href="https://caniuse.com/mdn-css_properties_rotate">rotate</a>
• <a href="https://caniuse.com/mdn-css_properties_scale">scale</a>

The post suggests using @supports if you want to start using the properties:

@supports not (translate: 0) { /* Individual transform properties are NOT supported */ div { transform: translate(100px, 100px); } }

That’s the code example pulled straight from the post. Modifying this can help us avoid using the not operator. I’m not sure that’s an improvement to the code or not, but it feels more like progressive enhancement to do something like this:

div { transform: translate(100px, 100px); } @supports (translate: 0) { /* Individual transform properties are supported */ div { transform: none; translate: 100px 100px; } }

That way, we clear the shorthand functions and make way for the individual properties, but only if they’re supported.

source