Webmaster Libre

Supongo que todos sabemos lo difícil que puede resultar conseguir que nuestras páginas se vean bien en todos los navegadores, en múltiples ocasiones nos vemos forzados a usar fragmentos de código propietario, que rompen con la validación, para conseguir efectos sencillos en determinados navegadores (no miro para ninguno…).

Por suerte, tenemos a nuestra disposición diversos mecanismos para facilitarnos, en la medida de lo posible, la labor de obtener páginas compatibles con todos los navegadores y que validen contra los estándares web.

El Reinicio Global:

Uno de los problemas que nos solemos encontrar al probar las páginas en diferentes navegadores es la hoja de estilo propia de cada uno. Me explico, cada navegador dispone de una hoja de estilo “por defecto” que, lamentablemente, es diferente en todos ellos. De ahí las inconsistencias de diseño como, por ejemplo, el indentado de las listas (Safari y todos los navegadores basados en Gecko utilizan padding-left para indentar mientras que Internet Explorer utiliza margin-left).

Para evitar volvernos locos con los márgenes y el padding podemos incluir la siguiente regla en el CSS

* {
margin: 0;
padding: 0;
}

Así desaparecerá todo el padding y los márgenes por defecto y podremos dar un estilo homogeneo a la página para todos los navegadores, al menos en este aspecto.

Instrucciones de estilo específicas para Internet Explorer

Internet Explorer con sus “peculiaridades” nos obliga a adoptar soluciones drásticas para hacer que nuestras páginas se muestren correctamente, por ejemplo los problemas con los elementos flotados, los márgenes y el padding.

Fallos del Propio IExplorer:

Ya lo comentabamos el otro día, cuando hablabamos del centrado de elementos verticalmente con CSS. El explorer no comprende los selectores de atributo y los ignora, lo que nos permite incluir en una sola hoja de estilo instrucciones para los navegadores conformes a los estándares e instrucciones para el explorer, sin recurrir a hacks (como el de anteponer un guión bajo “_” a las instrucciones que queramos que sólo sean interpretadas por el Explorer) con lo que, a pesar de ser una solución algo “sucia”, seguimos generando una hoja de estilo válida.

Por ejemplo:

.centrado {
position: absolute;
top: 50%;}

.centrado[class] {
display: table-cell;
vertical-align: middle;
text-align: center;
position: static;}

Los Comentarios Condicionales

Por medio de los comentarios condicionales, que la misma Microsoft recomienda, podremos detectar el navegador del visitante y si este es Internet Explorer servirle una hoja de estilo que sea capaz de digerir o, en el peor de los casos, un javascript que nos permita suplir algun defecto.

Por ejemplo,

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

Nos serviria para servir una hoja de estilo adicional para los usuarios de explorer.

Es posible concretar más con los comentarios condicionales, si os interesa profundizar un poco más podéis echar un vistazo al documento de Microsoft sobre los comentarios condicionales.

Los comentarios condicionales son la forma más adecuada de servir reglas de estilo específicas para Explorer, así no penalizamos a los usuarios del resto de navegadores con un incremento del peso de la página. Y, por supuesto, no rompemos con la validación aunque utilicemos filtros propietarios ya que estos permanecerán en la hoja de estilo “no estándar”.