Cómo ajustar un diseño web html a explorer+firefox+opera+chrome
Como buenos diseñadores web que somos (o pretendemos ser), nuestro objetivo debe ser que una web se vea, si no exactamente igual en todos los navegadores (misión casi imposible por definición), al menos sí que no se note la diferencia o, cuanto menos, que no se descuadre nada.
Los que nos dedicamos a hacer webs llevamos años lidiando con este problema: cuadrar un diseño web en todos los navegadores de internet. El caso es que todos los navegadores web siguen unas normas estándar para interpretar el código HTML, aunque siempre hay pequeñas variaciones entre unos y otros. Sin embargo, Internet Explorer es, de todos, el que más se salta a la torera las reglas. Esto resulta muy tedioso a la hora de ajustar un diseño.
Hemos llegado a ver diversas formas de hacer ciertos “apaños” para solucionar este grave problema que viene generado, principalmente, por Internet Explorer. Cabe decir que las últimas versiones del Explorer han corregido ya algunas cosas flagrantes, pero, aún así, siguen habiendo otras que siguen haciendo descuadrar muchos diseños. Apaños del estilo de usar un javascript para detectar qué navegador usamos y, en base a eso, cargar una CSS o otra, o un HTML u otro. Esto es una solución bastante chapuza, aunque bastante extendida por aquello de que no había otra solución conocida mejor. Uno al final aprende qué tipo de cosas debe evitar al hacer una web (aquellas que resultan incompatibles o hacen saltar chispas en el Internet Explorer).
Una de las máximas a seguir para hacer una web lo más compatible posible (visualmente hablando) es la de la sencillez de código. Cuanto menos código HTML resultante tengamos, menos posibilidades de que algo casque. Es decir, si tenemos muchas capas anidadas o muchas tablas anidadas tendremos muchas posibilidades de que no se vea igual en todos los exploradores. También hay que tener en cuenta que hay que definir cuanto menos mejor: los altos y los anchos de partes del diseño de la web. Suele ser común marcar una div para que sea de ancho 100px y dentro colocar una serie de divs de ancho 100px: esto no es necesario. La div por defecto se expande en horizontal al máximo: si la div de fuera se ha fijado a 100px, la de dentro, sin decirle nada, alcanzará 100px. Esto es cierto para todos los objetos de tipo block, a excepción de las tablas (que habría que especificar un width=”100%”). Esto es muy práctico para ajustar los diseños, pues retocando podemos llegar a paradojas del tipo “el contenido es más grande que el contenedor” y cada navegador solucionará este problema de un modo distinto, presentando resultados distintos.
En segundo lugar, intentar hacer un diseño ajustable, que su diseño no dependa de cuadrar al pixel alturas y anchuras, es decir, que la web pueda crecer mínimamente si lo requiere en algunas partes. Esto puede ocurrir, por ejemplo, cuando se representa un texto en la web, pues no todos los exploradores renderizan igual el texto: Un párrafo de Arial 12px no se representa exactamente igual, es posible que los ajustes, los espacios, los justificados, etc, se calculen de diferente manera. Recordemos también que es posible que un tipo determinado de letra no esté instalada en todos los ordenadores, lo que hará que el navegador coloque otra fuente lo más parecida posible. Inevitablemente, si nuestro diseño depende de que la palabra del menú “inicio” sea exactamente de 47px de ancho por 12px de alto, en muy pocos ordenadores se verá bien.
En tercer lugar: tener en cuenta que los navegadores ponen tamaños y márgenes por defecto para todas las etiquetas, y no tienen por qué cuadrar entre ellos. Por ejemplo, las etiquetas H1, H2, P, etc, suelen tener unos tamaños de letra, interlineado, indentado y márgenes preasignados por el navegador. La solución es simple: definir en la CSS qué fuente, tamaño, interlineado y márgenes queremos que represente exactamente la etiqueta asignada.
En cuarto lugar, o quizás debiera ser el primero, tenemos que asegurarnos que nuestro código HTML está impecable. El error más grave que podemos tener es estar horas ajustando un diseño que en realidad tiene las etiquetas HTML mal cerradas. Si un navegador se encuentra en la tesitura de representar un código con etiquetas mal cerradas, nos podemos encontrar que internamente él intenta arreglarlo. Ni que decir tiene que cada navegador lo “arreglará” de diferente manera. Podemos caer en el error de pensar que nuestra web está perfecta porque se ve bien en un sólo navegador. Para verificar que tenemos las etiquetas bien puestas y además asegurarnos que nuestro HTML sigue un estándar, nada mejor que validar nuestro código aquí: http://validator.w3.org
Si hemos cumplido todo lo anterior y nos sigue descuadrando la web en diferentes navegadores, entonces conviene saber qué cosas son típicas de incompatibilidades y cómo arreglarlas.
Vamos a ir recopilando errores típicos y sus soluciones.
1- En IE: Una DIV vacía no puede reducirse en altura. Parece haber una altura mínima insalvable.
Origen del problema: IE coloca en las DIV vacías un espacio en blanco para gestionarlas. Si la altura que le hemos indicado es menor que la que ocuparía, por ejemplo, una letra ahí dentro, la capa se expandirá para dar cabida al espacio en blanco.
Solución: {overflow:hidden;}
2- En IE: Un TD de una TABLA parece tener una altura mínima insalvable.
Idem caso anterior.
3- En IE: No aplica un estilo que empieza por “_”
Origen del problema: IE no reconoce el caracter “_” para los estilos CSS. Lo ignora.
Solución: no colocar nombres de estilo con “_”
4- En IE: no se aplican los tamaños mínimos o máximos: min-height, min-width, max-height, max-widh. No se reconoce esta propiedad CSS.
5- En IE: una capa no se acopla a su contenido, se queda detrás, flotando.
Origen del problema: suele pasar con contenidos float y cuando la capa no tiene altura definida.
Solución: Darle un alto mínimo a la capa, pero definido: por ejemplo {height:5px;} Si no tiene {overflow:hidden;}, la capa se acoplará a su contenido (aunque si tiene contenido vacío, tendrá una altura de 5px)
6- En IE: Los paddings y los margins los contabiliza distinto del estandar.
Solución: podemos aprovechar el bug nº3 de IE en nuestro favor, colocando un estilo o una propiedad que empiece por “_” para que sólo la aplique IE.
Ejemplo:
.capa1 {
padding: 5px;
width: 30px; /* en estandar, el tamaño real será 30 + 5 +5 = 40px; */
}
._capa1 {
width: 40px; /* en IE, el padding no modifica las dimensiones */
padding: 5px;
}
<div></div>
/* -- ".capa1" se aplicará en los navegadores estándar -- */
/* -- "._capa1" IE, leerá ".capa1", con lo que sobreescribirá ".capa1" -- */
/* -- "._capa1" para los estandar es otro nombre de estilo, un estilo que no usaremos -- */
Mismo ejemplo, distinta solución:
.capa1 {
padding: 5px;
width: 30px; /* en estandar, se aplica este tamaño */
_width: 40px; /* en IE, se está sobreescribiendo el widht de 30px */
}
<div></div>
Esta segunda solución parece la más rápida y limpia. Sin embargo, puesto que “_widht” no existe como propiedad, estrictamente hablando nuestra CSS es errónea (aunque funcione). No pasaría un validador de CSS. Por ello, la solución más limpia y correcta sería la siguiente:
.capa1 { /* colocamos aquí todas las propiedades típicas, segun el estándar */
padding: 5px;
width: 30px;
}
._capa1 { /* en IE, se sobreescribirá sólo esta propiedad */
width: 40px;
}
Como veis, este “apaño” sirve para diferenciar qué partes de la CSS tiene que sobreescribir Explorer y cuáles son comunes, siendo útil para diversos casos, aunque debe de ser este el último recurso.
Windows. El poder de Sublime Text 2 se encuentra en las extensiones o plugins: completado inteligente, integración con Git, manejo de archivos de proyecto, diff, entre otras delicias un programador sabrá agradecer.
