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

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

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.

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

Comentarios: 4

  1. 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.

    Acabo de descubrir tu blog, me gusta, te seguiré la pista :)

    ResponderEliminar
  2. ¡Hombre! ¡Un paisano por mi blog! ;-)
    Gracias 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

    ResponderEliminar

EsCss RSS del Blog RSSS Comentarios Humans.txt ᛯ Diseno por Kseso SiteMap