Contenido

Como conseguir compatibilidad entre navegadores siempre

19 Jun

+ 20

Cuando has terminado una aplicación y la abres con un navegador diferente al que lo habías hecho durante la fase de desarrollo, te das cuenta de que te queda prácticamente el mismo tiempo que has tardado en desarrollar la aplicación puliendo los detalles en los diferentes navegadores.

Este es el mayor problema con el que nos encontramos los desarrolladores web y por el que más me han solicitado ayuda por mail. Ya hemos hablado varias veces de por que ocurre esto, y básicamente es por que cada equipo de desarrollo encargado de desarrollar cada uno de los navegadores interpreta de una forma u otra los estandares definidos por la W3C. De ahí que aparezcan tests con los que la W3C se asegura de que los navegadores han entendido lo que solicitaban.

Por suerte o por desgracia, existen centenares de navegadores y nunca podemos saber a ciencia cierta que navegador va a usar cada visita, por ese motivo tenemos que pulir nuestro código, añadir opciones específicas (los llamados hacks) o incluso desarrollar sitios aposta para abarcar el máximo de estos navegadores.

Solo la experiencia nos hará reducir el tiempo que perdemos en estas “modificaciones”. Hay mucha gente muy buena, con muchísima experiencia que comparte sus conocimientos y de esta gente tenemos que aprender, por ello una lista de “normas” a tener en cuenta antes de empezar nos podría ayudar a conseguir el equilibrio perfecto

  1. Siempre usa el DOCTYPE strict y valida los estandares HTML/CSS
  2. Usa siempre un sistema para resetear tus CSS
  3. Usa opacity:0.99 en elementos de texto para limpiar el renderizado de Safari
  4. Nunca redimensiones imagenes desde el CSS o HTML
  5. Revisa el renderizado de la fuente en todos los navegadores. Nunca uses Lucida.
  6. El tamaño del texto es % en el body y em para el resto
  7. Todos los divs flotantes deben llevar display:inline y overflow:hidden
  8. Los contenedores deben tener overflow:auto y activa hasLayout usando un width o un height
  9. No uses ningún estilo CSS3 extravagante
  10. No uses imagenes PNG transparentes a menos que hayas cargado el apha.

Me gustaría saber más sobre el truco de usar opacity:0.99 en elementos de texto para limpiar el renderizado de Safari.

No me queda claro a que se refiere, gracias.

@Carlos Leopoldo: Ahora parece que el sitio está caido, pero cuando se pueda mira de acceder y podrás ver 2 imagenes, una postrando el código sin el opacity:0.99 y otra con él. Simplemente hace las letras en Safari se vean de forma más clara.
Pero como te decía antes, una imagen vale más que mil palabras :D

@aNieto2k ya lo estoy viendo y sí, no conocía ese efecto.

Mm. Los que trabajamos en este medio sabemos, de antemano, que no existe el “crossbrowsing”, ni mucho menos, al pixel. La idea sin embargo, es moverse entre temas para mantener cordura, pero es que hay cosas que son imposibles de reproducir.

De lo que has escrito, no he visto ningún problema, salvo el tema del .99 que me parece, erróneo, pero bueno, lo que más me ha shockeado es el: “Nunca uses Lucida.”

¿Cuál es la razón por la cual no puedo utilizar este tipografía?

Como dices, la experiencia es más que nada la principal herramienta para lograr lo más cercano al crossbrowsing ya que la mayoría de los problemas son siempre los mismos.

Demás está nombrar la potencia de height:1% para los elementos en Internet Explorer (activando el hasLayout) ya que en gran parte son siempre problemas de este tipo los que se presentan. Saber utilizar los comentarios condicionales ahorarrá muchas horas de frustración.

@mini-d: Principalmente es por un problema con el render de Internet Explorer 7, en el que Lucida Grande se ve bastante diferente con respecto a la misma fuente en Firefox, Safari.

Buenos consejos, gracias. Muy chulo el diseño nuevo :P

Si a mi me pasaba lo mismo con Lucida, no entendía porque se ve tan fea en firefox y en ie6 y en el ie7 se ve notable.

Pero yo la voy a seguir usando, espero que firefox 3 que ahora lo baje suavice también las letras, algo a favor de ie7 lo unico quizás.

saludos de paraguay

Os recomiendo que des crédito al post original. No es bueno andar por ahí diciendo cosas de otros.

http://anthonyshort.com.au/blog/comments/how-to-get-cross-browser-compatibility-everytime/

Añadiría: No te olvides del position:relative para el cojonero del IE.

Interesante, gracias.
Saludos.

@Anthony: Revisa los enlaces del post.

Saludos.

Muchas gracias. Va a del.icio.us y a un post-it en mi escritorio.

Muchísimas gracias por este post taaaaan útil.
Al del.icio.us del tirón.

Es muy bonito decir “revisa los enlaces del post” para dar con el artículo original en el que te basas. Pero la mayoría de la gente no mira qué enlaces pones y piensa que el post lo has escrito tú desde el inicio. No estaría mal que pusieras claramente que el artículo NO lo has escrito tú, solo lo has traducido, y poner el link MÁS CLARO.

Comentar

#

Me reservo el derecho de eliminar y/o modificar los comentarios que contengan lenguaje inapropiado, spam u otras conductas no apropiadas en una comunidad civilizada. Si tu comentario no aparece, puede ser que akismet lo haya capturado, cada día lo reviso y lo coloco en su lugar. Siento las molestias.


Cerrar
Enviar por Correo