Firefox 16 ¿qué hay de nuevo, viejo? Las novedades en Css 17.10.12
Las novedades que trae Firefox 16 especialmente de Css y en las herramientas nativas de desarrollador web.
Firefox 16 ¿qué hay de nuevo, viejo? Las novedades en Css
Este mes de Octubre supuso la llegada de Firefox 16. El día 9. Y dos días después, el 11, sorprendió con una actualización, Firefox ver. 16.0.1
El motivo, una vulnerabilidad que permitía examinar las urls del historial y extraer datos. Aunque no se conoce que nadie la haya explotado. La respuesta fue rápida y contundente: eliminar la ver. 16 del sitio de descargas y sacar la 16.0.1
Así que antes de seguir leyendo, asegúrate de tener ésta última instalada.
Novedades Css en Firefox 16
Las novedades, ya anunciadas, que trae Firefox 16 relativas a Css son:
Retirada del prefijo privativo -moz-
Firefox es el primer navegador en soportar las propiedades de los grupos animations, transitions, transforms y gradients sin necesidad de prefijo privativo:
Propiedades Animations Css
Soporte sin prefijo privativo a las propiedades del grupo animation: animation-name, animation-duration, animation-delay, animation-timing-function, animation-iteration-count, animation-direction, animation-play-state, animation-fill-mode, @keyframes
En la propiedad animation-direction añade soporte a los valores reverse y alternate-reverse. Y como esta propiedad admite valores múltiples podrás hacer mezclas como ésta para dar variedad a los ciclos:
animation-direction: alternate, normal, reverse;
En alguna parte leí que estos valores también aparecerán más pronto que tarde en Webkit.
Admitida la animación en las propiedades width y height.
Los valores negativos en animation-duration y transition-duration ahora son rechazados. No computan a 0 (cero).
Propiedades Transitions Css
Soporte sin prefijo privativo a las propiedades del grupo transition: transition-property, transition-delay, transition-duration, transition-timing-function
Propiedades Transforms Css
Soporte sin prefijo privativo a las propiedades del grupo transform: transform-origin, transform-style, backface-visibility, perspective, perspective-origin
Propiedades Valores y unidades Css
Calc()
La propiedad calc() es soportada sin prefijo privativo -moz-.
@Media queries
El <resolution> CSS data type admite valores en dppx: dots por píxel. 1dppx = 96dpi
En el media=screen, los valores dppx, dpi, y dpcm ahora son representados con píxeles Css y no con unidades físiscas (bug 771390).
Más información sobre estas unidades.
Flex-box
En los items de un flex-box las propiedades min-width y min-height admiten el valor auto
Gradientes Css
Propiedades Gradientes Css sin prefijo privativo
Soporte sin prefijo privativo a las propiedades del grupo background: X-gradient(): linear-gradient(), radial-gradient(), repeating-linear-gradient(), repeating-linear-gradient()
Atención al cambio de sintaxis en los gradientes Css
Para todas estas propiedades Css a las que se ha retirado el prefijo privativo -moz- la sintaxis no varía, excepto la sintaxis de los gradientes Css.
Firefox 16 implementa la nueva sintaxis: artículo en español en el blog y por Mozilla en inglés
Resumiendo, por si no quieres/puedes echar un vistazo a los 2 enlaces anteriores, la declaración nueva es:
background: linear-gradient(<ángulo>, color-inicial, color-final);
/* Ejemplo de la vieja sintaxis, abandonada pero necesaria con los prefijos*/
background: -prefijo-linear-gradient(top, blue, white 80%, orange);
/*Ejemplo con la nueva sintaxis sin prefijo privativo*/
background: linear-gradient(to bottom, blue, white 80%, orange);
La orientación de los grados también cambia. 0deg que en la vieja nomenclatura significaba derecha (las 3h en el reloj) ahora con la nueva sintaxis es arriba (las 12h) y 90deg apunta a la derecha (las 3h en el reloj). Quedando como indica la imagen de abajo:
Herramientas de desarrollador
Las Developers Tools nativas de Firefox también traen cambios. Puedes acceder a ellas a través del menú herramientas --> desarrollador web o Mayúsculas + F2
Como ves en la captura, de lo más completa. Por si no tienes suficiente con Firebug y web developer toolbar. Si quieres descubrir más escribe help en la línea de comandos para ver los que soporta.
Kseso
the obCSServer ᛯ Ramajero Argonauta, Enredique Amanuense de CSS.#impoCSSible inside
Dicen que, en español, EsCss es el mejor blog de CSS. Posíblemente exageren.
@Kseso EsCss Kseso
Creo que eres la primera persona en español que ha hablado del cambio de sintaxis de los gradientes... Mira que yo iba a hacer un artículo sobre los nuevos cambios xD Ahora me lo tendré que ahorrar.
ResponderEliminarAcabo de descubrir tu blog, me gusta, te seguiré la pista :)
¡Hombre! ¡Un paisano por mi blog! ;-)
ResponderEliminarGracias Emilio y bien hallado.
Ya comenté el cambio introducido por el W3c hace unos meses. Mira el enlace que adjunto en ese apartado.
¿Viste la licencia de la derecha? Pues eso, siéntete libre de utilizar cualquier cosa del blog como mejor te parezca. Quizás tenga suerte y por una vez pueda aplicar la licencia beerware xD
Un saludo
Buen articulo.
ResponderEliminarGracias Lenin
ResponderEliminar