Web BizarroWeb Bizarro

Suscríbete a nuestro Newsletter

X

Únete a nuestra lista de correos para recibir semanalmente actualizaciones de nuestro contenido.

¿Qué CSS llevan prefijos?

¿Qué CSS llevan prefijos? 08.NOV.13

Alvaro José Rios Ch
Fundador WebBizarro

Con las innovaciones en HTML5 y CSS3 los navegadores implementan, muchas veces, sus propios estándares basados en características no del todo aprobadas por la W3C, por esto es necesario el uso de prefijos en algunas propiedades, pero ¿En cuales? Exactamente, bueno en shouldiprefix.com podemos ver cuales propiedades necesitan prefijos y cuales no lo requieren, basados en información recopilada de varios sitios como Can I use, CSS3 pleasey otros más.

Por ejemplo border-image requiere prefijos:

.example {
  -webkit-border-image: url(img.png) 10px 20px round; /* Ch <16, Saf <6 */
     -moz-border-image: url(img.png) 10px 20px round; /* Fx <15 */
       -o-border-image: url(img.png) 10px 20px round; /* Op (not mini) */
          border-image: url(img.png) 10px 20px round; /* Ch 16+, Saf 6+ */
}

pero border-radius no lo requiere:

.example {
  border-radius: 10px 20px;
}

También puedes usar-prefix-free una librería que con solo incluir unarchivo JavaScriptal inicio de tu Html te libra de tener que usar prefijos aunque tienes que revisar la compatibilidad y compararla con los requerimientos de tu sitio y hay también algunas consideraciones que debes tener en cuenta.

  • No funciona con estilos importados (@import).
  • No funciona con archivos locales en Chrome y Opera.
  • No funciona con estilos inline.
  • No funciona con hojas de estilos de otros dominios.

Como siempre la decisión es toda suya y depende de los requerimientos de su proyecto.