Transformaciones CSS agregadas en Firefox 3.1

La web 2.0 requiere cada vez tecnologías mas potentes en los navegadores, requiere que el javascript se ejecute mas y mas rápido, y requiere nuevos y mejores elementos html, y en toda esta carrera por superar las barreras impuestas por las tecnologías en los navegadores, uno de los últimos pasos han sido los “CSS transforms”, o dicho mas llanamente: Transformaciones CSS.

La transformaciones CSS son unas nuevas propiedades disponibles para utilizar en nuestras hojas de estilo, propuestas por el equipo de WebKit hace un año, dichas propiedades permitirían aplicar ciertos efectos, como rotaciones y escalados, a nuestros elementos HTML.

Las primeras noticias acerca de estas nuevas propiedades CSS (no estándares, evidentemente) que salieron para WebKit incluían ciertos ejemplos de lo que se podía hacer, bastante atractivos, como crear un iframe, cargar una página dentro, y rotarlo 90º:

Sin embargo, el hecho de que no estuviesen disponibles en Firefox, era desalentador, hasta hace poco, que mozilla anunció que las transformaciones CSS estaban ya disponibles en firefox 3.1.

Antes de continuar, si queréis bajar el último firefox 3.1, y probarlo, se puede descargar precompilado de aquí:

http://ftp.mozilla.org/pub/mozilla.org/firefox/nightly/latest-trunk/

Si no queremos que esto afecte a nuestra configuración actual de firefox, en linux podemos hacer:

mv ~/.mozilla ~/.mozillaBack

Y renombrar el nombre del directorio donde se guardan nuestras configuraciones de firefox, a .mozillBack, ahora extraemos el firefox 3.1 precompilado, lo ejecutamos, y el creará su nuevo .mozilla, el cual podremos borrar y sustituir por nuestro .mozillaBack en cuanto queramos regresar a firefox estable, haciendo:

mv ~/.mozillaBack ~/.mozilla

Con nuestro nuevo firefox 3.1 listo, ya podemos adentrarnos un poco mas en las transformaciones CSS, la documentación completa de estas nuevas propiedades CSS está aquí:

http://developer.mozilla.org/En/CSS/CSS_transform_functions

Así que vamos a probar a hacer algo, por ejemplo, rotar un iframe 45º sobre si mismo:

<html>
<head>
<title>Prueba de rotación</title>
</head>
<body>
<iframe style=”-moz-transform: rotate(45deg); -moz-transform-origin: bottom left;” src=”https://rooibo.wordpress.com/&#8221; width=”600px” height=”600px” />
</body>
</html>

La verdad es que es bastante fácil, aquí podéis verlo en funcionamiento:

http://eyeideas.es/rotacion.html

Y aquí una imagen de como se me renderiza a mi en mi Firefox 3.1:

Los resultados son bastante buenos, habrá que esperar a ver cuanto se extienden estas nuevas propiedades CSS, que hace Internet Explorer y todo eso…el clásico problema en el mundo de los navegadores.

4 Responses to “Transformaciones CSS agregadas en Firefox 3.1”


  1. 1 Ruben Cantón octubre 13, 2008 a las 3:03 pm

    Pero si llevan años con el CSS 3.0 y luego nunca lo aprueban, ¿como van a aprobar esto?

    Cuando haces una web de forma profesional tienes que asegurarte de que la misma pueda visualizarse correctamente en todos los exploradores, al menos los mas utilizados.

    Por eso ya no es que te vayas a los estándares, es que vas más allá de los estándares, ya que sabes que hay cosas aprobadas que ciertos exploradores no interpretan bien y las evitas, y otras en que debes meter un parche para este o aquél… un coñazo vaya.

    El CSS3 decían que lo iban a aprobar hace años, hasta me lo empollé y empecé a ponerlo en práctica y luego para nada, yo hasta que no se apruebe y se implemente en los exploradores paso de probar nada ya.

    De todas formas, una información muy interesante.

  2. 2 jcarlosn octubre 13, 2008 a las 5:03 pm

    Hola Ruben, tienes toda la razón del mundo, es mas, a mi me pasó igual con CSS3, pero aun y así, creo que es bueno estar al día de los posibles futuros, aunque a veces se vean tan lejanos…

    Un saludo!

  3. 3 MazarD octubre 21, 2008 a las 8:50 am

    Aún así es curioso y puede ser útil para casos muy concretos. Imaginemos una empresa en las que se restringe el uso a un único navegador, para pequeñas aplicaciones y para facilitar la rapidez del desarrollo pueden establecer que la aplicación solo funcione para x versión del navegador a cierta resolución y cierta configuración. Y puede ser muy útil para que puedan imprimir una página apaisada sin que el usuario tenga que seleccionar “apaisado” en el menú de impresión, le das la vuelta a la web y listo😛

    Saludos.

  4. 4 jcarlosn octubre 22, 2008 a las 10:08 pm

    Hola MazarD, gracias por el comentario.

    Muy buena idea lo de “apaisar” una página usando esto.


Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s





A %d blogueros les gusta esto: