soy Kseso y esto EsCSS

Firefox 16 ¿qué hay de nuevo, viejo? Las novedades en Css

Firefox 16 ¿qué hay de nuevo, viejo? Las novedades en Css

·Por Kseso ✎ 4

firefox 16Este 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:

nueva sintaxis del sentido horario de los grados en los gradientes css

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

Developers Tools nativas de Firefox

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.

avatar del Editor del blog

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 Don Kseso Kseso