Tags » ‘CSS’

El problema

Desde tiempos ancestrales los browsers hicieron del maquetado web una tortura de proporciones biblicas. Desde entonces, el arsenal de los maquetadores se fue acrecentando con buenas prácticas y muchos, muchos hacks.

¿A qué me refieron con hacks? Al uso de sintaxis alterada y características non-standard. Obviamente, hay casos en los que no existe salida por derecha y el uso de hacks es prácticamente una obligación. Por otra parte, la aplicación condicional de reglas mediante el uso de sintaxis alterada es algo que se puede (y debería) evitar.

p {
  /* Applies to all major browsers */
  background: red;
}

body[class|="page-body"] p {
  /* Applies to IE 7 and most modern browsers except Opera */
  background: green;
}

En el ejemplo (tomado de Css Hack), evidencia esta postura. Dentro del mismo sitio, se listan numerosas alternativas para diversas situaciones, siendo las más importantes la aplicación de reglas según el tipo de browser. Para horror de cualquier persona no demasiado interiorizada en el tema, se puede encontrar con algo parecido a lo siguiente.

/* Win IE7 */
*:first-child+html selector{property:value;} 

/* Win IE6 & Mac IE */
* html selector{property:value;}

/* Win IE6 */
/*\*/
* html selector{property:value;}
/**/

/* MacIE */
/*\*//*/
selector{property:value;}
/**/

Como se ve, además de invalidar el CSS (que no es un gran problema tampoco), vuelve las hojas de estilo algo complejo de leer (algo que se agrava con la falta de comentarios). No hay que olvidar, que si bien hoy las reglas pueden ser interpretadas por n browser, el día de mañana la situación puede ser distinta, con lo cual el hack pasa de utilidad a problema.

Dentro de lo que es Internet Explorer, existe otra herramienta (si es que se la puede llamar así) que permite cargar reglas u hojas de estilo de acuerdo a la versión del navegador (siempre dentro de la familia IE).

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

Para mayor información sobre esta “”"característica”"”: About Conditional Comments, Things You Might Not Know About Conditional Comments.

Si bien inicialmente los comentarios condicionales pueden parecer grandes aliados, si indagamos más en la web, podemos encontrarnos con grandes sorpresas, como ser que los comentarios condicionales bloquean las descargas (o en otras palabras, evitan la paralelización de descargas de hojas de estilo). En esta entrada Stoyan Stefanov, concluye el artículo con contundente consejo*:

if you worry about performance, don’t use conditional comments

*A modo de disclaimer, posteriormente actualiza con una forma de evitar el bloqueo. Pero aún así quedan claro los peligros de utilizar este tipo de hacks.

La solución menos mala

Más allá de las soluciones posible, queda en claro que el problema existe y seguirá existiendo en la medida que se maquete soportando browsers antiguos. ¿Cuál es la manera menos invasiva/macabra de solucionarlo?
Personalmente me inclino por realizar browser sniffing, ya sea desde el servidor o el cliente. Si bien no soy muy partidario del browser sniffing, es sin dudas una solución menos mala que el uso indiscriminado de hacks.

Si se opta por el servidor, la solución implica agregar a la página la hoja de estilo general y su correspondiente hoja de estilo puntual si es que existiera. O, puede generarse la hoja de estilo general de manera dinámica de acuerdo al browser solicitante.

Si es en cliente, basta con agregarle al body un class correspondiente al browser. Esta metodología es utilizada por ExtJS para renderizar de igual manera los widgets en cualquier browser.

Con lo cual podemos diferenciar las reglas sin hacer uso de hacks.

body.ext-ie #form {
  padding-left: 4px;
}
body.ext-webkit #form  {
  padding-top: 4px;
}

Conclusiones

Si bien tengo mis motivos para no utilizar hacks a la hora de maquetar, esto no siempre es posible, más que nada en el caso de los hacks no expuestos en este post. Para los casos puntuales de reglas específicas la técnica de browser sniffing termina siendo la menos invasiva y más recomendada.