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:

/* v1.0 | 20080212 */
 
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, font, 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 {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-size: 100%;
  vertical-align: baseline;
  background: transparent;
}
body {
  line-height: 1;
}
ol, ul {
  list-style: none;
}
blockquote, q {
  quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
  content: '';
  content: none;
}
 
/* No olvides definir estilos para focus */
:focus {
  outline: 0;
}
 
/* No olvides resaltar de alguna manera el texto insertado/borrado */
ins {
  text-decoration: none;
}
del {
  text-decoration: line-through;
}
 
/* En el código HTML es necesario añadir cellspacing="0" */
table {
  border-collapse: collapse;
  border-spacing: 0;
}

El código CSS lo he obtenido de la web de LibrosWeb.es, capítulo Buenas prácticas - Inicializar los estilos. Web muy recomendable para los que comienzan a trabajar en desarrollo web. En el enlace anterior podéis ampliar información sobre esta técnica. Por cierto, que no es el único Reset CSS que hay por la web, buscad y encontraréis miles de propuestas.

Por cierto, tras resetear estilos, deberías de iniciar los estilos de cada elemento al gusto.

Desactivar boton compatibilidad de Internet Explorer

En este caso nos centramos en el navegador Internet Explorer versiones 7, 8, 9 y 10. Esta técnica ya la comenté en un minúsculo artículo que llamé Compatibilidad entre IE7 e IE8, y que combinando la técnica anterior de Reset CSS con esta, funcionaba bastante bien.

Para los más jóvenes y que no se han peleado con Internet Explorer 6 o 7, Microsoft hace unos años sacó al mercado Internet Explorer 8, que nos llenaba de esperanza a los picateclas o pintacajas haciéndonos creer que se acabaría el calvario de sus versiones anteriores. Pero desgraciadamente no fue así, como cada versión nueva que sacaba, al comprobar webs ya creadas y con sus correspondientes técnicas de Cross Browsing de antaño (básicamente hacks y comentarios condicionales), lo que ocurría era lo que me permito llamar un Bárcenas, por lo de mierda que volvía a salpicar.

A sabiendas de lo que podía ocurrir con esta nueva versión, a Microsoft se le ocurrió la brillante idea de incorporar a su navegador el botón de compatibilidad, así las web ya creadas que no renderizaban correctamente en el nuevo motor de IE8, volvían a renderizar correctamente pulsando este botón. Al pulsarlo usabas el motor de renderizado de IE7 y ¡voilá! todo volvía a la normalidad, que era usar todas las mierdas (técnica de Cross Browsing basada en hacks css y comentarios condicionales para IE) que habías aplicado para IE7. No me queda claro si el usuario usaba este botón en algún momento, tampoco he buscado ninguna estadística de uso del botón, ni pienso hacerlo, para eso os invito a que dejéis algún comentario si os hace ilusión ilustrarme. Solo decir que este botón sigue en activo en las versiones posteriores, aunque no tengo ni idea de que motor de renderizado usará IE10 al pulsar el botón.

Si habéis leído el artículo enlazado como si no, lo que hace esta técnica es simplemente indicarle en la cabecera de la página que motor de renderizado debe usar Internet Explorer, y deshabilitar el botón de compatibilidad de este navegador, negando la posibilidad de uso del botón al usuario.

En la actualidad se desaconseja el uso de esta técnica, pero si seguís pensando en usarla, el fragmento de código recomendado es el siguiente:

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>

Vale la pena recordar que este fragmento de HTML debe ir siempre antes de cualquier declaración o link a CSS y/o JavaScript de la cabecera, sino no funcionará. Para más info de uso visitar el artículo enlazado al comienzo de la explicación de esta técnica y que está en este mismo blog.

Comentarios condicionales en Internet Explorer

Esta otra técnica histórica está centrada en realizar Cross Browsing para muchas versiones de Internet Explorer, yo lo he usado para 6, 7, 8 y 9. ¿Y qué pasa a partir de la versión 10?, pues que Microsoft ha decidido dejar de dar soporte a comentarios condicionales para la versión 10 y superiores. Los motivos y soluciones los podéis leer en ese enlace.

Si por casualidad pasáis de leer el artículo enlazado, os pongo aquí lo más curioso. Podéis hacer que Internet Explorer 10 se comporte como su versión anterior, la 9, con (¡oh nooooo!) una nueva etiqueta en el head del HTML:

<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE9"/>

