Firefox se adapta a los estándares de la w3c para css3 (border-radius)

Por todos los maquetadores web que traten con css3 es muy conocido este código:

-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;

Para los que no lo conozcan es el código css3 para crear bordes redondeados a un elemento.
Siendo la primera linea para navegadores con el motor chrome y safari entre otros. webkit la segunda para mozilla y la última el estándar de la w3c que utiliza opera e con alguna particularidad… internet explorer

Hace un par de días me encontraba remodelando el theme de este mismo blog para hacerlo un poco más vistoso.
Estaba haciendo algunas remodelaciones a un div… y dado que suelo trabajar sobre firefox como prueba principal, modificaba en todo momento la primera línea del código sin embargo la vista no cambiaba.

Extrañado por ese hecho probé a modificar el border-radius y me di cuenta de que firefox 4 ha dejado de usar el prefijo -moz en border radius.

Sin embargo siguen usando este mismo prefijo para box-shadow o linear-gradient.
Aún así es un indicativo de que Firefox pretende adaptar sus etiquetas de css3 a las establecidas por la W3C.

Una buena noticia sin duda para los maquetadores web.

Conclusión

La conclusión que sacamos de este pequeño y casual descubrimiento es que:

-moz-border-radius para firefox 3.x y menores y border-radius para firefox 4+

Personalmente sigo recomendado el uso de -moz-border-radius dado que es importante mantener las compatibilidades con los otros navegadores al menos por un tiempo determinado.

One Response to Firefox se adapta a los estándares de la w3c para css3 (border-radius)

  1. Lo feo de la propiedad es que en todos los navegadores esta funcionalidad se escribe un poco distinta.

    Algo como esto: http://programandoideas.com/2011/01/bordes-redondeados-con-css-usando-la-propiedad-border-radius/

    Y enhorabuena, si tan solo IE lo usaran más personas estaría bien :P

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos necesarios están marcados *

Puedes usar las siguientes etiquetas y atributos HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre lang="" line="" escaped="" cssfile="">