Búsqueda en el Foro:
Buscar


Autor Mensaje
Mensaje05-02-2012, 19:01 (UTC)    
Título del mensaje: Como crear compatibilidades con los navegadores - CSS3

A muchos nos pasa que al colocar un elemento css a nuestra pagina, no es compatible con todos los navegadores. Obviamente el elemento que nosotros colocamos son estilizados por CSS. Pero a veces nos olvidamos de los distintos atributos que hacen que lleguen a ser compatibles con navegadores como Chrome, Safari, FireFox y Opera. IE no.

Las propiedades que podemos usar para los navegadores son:
Cita:

-webkit- (Google Chrome-Safari)
-moz- (Mozilla FireFox)
-o- (Opera)

Internet explorer no se por que razon no existe una forma de compatibilidad .

¿Como usar las propiedades?
Las propiedades tienen un uso muy facil, no se requiere de mucho conocimiento.

Cita:

#rotaralgo{
transform: rotate(-5deg);
-webkit-transform: rotate(-5deg);
-moz-transform: rotate(-5deg);
-o-transform: rotate(-5deg);

Como vemos en los colores de cada propiedad, son compatible con:
Cita:
-webkit- Google Chrome-Safari
-moz- Mozilla FireFox
-o- Opera


Si queremos usar por ejemplo el siguiente código:
Código:
box-shadow: 0 0 5px rgba(0,0,0,.25);


¿Pero como hacerlo compatible?
Es fácil, copiamos los códigos para cada navegador uno abajo de otro.
Cita:
.nosequeponer
-webkit-box-shadow: 0 0 5px rgba(0,0,0,.25);
-moz-box-shadow: 0 0 5px rgba(0,0,0,.25);
-o-box-shadow: 0 0 5px rgba(0,0,0,.25);

y listo, es solo poner el código que queramos para cada navegador y seguido del código css que queramos.

El tutorial fue creado por mi

------
¿El codigo no funciona? Por favor de aviso a algun moderador haciendo click aqui
______________
Es una reina, es una reina, fiesta fiesta. Tito el bambino


Ultima edición por brianpwg el Jue Dic 06, 2012 6:59 am; editado 1 vez
Mensaje24-07-2012, 17:34 (UTC)    
Título del mensaje: Re: CSS3 - Como crear compatibilidades con los navegadores.

@estrategiasempresariales revisando el codigo de tu pagina encontré atributos como:

Código:
-webkit-color:#606060;
-webkit-padding:0;
-webkit-width:100%;
-webkit-clear:both;}



Eso no es necesario, de hecho eso hace que no funcione en ningún navegador, los prefijos deben usarse en conjunto (-webkit,-o,-ms,-moz) y solo a los atributos css3 (border-radius, opacity, gradients, box-shadow, etc).

Te dejo esta pagina, tu pones tu código css sin prefijos y esa pagina te devuelve el código css3 compatible

http://prefixr.com
______________
/* Programador web freelance. */
/* twitter: @jfdelarosa */


Ultima edición por buzzdungeon el Mar Jul 24, 2012 1:35 pm; editado 1 vez
Mostrar mensajes anteriores:   


Powered by phpBB © 2001, 2005 phpBB Group