Mi sorpresa por esta curiosidad es porque acabo de descubrirlo, como podéis comprobar si habéis leído el artículo completo hasta el momento. ¿Otra chapuza de Microsoft para Internet Explorer?, me da igual, en todo caso el mismo artículo habla que a largo plazo se debería de eliminar dicha dependencia (sabe dios que eliminaría yo). Parece toda una declaración de intenciones por parte del equipo de desarrollo de IE, además, todo el mundo habla maravillas de la versión 10 de IE. Bueno, centrándonos en esta técnica, veamos como se usa.

Para todos los navegadores de la familia IE

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

Para versiones específicas de IE

<!--[if IE 9]>
 <link rel="stylesheet" type="text/css" href="/blog/css/cssParaIE.css" media="screen">
<![endif]-->
<!--[if IE 8]>
 <link rel="stylesheet" type="text/css" href="/blog/css/cssParaIE.css" media="screen">
<![endif]-->

Por grupos de versiones

Para ellos se usan varios operadores que comento en la siguiente lista:

lt: Menor que.
gt: Mayor que.
lte: Menor igual que.
gte: Mayor igual que.
&: (and) Se cumple las dos condiciones.
|: (or) Se cumple una de las dos condiciones.
!: (not) No es el indicado en la condición.

Vamos a verlo en ejemplos para que quede más claro:

<!--[if lt IE 8]>
 <link rel="stylesheet" type="text/css" href="/blog/css/cssParaIE.css" media="screen">
<![endif]-->

<!--[if lte IE 8]>
 <link rel="stylesheet" type="text/css" href="/blog/css/cssParaIE.css" media="screen">
<![endif]-->

<!--[if  (gt IE 8) & (lt IE 8)]>
 <link rel="stylesheet" type="text/css" href="/blog/css/cssParaIE.css" media="screen">
<![endif]-->

<!--[if (IE) & !(IE 8)]>
 <link rel="stylesheet" type="text/css" href="/blog/css/cssParaIE.css" media="screen">
<![endif]-->

Con estos ejemplos creo que se entiende bastante bien de que va la cosa. Si queréis ver más ejemplos y ampliar información dirígete a Comentarios condicionales, filtros y hacks (CSS avanzado) donde amplían esta información y además hablan de filtros y hack, técnica que yo me voy a saltar en este artículo porque pretendo incluir otras técnicas más avanzadas.

No dejéis de ver esta web http://www.conditional-css.com/ (en inglés) con una técnica avanzada basádonse en la idea de los comentarios condicionales y que consiste en preprocesar el CSS en el servidor utilizando otros lenguajes de programación. Esto da para otro artículo.

Aumentar capacidades de Internet Explorer

Como resulta evidente ya en este artículo, casi todo va dirigido a resolver las incompatibilidades de Internet Explorer, y pensaréis que pesado este navegador, ¿no sería más fácil dejar de darle soporte a este navegador? pues si y no. Actualmente tiene una cuota de mercado bastante alta, pero si soy sincero yo sólo daría soporte desde Internet Explorer 8 en adelante o la mejora progresiva. Por ejemplo, las estadísticas de este blog reflejan que los usuarios de Internet Explorer (cada día menos y menos mal porque se ve como el culo) usan versiones bastante recientes de este navegador. Aunque no tiene que ser la tónica general para el resto de blog, dependerá de la temática, nicho y cosas así.

Centrándome en esta técnica, que no es una técnica es un recurso muy recomendable a usar (yo lo hago). Consiste en añadir en el head el siguiente código:

<!--[if lt IE 9]>
  <script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js"></script>
<![endif]-->

¿Y qué hace este código?, pues nada más y nada menos que ampliar las capacidades de IE8 (e inferiores) en temas de CSS (por ejemplo lo selectores), además de corregir varios bugs de los navegadores. Todo ello podéis encontrarlo documentado y explicado (en inglés) en la página IE7.js Test Pages. Dependiendo de la versión de Internet Explorer corregirá y/o ampliará más sus capacidades. Aquí el que sale ganando es la versión 8.

Como se puede comprobar hace uso de los comentarios condicionales explicados anteriormente. Como punto negativo (si podemos decir eso) este JavaScript hace más lenta la carga de la web en los navegadores a los que afecte. Como punto positivo el desarrollador tendrá que hacer menos correcciones sobre la hoja de estilos y podrá usar selectores más avanzados (por ejemplo algunos implementados en la especificación CSS3) en Internet Explorer 8.

