El blog de WebKit detalla cómo usar las propiedades individuales de CSS Transform en la última versión de Safari Technology Preview. Esto alinea el navegador con la especificación de Nivel 2 del Módulo de Transformaciones CSS, que desglosa el translate(), rotate() y scale() funciones desde el transform propiedad en sus propias propiedades individuales: translate, scale, y rotate.
Entonces, en lugar de encadenar esas tres funciones en el transform propiedad:
.some-element {
transform: translate(50px 50px) rotate(15deg) scale(1.2);
}…podemos escribirlos individualmente como sus propias propiedades:
.some-element {
translate: 50px 50px;
rotate: 15deg;
scale: 1.2;
}Si eres como yo, tu mente salta inmediatamente a “¿por qué diablos querríamos escribir MÁS líneas de código?” Quiero decir, estamos acostumbrados a ver que las propiedades individuales se convierten en subpropiedades de una forma abreviada, no al revés, como hemos visto con background, border, font, margin, padding, place-items, y así.
Pero el equipo de WebKit describe algunas razones sólidas por las que querríamos hacer esto:
- Es más sencillo escribir una sola propiedad cuando solo se necesita una función, como
scale: 2;en vez detransform: scale(2);. - Hay mucha menos preocupación por anular accidentalmente otros
transformpropiedades cuando están encadenados juntos. - Es mucho más simple cambiar una animación de fotograma clave en una propiedad individual en lugar de tener que “precalcular” y “recalcular” valores intermedios al encadenarlos con
transform. - Obtenemos un control más refinado sobre el tiempo y los fotogramas clave de las propiedades individuales.
La publicación también señala algunos consejos útiles. Por ejemplo, las nuevas propiedades de transformación individuales se aplican primero: translate, rotate, y scale, en ese orden, antes de las funciones en el transform propiedad.
¡Ah, y no podemos pasar por alto la compatibilidad con navegadores! Es extremadamente limitado en el momento de escribir este artículo… básicamente a solo Safari Technology Preview 117 y Firefox 72 y superior para un increíble soporte global del 3,9 %:
translaterotatescale
La publicación sugiere usar @supports si quieres empezar a usar las propiedades:
@supports (translate: 0) {
/* Individual transform properties are supported */
div {
translate: 100px 100px;
}
}
@supports not (translate: 0) {
/* Individual transform properties are NOT supported */
div {
transform: translate(100px, 100px);
}
}Ese es el ejemplo de código extraído directamente de la publicación. Modificar esto puede ayudarnos a evitar el uso de la not operador. No estoy seguro de que sea una mejora en el código o no, pero se siente más como una mejora progresiva para hacer algo como esto:
div {
transform: translate(100px, 100px);
}
@supports (translate: 0) {
/* Individual transform properties are supported */
div {
transform: none;
translate: 100px 100px;
}
}De esa forma, borramos las funciones abreviadas y damos paso a las propiedades individuales, pero solo si son compatibles.
Artículo
el 23 de febrero de 2017
Funciones de transformación CSS individuales
Artículo
el 30 de diciembre de 2020
Obtenga el valor de la rotación de CSS a través de JavaScript
Artículo
el 3 de julio de 2019
Ahora que las propiedades personalizadas de CSS son una cosa, todas las partes de valor se pueden cambiar individualmente