JMiur [E]

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;}}

23 comentarios:

Graciela de Palomas  

Qué bueno Jmiur :)

Responder
Wi Wa  

Está muy bueno! lo malo es que no funciona con animaciones ='(

JMiur  

Funciona perfectamente con las propiedades @keyframes y animation, tanto en etiquetas style como en estilos inline.

Responder
francis (Bollullos)  

Hola jmiur, perdona que te moleste por aqui, pero necesito de nuevo tu ayuda. He cambiado la plantilla de mi blog y he borrado las metetags para aparacer en google, también la etiqueta de verificación de google. he visto información por la web, pero cada uno dice algo diferente. ¿Me puedes decir cómo poner de nuevo estos contenidos?. Muchas gracias

JMiur  

¿La etiqueta de verificación de qué servicio? Sea el que sea (Goolgle Anaytics, Google Webmaster Tools, Bing, etc), bastaría que entraras en tu cuenta y volvieras a copiar y pegar el código que ellos te dan.

En el caso de Google Analytics puedes usar la Configuración de Blogger, Otros, en el último item colovas el ID de tu cuenta y se agrega automáticamente.

¿Que otra etiqueta META falta?

francis (Bollullos)  

Me refería a la verificación de google webmaster. En la cuenta ya me lo dan por verificado y no me vuelven a dar el código. He optado por borrar el sitio añadido y añadirlo de nuevo, pero cuando lo hago ya me lo dan por verificado.

Lo otro que me falta son las "metas" para aparecer en buscadores como google. Miles de gracias.

JMiur  

SI dice que está verificado no hace falta nada más. Si usas Google Aalytics, ambos datos se complementan.

Justamente, pregunto cuáles son esas meta que dices que te faltan o dime cuál es el blog para ver cuáles hay.

Un método es el que muestra esta entrada.

francis (Bollullos)  

Ok. Creo que me estoy liando y no consigo explicarme. Sólo pretendo que mi blog aparezca en Google.

El blog es www.descubre-bollullosdelcondado.com

Gracias

Responder
Alcion Inugami  

Excelente, es un verdadero cacho estar escribiendo las propiedades lol

Se agradece, Saludos!

Responder
Localiza Recursos Sociales en el Municipio de Oviedo  

Hola: De nuevo molestándote.Me encanta estos ejemplos y me gustaría poner uno.He descargado y pegado el script. Pero el ejemplo no sé dónde y como debe ponerse (Lo intenté y no lo consigo).Quería añadirlo a los títulos de mi página "Un respiro"Si no es molestia puedes mirarlo y me indicas.Gracias

JMiur  

No sé cuál es la página a la que te refieres; coloca la url para guiarme.

En cuanto al ejemplo, dime cuál es.

Responder
Rosendo Ramírez Aquino  

Esto lo ke se necesitaba para no escribir tanto codigo :D

Responder
Localiza Recursos Sociales en el Municipio de Oviedo  

Hola: De acuerdo
http://localizarecursos.blogspot.com.es/p/blog-page_9739.html
Los ejemplos me encantan los tres,aunque tal vez el primero será el que ponga.

JMiur  

Si los títulos son esos que están en en la entrada, ADICCIONES:, APOYOS, etc; deberías cambiar la forma de escribirlos; simplificarlos o usar una clase.

También se lo puedes agregar a la etiqueta SPAN de cada uno de ellos:

<span style="color: red; font-family: Verdana, sans-serif;background-image: linear-gradient(#000, #FFF);">
<b> ADICCIONES:</b>
</span>

Convendria usar una etiqueta h4 h5 o h6 y definir la regla de estilo una sola vez.

Localiza Recursos Sociales en el Municipio de Oviedo  

JMiur: Muchísimas gracias eres muy amable.
Si vienes por España,concretamente a Asturias tienes pagadas unas botellucas de sidra.Aunque estamos en crisis para tí hay sidra.
Un saludo

JMiur  

Gracias, lo tendré en cuenta :D

Responder
Oloman Oloman  

Esto está muy bien. Práctico como ninguno. Yo acaba de encontrar sitios que te convertían códigos CSS de esa manera pero evidentemente es mejor que un sistema automático lo haga. Además supongo que lo irán actualizando para futuras propiedades.

Lo dicho, útil, muy útil.

JMiur  

Sí, claro, es mejor que se haga de modo automático y olvidarse del asunto; sin duda. además, funciona bastante bien.

Responder
Lic. Enrique Dalla Villa  

Esto es excelente.
No veo la hora de probarlo en mi blog.
No sólo eso, esto sí que hace honor a "vagabundía".

Promete ahorrarme mucho trabajo y concentrarme en lo que uno realmente quiere hacer sin preocuparse tanto por cada navegador que habita este gran mundo.

Responder
EXCEL_2012  

no lo he podio hacer funcionar en localhost con xampp

JMiur  

No veo problema alguno. Es JavaScript así que no tiene que haber inconvenientes.

Responder
EXCEL_2012  

ayuda ..! como lo hago funcionar en mi localhost..
lo llamo en mi archivo y no jala que pasaraa=?

gracias..


JMiur  

Es imposible responderte sobre eso ya que no hay manera de chequear nada.

Responder

¿Quiere dejar un comentario?

recuerde que los comentarios están siendo moderados y serán publicados a la brevedad ...

Todos los archivos y demos alojados en Fileden han sido redireccionados y deberían estar funcionando correctamente.
De todos modos, también puede accederse a ellos a través de SkyDrive

Nota: sólo los miembros de este blog pueden publicar comentarios.

Si le gusta ir a lo seguro utilice este botón para abrir los comentarios en una ventana modal en esta misma pagina.

Si añora tiempos idos, use este enlace para agregar un comentario al viejo estilo ...

 
CERRAR