miércoles, 31 de octubre de 2012

prefix-free y basta de prefijos en el CSS

prefix-free es un script que habría que tener muy en cuenta ya que nos ayuda a resolver uno de los problemas más molestos a la hora de escribir reglas de estilo "modernas" ya que lo que hace es agregar de modo automático, los prefijos correspondientes para cada navegador de tal modo que no sería necesarios escribir algo así:
.una-regla {
background-image: -moz-linear-gradient(#000,#FFF);
background-image: -webkit-linear-gradient(#000,#FFF);
background-image: -o-linear-gradient(#000,#FFF);
background-image: -ms-linear-gradient(#000,#FFF);
background-image: linear-gradient(#000,#FFF);
}
y todo ese exceso de líneas (que, inevitablemente uno termina equivocando u olvidando) se transformaría en es esto:
.una-regla {
background-image: linear-gradient(#000,#FFF);
}
es decir, sólo deebría usarse la propiedad especificada por la w3.org y del resto, se encargará el script.

¿En que navegadores funcionará? En todos aquellos que usen ese tipo de prefijos, Firefox, Chrome, Safari, Opera, IE9 en adelante y las versiones móviles más comunes. Obviamente, como IE8 no soporta la mayoría de las propiedades CSS3, nada ocurrirá allí pero tampoco tendrá influencia alguna, todo seguirá como antes.

¿Funciona en Blogger? Si, no debería haber problemas ya que el script se ejecuta tanto sobre etiquetas <style> </style>, estilos externos agregados con la etiqueta LINK o incluso, en estilos agregados inline con el atributo style en la misma etiqueta.

¿Cómo lo usamos? Descargamos el script desde la página del desarrollador (es muy pequeño) y lo alojamos en un servidor:
<script src='URL/prefixfree.min.js' type='text/javascript'/>
o simplemente lo copiamos y pegamos en la plantilla entre etiquetas
<script type='text/javascript'>
//<![CDATA[
....... acá pegamos el contenido del archvo js .......
//]]>
</script>
y, en ambos casos, conviene hacerles caso a los desarrolladores y agregarlo justo antes de </head>

Tres ejemplo rápidos:
/* un fondo con gradiente */
#pf1{background-image:linear-gradient(#000,#FFF);}

/* una transición */
#pf2{font-size: 0;line-height: 100px;border-radius:0;background-color: #000;transition:all 1s;}
#pf2:hover{background-color:#F0F8FF;border-radius:50px;background-color: #F00;font-size: 80px;}

/* una animación*/
#pf3{background-color:#000;animation: recrojo 1s infinite alternate;}
@keyframes recrojo {from {background-color:#000;} to {background-color:#F00;}}

No hay comentarios:

Publicar un comentario