Guerra por los estándares

Esta semana apple publicó una serie de propuestas interesantes para incluir nuevas características en CSS:

• CSS Animation
  
• CSS Transforms
  
• CSS Transitions
  
• CSS Variables
  

Con esto CSS se adentra un paso más en la capa de presentación manejando animaciones, algo que ahora es dominio de javascript.

Animaciones CSS

Estas se hacen a través de keyframes, muchos de ustedes los conocerán por flash o svg, por ejemplo:

@keyframes 'wobble' {
  
  0 {
    left: 100px;
  }

  40% {
    left: 150px;
  }
  
  60% {
    left: 75px;
  }
  
  100% {
    left: 100px;
  }
  
}

Indica que al comienzo de la animación, el elemento estará a 100px a la izquierda, al 40% de la animación, a 150px, y así, por lo que el elemento se veria, en caso de durar 10 segundos:



Entonces, para aplicar esa animación, hacemos algo como:

#animado {
  animation-name: 'wobble';
  animation-duration: 10s;
  animation-iteration-count: 20;
}

lo cual animará al elemento con la id=animado, utilizando la animación que definimos arriba, durando 10 segundos, e iterándola 20 veces

Transformaciones CSS

El espacio de coordenadas de un objeto puede ser modificado a través de las transformaciones, esto es, puede rotarse, escalarse, trasladarse y hasta hacerle skew. Las transformaciones hasta pueden ser tridimensionales.

Esto significaría que podriamos hacer que todos los h2 estén rotados 20 grados, así diseños complejos no requerirán que se utilicen imagenes para el texto.

Transiciones CSS

Imagina que armas un menú, de fondo celeste, y que cuando pasas el mouse sobre él, con hover, haces que el color cambie a azul. Con las transiciones podrás indicar que ese cambio sea suave, y tenga una duración el el tiempo

Incluso se le podrá asignar un valor de easing, manejando así la aceleración

Variables CSS

Esta caracteristica se viene pidiendo desde que tengo memoria, plantea ciertas dificultades al momento de la implementación, por lo que siempre fue descartada, probablemente ahora le encuentren la vuelta para que sea por fin aceptada.

Con las variables puedes definir valores con alcance a toda la hoja de estilos identificados con un token y utilizables en todas las declaraciones CSS. Entonces por ejemplo si definimos un color de fondo que es común a varios elementos, entonces será facil modificarlos a todos de una sola vez cambiando solo una linea de codigo, lo mejor de todo es que esto puede ser aplicado dinámicamente a través de javascript

Por ejemplo:

@variables {
  CorporateLogoBGColor: #fe8d12;
}

div.logoContainer {
  background-color: var(CorporateLogoBGColor);
}

A simple vista se daran cuenta de lo facil que es.


Aun falta mucho para ver todo esto en nuestra navegación diaria, no sólo tiene que ser revisado y aprobado como estándar, sino que tiene que ser adoptado por los navegadores y finalmente por los diseñadores web.