Propiedades de transformación individual de CSS en la vista previa de la tecnología Safari

El blog de WebKit detalla cómo utilizar propiedades de transformación CSS individuales en la última versión de Safari Technology Preview. Esto alinea el navegador con la especificación CSS Transforms Module Level 2 , que divide las translate()funciones rotate()y scale()de la transformpropiedad en sus propias propiedades individuales: translate, scaley rotate.

Entonces, en lugar de encadenar esas tres funciones en la transformpropiedad:

.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 taquigrafía, y no al revés, como hemos visto con background, border, font, margin, padding, place-itemsetc.

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 lugar de transform: scale(2);.
• Hay mucha menos preocupación por anular accidentalmente otras transformpropiedades cuando están encadenadas.
• Es muchísimo más sencillo 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 claves de 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, rotatey scale, en ese orden) antes de las funciones de la transformpropiedad.

¡Ah, y no podemos pasar por alto la compatibilidad con el navegador! Es extremadamente limitado en el momento de escribir este artículo… básicamente solo a Safari Technology Preview 117 y Firefox 72 y superiores para un enorme soporte global del 3,9%:

• translate
• rotate
• scale

La publicación sugiere usar @supportssi desea comenzar 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 del notoperador. No estoy seguro de que sea una mejora del código o no, pero parece más una mejora progresiva hacer algo como esto:

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

De esta manera, borramos las funciones abreviadas y damos paso a las propiedades individuales, pero sólo si son compatibles.

Funciones de transformación CSS individuales

rotar escala transformar traducir Chris Coyier

Obtenga el valor de la rotación de CSS a través de JavaScript

rotar escala transformar traducir Chris Coyier

Ahora que existen las propiedades personalizadas de CSS, todas las partes de valor se pueden cambiar individualmente

rotar escala transformar traducir Chris Coyier