Detectar navegador y dispositivo con PHP y/o JavaScript

Llegamos a un recurso que es para todos los navegadores -pues ya era hora -pues sí. Y es que vamos a intentar (no, no es solo intentar, lo vamos a conseguir) detectar tanto el dispositivo como el navegador con el que accedemos a la web.

Y eso, ¿cómo se hace?, pues de diversas formas y colores. Tenemos a Modernirz, una librería de lo más guapa basada en JavaScript y que te mete un churro de cosas en una propiedad class de la etiqueta, y que básicamente lo que hace es indicarte que propiedades puedes emplear en tus CSS en ese navegador.

Modernirz es una librería JavaScript que detecta HTML5 y CSS3, y te facilita escribir condicionales para JavaScript y CSS, manejando si el navegador es compatible o no.

Bueno, no es exactamente lo que dice, pero seguro que la idea es esta.

Seguro que hace más cosas, pero en todo caso no voy a profundizar en Modernirz ya que no lo he usado en mi vida: -¡¡cómo que no!! -pues como que no -¡¡pero si lo usa bootstrap!! -vale, es que tampoco lo he usado, que no quiere decir que no la utilice en el futuro cercano (ya me estoy pegando con ello en mi trabajo); y bueno, espero que por esto no me dejéis de hablar, además seguro que encontráis muchísima información. La página de Modernirz también tiene una documentación preciosa (en inglés) donde os indica como usar la librería con ejemplos, test y wiki entre otros.

Otra forma, y que si he usado, es detectar el dispositivo en PHP con la librería PHP-MOBILE-DETECT, y no solo el dispositivo, también el navegador. ¿De qué se trata esta librería? pues no es más que una clase en PHP que se han molestado en construir con un churro gigante de varios arrays donde se indican dispositivos, navegadores, sistemas operativos, etc, y que compruebo que su última versión está muy completa. Por ejemplo en la versión que yo he usado hasta el momento no existía el método para obtener el navegador con el que se accedía a la web. Eso no impedía crear un método para ello. En mi caso decidí crear una nueva clase (o si os gusta más subclase) aplicándole el principio de herencia de la POO de la librería descargada. En todo caso os recomiendo descargar la última versión y usarla.

¿Cómo usamos este recurso? pues lo primero es tener un servidor que sirva páginas PHP, sino tienes este tipo de servidor, mejor utiliza Modernirz. Segundo, nos descargamos la librería y la ponemos en algún lugar de nuestro proyecto web en PHP y tercero y último tener ciertos conocimientos de PHP y Programación Orientada a Objetos.

Ok, ya hemos comprobado que mi servidor tiene soporte para PHP y tengo la librería descargada, y ¿ahora qué?, pues vamos a usarla. Voy a realizar un ejemplo muy sencillo, detectar el navegador. La clase tiene otros métodos que nos devolverán otros datos si los invocamos.

<?php 
 require_once 'Mobile_Detect.php';
 $detectar = new Mobile_Detect();
?>

Ya tenemos el objeto creado. Ahora accediendo a uno de sus métodos utilizaremos el valor de retorno para usarlo como un atributo class en nuestro HTML. Lo usaremos en la etiqueta, por ejemplo:

<body class="<?php echo $detectar->getUserAgent; ?>" >

Al ser un class, o cualquier otro atributo, eso depende de ti, en HTML5 ahora están los atributos data*, podrías utilizarlo en tus CSS para corregir las diferencias entre navegadores sin usar los dichosos hack css, que a estas alturas no traen nada bueno y están fuera de toda recomendación, por lo menos de la mía. Con un poco de imaginación podrías cargar CSS y/o JavaScript para navegadores o dispositivos específicos (¡madre mía que lío!) y eliminar los comentarios condicionales anteriormente citados, o usar una mezcla de ambos, cargar imágenes según que dispositivo estés usando, etc. Todo depende de ti si usas este recurso.

En todo caso sobre esta clase hay también mucha documentación y no es el motivo de este artículo desgranarla. Para eso habría que escribir otro artículo ya que este es ya lo suficientemente extenso y me extraña que llegues hasta aquí.

Espero os resulte de ayuda este resumen de algunas de las técnicas que he usado. Menos mal que eran 5 porque seguramente navegando por internet encuentres muchas más. Ale, ya podéis ponerme a parir por no usar bootstrap, y que conste que no tengo nada contra él, bueno un poco si.