Foros del Web » Creando para Internet » CSS »

Distintos navegadores

Estas en el tema de Distintos navegadores en el foro de CSS en Foros del Web. Hola a todos, les cuento que estoy haciendo una web y me surgio una inquietud. estube viendo como estan conformadas distintas paginas conocidas y me ...
  #1 (permalink)  
Antiguo 07/06/2012, 19:41
 
Fecha de Ingreso: febrero-2012
Mensajes: 99
Antigüedad: 12 años, 2 meses
Puntos: 4
Distintos navegadores

Hola a todos, les cuento que estoy haciendo una web y me surgio una inquietud. estube viendo como estan conformadas distintas paginas conocidas y me di cuenta que por ejemplo el background lo ponen asi:

background: #54779F url(Fondo.png) repeat left top;
background: #54779F url(Fondo.png) repeat scroll left top, -moz-radial-gradient(center center , circle farthest-corner, rgb(110, 144, 188) 0pt, rgb(66, 105, 144) 100%) repeat scroll 0% 0% transparent;
background:url(Fondo.png) repeat left top,-webkit-radial-gradient(center,circle cover, #5E90BC 0, #426990 100%);

es decir que lo repiten 3 veces (segun para cada navegador). otro ejemplo que estube viendo es que por ejemplo si quieren poner q el borde es 0 en vez de poner border:0; lo que hacen es poner cada borde en 0 (el de arriba, abajo, izquierda, derecha).

¿¿que otras cosas yo deberia tener cuidado de ponerlas para cada navegador o de especificar detalladamente (como el ejemplo que di del borde)??
  #2 (permalink)  
Antiguo 07/06/2012, 20:43
Avatar de pablolombardo  
Fecha de Ingreso: marzo-2012
Ubicación: Mar del Plata
Mensajes: 65
Antigüedad: 12 años, 1 mes
Puntos: 8
Respuesta: Distintos navegadores

Hay que especificar todos aquellos atributos que aún no son estándares pero que igual los navegadores los están utilizando, por ejemplo los degradados que mencionás. La mayoría relacionados con CSS3.
Si querés profundizar en [URL="http://www.w3schools.com/cssref/"]W3school[/URL] tenés el detalle de cada atributo y que navegador lo soporta.

Y sino lo más sencillo es validar tu html con la [URL="http://validator.w3.org/"]W3C[/URL], en el cual ingresas tu código y te indica si algo no es estándar.

En ese caso tenés herramientas como [URL="http://cssprefixer.appspot.com/"]CCCPrefix[/URL] que te escriben todos los prefijos que necesites automaticamente o Jquerys aún mejores.

Saludoss.
__________________
Pablo Lombardo
http://www.pablolombardo.com/
  #3 (permalink)  
Antiguo 07/06/2012, 20:44
Avatar de pablolombardo  
Fecha de Ingreso: marzo-2012
Ubicación: Mar del Plata
Mensajes: 65
Antigüedad: 12 años, 1 mes
Puntos: 8
Respuesta: Distintos navegadores

Por otro lado border:0 funciona desde 1999 sin problemas...... o antes seguro....
__________________
Pablo Lombardo
http://www.pablolombardo.com/
  #4 (permalink)  
Antiguo 07/06/2012, 21:05
 
Fecha de Ingreso: febrero-2012
Mensajes: 99
Antigüedad: 12 años, 2 meses
Puntos: 4
Respuesta: Distintos navegadores

y entonces por que razon cuando yo veo el css de alguna web en el chrome, hay algunos atributos del css que estan tachados?
  #5 (permalink)  
Antiguo 07/06/2012, 21:22
Avatar de pablolombardo  
Fecha de Ingreso: marzo-2012
Ubicación: Mar del Plata
Mensajes: 65
Antigüedad: 12 años, 1 mes
Puntos: 8
Respuesta: Distintos navegadores

Supongo que te referís a cuando el Firebug te las tacha??
Eso lo hace cuando la propiedad no se está utilizando porque otra regla tiene mas prioridad. Pero no es porque la propiedad no funcione, simplemente está funcionando otro que la anula...
__________________
Pablo Lombardo
http://www.pablolombardo.com/
  #6 (permalink)  
Antiguo 07/06/2012, 21:32
 
Fecha de Ingreso: febrero-2012
Mensajes: 99
Antigüedad: 12 años, 2 meses
Puntos: 4
Respuesta: Distintos navegadores

y como le puedo asignar la prioridad?
  #7 (permalink)  
Antiguo 07/06/2012, 21:50
Avatar de pablolombardo  
Fecha de Ingreso: marzo-2012
Ubicación: Mar del Plata
Mensajes: 65
Antigüedad: 12 años, 1 mes
Puntos: 8
Respuesta: Distintos navegadores

Por ejemplo si el body tiene una fuente Arial entonces todos los elementos dentro del body van a tener la fuente Arial verdad?

Si vos ahora a un div cualquiera dentro del body, le asignas la fuente Times New Roman entonces todo el body va a ser Arial menos lo que esté dentro del div que va a ser Times New Roman ¿verdad?

En este caso si inspeccionas el div. El Firebug te va a marcar font-family:arial tachado porque la otra fuente tiene mas prioridad...

¿Me pude explicar? Sino alguien tal vez lo pueda explicar mejor..

No es que uno le asigna prioridad, esta se da según las reglas que uno va escribiendo...(Bueno en realidad técnicamente existe !important que si le da mayor prioridad, pero no va a el caso acá...)
__________________
Pablo Lombardo
http://www.pablolombardo.com/
  #8 (permalink)  
Antiguo 07/06/2012, 23:36
Avatar de cristian_cena
Colaborador
 
Fecha de Ingreso: junio-2009
Mensajes: 2.244
Antigüedad: 14 años, 9 meses
Puntos: 269
Respuesta: Distintos navegadores

Hola bra_lf, responder todo de una sola vez sería muy extenso, por tanto me voy a limitar a dejarte algunos links para que lo investigues vos mismo:

Cita:
Iniciado por brai_lf
es decir que lo repiten 3 veces (segun para cada navegador).
Esto no está bien. Debes trabajar con comentarios condicionales o detectar el user agent y hacer una carga condicional de estilos (no puedes solo con css, debes recurrir a un lenguaje de programación) o usar modernizr [1][2] (libreria javascript para compatibilidad entre html5 y browsers viejos)
Cita:
Iniciado por brai_lf
en vez de poner border:0; lo que hacen es poner cada borde en 0 (el de arriba, abajo, izquierda, derecha).
Algunas propiedades css pueden escribirse de varias maneras, a esto se lo denomina shorthand o forma corta.
http://www.librosweb.es/css_avanzado...shorthand.html
Cita:
Iniciado por brai_lf
hay algunos atributos del css que estan tachados
Como bien te indican, firebug o el inspector de codigo que estas usando te esta avisando que esta propiedad esta siendo heredada. En css las propiedades pueden heredarse, esta característica le da el nombre de "estilos en cascada", determinadas propiedades establecen ciertas reglas de herencia según el elemento html, por ejemplo: font-size se hereda mientras que width no. Solo debes tener una referencia a mano, al menos al principio. [1][w3c]

Luego ten cuidado de no confundir herencia con prioridad (coalision)
Tener en cuenta que los estilos se jerarquizan según estén en una hoja de estilo externa, dentro de el tag style en head, o embebidos en la propia etiqueta, dicha jerarquía puede alterarse usando el comando !important

Si queres que veamos puntualmente algo nada más lo decis y lo vemos. suerte

Última edición por cristian_cena; 07/06/2012 a las 23:44

Etiquetas: distintos, navegadores, fondo
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 11:20.