I have noticed that in css. You can use (e.g.) translate: 50% 50% directly instead of transform: translate(50%, 50%). Is the former a shorthand for the latter?.
I have tried to search for it but couldn't find anything.
same thing for rotate and probably for the rest of the transformation properties
And if it is a shorthand, why nobody uses it (I have never came across code that used it.)
The properties of translate (and rotate, and scale) currently appear only in CSS Transforms Module Level 2, Editor’s Draft, 16 June 2021 13 September 2023 under the section 5. Individual Transform Properties: the translate, scale, and rotate properties:
The
translate,rotate, andscaleproperties allow authors to specify simple transforms independently, in a way that maps to typical user interface usage, rather than having to remember the order intransformthat keeps the actions oftranslate(),rotate()andscale()independent and acting in screen coordinates.
The important part why it is suggest its in a way that maps to typical user interface usage, rather than having to remember the order in transform so it should make it easier to use those for their most common use-cases.
The support (caniuse.com: translate) is not really good is at about 89.49% (2023-09-25): FF 72+ and Safari 14.1+, iOS Safari 14.5+
Oh, so that why no body uses it. Pretty useless!
That's not necessarily true, if it can be translated to another css property, then you can already use it today if you have a tool like postcss.org in your development chain, and if postcss has a plugin for translating it.
But it is not always clear if things that are currently only in the draft of the specification will really make it into the final version.