Desarrollo web Programación con PHP Maquetación con HTML, CSS y JavaScript SEO on site y WPO Estándares recomendados por W3C Accesibilidad web Redacción de contenidos multilingües Fotografía

5 técnicas para facilitar el cross browsing

En este artículo voy a exponer una serie de técnicas y recursos para facilitar el Cross Browsing. ¿Y qué es eso?, pues no es más que un "palabro" nuevo (bueno, ya no tanto) para definir a lo que se dedica un maquetador web (también leído en twitter como pintacajas), desarrollador web o, como nos gusta definirlo ahora, front-end developer. Consiste en que la web a desarrollar sea fiel al diseño e interacción en los distintos navegadores, y si es posible, en sus distintas versiones. Desde ya os puedo decir que esto es casi imposible, bueno, si descartas Internet Explorer 6 y 7 es más fácil, entonces, ¿qué hacemos? pues utilizar la mejora progresiva. Lo expuesto aquí también servirá para eso.

Volviendo al tema, una definición acertada sería la que hace Iván Mendoza en el artículo Cross Browsing y CSS3, de donde copio y pego la siguiente cita:

Cross Browsing, en resumen, consiste en realizar un sitio o aplicación web compatible entre más de un navegador, usualmente se utiliza cuando tu sitio web es compatible con navegadores que utilizan estándares y además Internet Explorer (que suele interpretar código a su modo), aunque el termino es válido para cualquier navegador.

El artículo tiene algo de tiempo, que no por eso está obsoleto, y además, el acierto en mencionar a Internet Explorer, que para eso es el navegador que dá más quebraderos de cabeza en esto del Cross Browsing, por lo menos en sus versiones más "castizas", y como podréis comprobar más adelante en este artículo. Algunos dirán que Internet Explorer 10 ya no es un IE como los de antes.

Reset CSS

Una técnica recomendadísima desde tiempos inmemorables. Yo la descubrí en los tiempos en los que la burbuja inmobiliaria estaba a puntito de estallar. Ampliamente usada por la comunidad, pero que los que empiezan y que aún no la han usado en sus desarrollos les recomiendo que lo hagan para los nuevas web.

¿En qué consiste? pues en resetear los estilos por defecto de cada navegador. Si amigos, cada navegador aplica un hoja de estilos, y además no es estándar para todos. Cada navegador usa una diferente. Por eso es tan común encontrarse que al aplicar reglas de diseño en CSS la web se vea diferente en los distintos navegadores (incluso versiones del mismo). Yo diría más, que sin aplicar reglas CSS, escribiendo él código HTML, también verás diferencias en distintos navegadores.

Un reset CSS que podemos aplicar como punto de partida es el propuesto por Eric Meyer (no olvidéis seguir por twitter a este "chaval") y que puedes ampliar según tus necesidades:

Compatibilidad entre IE7 e IE8

Logo Internet ExplorerCon la aparición de Internet Explorer 8 por un momento pensé que se acabarían todos mis dolores de cabeza a la hora de diseñar.

Encontré una solución para el dichoso botón de compatibilidad que tenía este navegador y no tener que realizar otra hoja de estilos más para otra versión del navegador de Microsoft.

Algunos derechos reservados ©

Esta web utiliza cookies de terceros. Si sigue navegando entiendo que está de acuerdo con su uso: Más información Cerrar