Visualización web multinavegador | Adrenalina

Visualización web multinavegador

cross-browser-compatibility

Cuando desarrollamos una web siempre nos encontramos en la encrucijada de como se visualizará dicha web en cada navegador. Ya que los navegadores, lejos de normalizar unas reglas estándares i respetarlas aplican las que a ellos les parecen de base, complicando la vida de los desarrolladores web.

Pongamos un ejemplo, la mayoría de navegadores establece una distancia entre la ventana del navegador y el contenido de la web, pero cada uno elige la que le parece.

Para aligerar el problema, nosotros como desarrolladores, podemos resetear las reglas de margen y padding de base, poniendo de base en nuestro css

* { margin: 0; padding: 0; }

De manera que a posteriori deberemos definir cada margin y padding para cada elemento que usemos, pero nos permite saber que minimizaremos las diferencias entre navegadores por lo menos un poco.

Por esta razón se ha popularizado el uso de un archivo, comunmente llamado reset.css, cuya función es poner de inicio unas reglas de juego lo mas parecidas posibles para todos los navegadores.

El reset.css con mayor éxito entre los desarrolladores es el propuesto por Eric Meyer:

/* http://meyerweb.com/eric/tools/css/reset/ License: none (public domain) */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; } /* HTML5 display-role reset for older browsers */ article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } body { line-height: 1; } ol, ul { list-style: none; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; } table { border-collapse: collapse; border-spacing: 0; }

Sin embargo, este css es sólo un punto de partida, debe ser editado y “tuneado” al gusto para adaptarse a las necesidades y estilos de la web que desarrollemos.

Otras herramientas que podemos usar los desarrolladores para combatir las incorrectas visualizaciones de Internet Explorer son los comentarios condicionales, que nos permitirán añadir código sólo para IE para solucionar problemas:

<!--[if IE]> <link href="ie.css" rel="stylesheet" 
type="text/css" /> <![endif]-->

También podemos aplicar reglar sólo a versiones:

<!--[if IE6]> <link href="ie.css" rel="stylesheet" 
type="text/css" /> <![endif]-->

Finalmente, podemos utilizar funciones específicas del lenguaje que estemos usando para detectar el navegador usado y añadir código en función del resultado. Existen classes en php que facilitan el trabajo, así como en jquery por poner unos ejemplos, de manera que le podemos dar al body una clase específica según el navegador y aplicar unas reglas css pertinentes.

Incluso podemos hacerlo en WordPress mediante filtros:

add_filter('body_class','browser_body_class');
function browser_body_class($classes) {
global $is_lynx, $is_gecko, $is_IE, $is_opera, $is_NS4,
$is_safari, $is_chrome, $is_iphone;
if($is_lynx) $classes[] = 'lynx';
elseif($is_gecko) $classes[] = 'gecko';
elseif($is_opera) $classes[] = 'opera';
elseif($is_NS4) $classes[] = 'ns4';
elseif($is_safari) $classes[] = 'safari';
elseif($is_chrome) $classes[] = 'chrome';
elseif($is_IE) $classes[] = 'ie';
else $classes[] = 'unknown';
if($is_iphone) $classes[] = 'iphone';
return $classes;
}

Suerte en la batalla contra los navegadores.

 

Autor: Lluis Torns

Estudiamos y analizamos su negocio en profundidad, definimos objetivos y planteamos la estrategia de marketing más adecuada centrándonos en conseguir cada uno de los objetivos propuestos. Solicita Presupuesto Ahora

Uso de cookies

En este sitio web utilizamos cookies propias y de terceros para mejorar nuestros servicios, para que usted tenga la mejor experiencia de usuario y analizar su visita. Si continúa navegando está dando su consentimiento para la aceptación de las mencionadas cookies y la aceptación de nuestra política de cookies, pinche el enlace para mayor información.